コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
justify-contentプロパティで位置を揃える
このレッスンでは justify-contentプロパティを使って ボックスの位置を揃えてみます。 今まだ justify-content という プロパティは使われていません。 この場合には flex-start というのが 初期値になります。 現在はその状態なんですが、 ちょっとマージンがあると 結果が見にくいので、 この後マージンを削除したいと思います。 値としてはそのほかに、 このような値があります。 これらを確認してみましょう。 box の box というのはこの親要素ですけれども、 その子供のdiv要素に対して margin がありますが、 これをちょっと取ってみます。 そうすると初期値が 分かりやすいと思います。 確かめましょう。 これがjustify-contentプロパティの 初期値、flex-start ということで 今、主軸はデフォルトの row になっていますから row の場合、デフォルトの方向は 左から右です。 ですから左がスタートということで 全部左にくっつきました。 flex-end はその逆になります。 ではこのクラス box に対する flex の設定はしてありますので そこにプロパティを追加します。 justify-content で flex-end ですね。 そうするとエンドの方向に ボックスが寄ることになります。 主軸 row の方向、エンドの方に ボックスが寄りました。 これは direction ではありませんので、 順番は変わってないですね。 位置がただ単に 右寄りになったということです。 今度は justify-content の 値を center とします。 これは真ん中に寄るということですね。 確認します。 水平方向の中心に 3つ寄り添って固まりました。 間隔が欲しいよねという場合がありますね。 間隔を加える値は この space- です。 ではこれを space-between というふうに してみましょう。 これで保存します。 間に均等な間隔が入りました。 ただし間だけですね。 両端はぴったりくっついています。 両端にも スペースが欲しいという場合には この around を使います。 justify-contentプロパティの値を space-around というふうにして、 また見てみましょう。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。