【勉強嫌いもわかる】justify-contentの意味と使い方 | nekochan's

【勉強嫌いもわかる】justify-contentの意味と使い方

WEBデザイン

求職者支援訓練でwebデザインを学ぶデザイン初心者が、CSSの「justify-content」プロパティについて意味や使い方を忘備録としてまとめました。

難しいものではないので、このブログを見るだけで一通り理解できるはず!

デザイン初心者やノンデザイナーのブロガーさんにおすすめです。

justify-contentの構文

justify-contentジャスティファイ・コンテント : 位置; }

justify-contentプロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。

justify-contentはdisplay:flexとセットで使うCSSです。
左右中央揃えの方法などでよく紹介されているjustify-contentですが、display:flexが指定されていないと指示が通りませんので、必ず親要素にdisplay:flexまたはinline-flexなどflex要素をセットで指定しておきましょう。

【これだけは覚えておこう!】よく使う値6選

よく使う値については、実装例を交えて解説します。

  • justify-content: center; →アイテムを中央に寄せる
  • justify-content: flex-start; →フレックスアイテムを先頭に寄せる
  • justify-content: flex-end; →フレックスアイテムを末尾に寄せる
  • justify-content: space-between; →アイテムの間にスペースを均等に割り付け
  • justify-content: space-around; →アイテムの両端にスペースを均等に割り付け
  • justify-content: space-evenly; →各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置く

通常の配置

justify-content プロパティ配置場所
justify-content: normal;

位置による配置

justify-content プロパティ配置場所
justify-content: center;アイテムを中央に寄せる
justify-content: start; アイテムを先頭に寄せる
justify-content: end;<アイテムを末尾に寄せる
フレックスアイテムを先頭に寄せる
justify-content: flex-end;フレックスアイテムを末尾に寄せる
justify-content: left;アイテムを左端に寄せる
justify-content: right;アイテムを右端に寄せる

※justify-content はベースラインの値を取りません

実装例<justify-content: center;>

左右に等しく空白ができます。item同士はくっついた状態です。

実装例<justify-content: flex-start;>

フレックスアイテムを先頭揃えで表示されます。初期値はこの「justify-content: flex-start;」です。

実装例<justify-content: flex-end;>

末尾揃えで表示されます。

均等配置

justify-content プロパティ配置場所
justify-content: space-between;アイテムの間にスペースを均等に割り付け
justify-content: space-around;アイテムの両端にスペースを均等に割り付け
justify-content: space-evenly;各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置く
justify-content: stretch;各アイテムを均等に配置し、サイズが ‘auto’ であるアイテムをコンテナに合わせて引き伸ばす

※「stretch」はフレキシブルボックス (フレックスボックス) は対応していません。

実装例<justify-content: space-between;>

item1の左側、item4の右側に空白は入りません。

space→空白
between→間

『アイテムとアイテムの「間」に「空白」を入れる』と考えといいでしょう。

実装例<justify-content: space-around;>

space-between;と異なり、端のitemにも空白が入っています。

space→空白
around→周り

アイテムの「周り」に「空白」が均等に配置されます。アイテムの周りに同じサイズのmarginをつけてるイメージです。

実装例<justify-content: space-evenly;>

各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置くイメージです。

space→空白
evenly→均等

一見「space-around」に近いですが、全ての「空白」が「均等」に配置されます。

あふれた場合の配置

justify-content プロパティ配置について
justify-content: safe center;配置キーワード(centerなど)と共に使用する。
選択されたキーワードによって、アイテムが配置コンテナをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置される。
justify-content: unsafe center;配置キーワード(centerなど)と共に使用する。
アイテムと配置コンテナの相対的な寸法にかかわらず、またデータの損失が発生するかどうかにかかわらず、指定した値を尊重する。

グローバル値

justify-content プロパティ備考
justify-content: inherit;inherit は親要素のプロパティを継承する。
英語で inherit は「受け継ぐ、相続する、遺伝する」という意味。プロパティの計算値を、明示的に継承することを指定することができます。
justify-content: initial;initial はプロパティの初期値 (規定値) を設定する。
英語で initial は「初めの、最初の、初期の」という意味。そのstyleのプロパティの初期値又は規定値を設定する。初期値に戻したい時に使用できる。
justify-content: revert;ユーザーエージェントのstyleをセットします。プロパティそのものの初期値ではありません。
justify-content: unset;親から値が継承されている場合は継承値、継承されていない場合は初期値を設定する。

justify-contentが効かない原因

justify-contentの指示を出しても反映しない!ということも多々あるのではないでしょうか?
そんなトラブルでお困りの方は、以下のような解決策を試してみてください!

  1. flexを指定していない
    【解決策】→display:flexを指定しましょう
  2. marginを指定している
    【解決策】→子要素のmargin:autoを削除しましょう
  3. beforeやafterがある
    【解決策】→beforeやafterが孫要素になるようにしましょう
  4. flex-direcion:columnで縦並びの指示を出している
    【解決策】→align-itemsで位置調整しましょう

おすすめの人気WEBデザイン参考書

まとめ

求職者支援訓練でwebデザインを学ぶデザイン初心者が、CSSの「justify-content」プロパティについて意味や使い方を忘備録としてまとめました。

全て覚えようと思うと大変ですが、一つ一つ見てみると、そこまで難しいものではなかったですよね?
このブログを見て一通りどんなものか理解できたはず。

デザイン初心者やノンデザイナーのブロガーさんの参考になったら嬉しいです!

その他のWEBデザインに関する記事はこちら

【WEBデザインのサブスク】オンラインで学べるデザナルの評判!
【無料はキツイ】デザイン初心者が課金するべき画像サイト特集!2022年
【無料体験】働きながらWEBデザイン学ぶなら!デイトラがおすすめ
【2022最新】WEBデザイン初心者におすすめのレンタルサーバー
【未経験からWEBデザイナーに】アラサー女子が選ぶおすすめスクール

コメント

タイトルとURLをコピーしました