なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

【HTML+CSS】divを横並びにする方法

私が3年ほど前に習ったのはfloatでしたが、専門に入ってからはflexボックスを習ったので改めて書きます。

並べたい子要素の親にこう書きます。

CSS
display: flex;
justify-content: space-between;
align-items: center;

justify-contentは水平方向にどのように揃えるかです。space-aroundなど他にもいろいろあります。

align-itemsは垂直方向の揃えです。flex-startなど他にもあります。初期値がstretchで画像などだと伸びてへんな感じの表示になるのでちゃんと書いておいた方がいいです。

子要素にもorderを指定できます。これはそのままですが並び順です。数値で指定し、数値の順番に並んでくれます。あまり使う機会がないと思っていたら、Web制作の会社にアルバイトでいたころにPCとスマホのレイアウトがまったく異なるLPを任されてしまい、orderを使ってマークアップした覚えがあります。知っておいて損はないかもしれません。

寒さにやられて風邪を引きかけていますが、知人にいただいた高麗人参茶で撃退しました。みなさまもお気を付けください!ちなみにアイキャッチ画像はまったく本文と関係ないですが、卒業制作展のために作ったケーキです。卒業制作のサイトもよろしくお願いいたします。

Rainbow Dreams