2020.05.08この記事で解決する内容Flexboxとはなにか?Flexboxのプロパティこの記事ではFlexboxの使用方法をマスターし、横並びレイアウトをレスポンシブでも表現できることを学んでいきます。大手のスクールでもその優位性を推奨しており、今後スタンダードになるといわれている技術ですので、是非身につけていきましょうね。前半部分では、Flexboxでできること、Flexboxに関するCSSプロパティを説明していき、後半部分では実際のコーディングを見ながら使用場面などを見ていきたいと思います。この記事を読み終えれば、Flexboxを理解し、様々な横並びレイアウトを実現することが可能となります。並び順と方向指定のプロパティ並び順:order方向:flex-direction複数行表示:flex-wrap横位置・余白の指定:justify-content縦位置・余白の指定:align-items縦位置をフレックスアイテムごとに指定:align-self複数行の縦位置・余白の指定:align-contentまとめFlexboxとは?FlexboxはCSS3から取り入れられた新機能で、簡単でより柔軟に横並びレイアウトを表現できるものとなっています。レスポンシブにも簡単に対応できる為、是非覚えておきたい機能となります。現在ではほぼすべてのブラウザの最新バージョンに対応しており、今後横並びレイアウトを行うためのスタンダードになっていくと思います。実際に多くのサイトでも使用されていることが確認できます。私自身も最近では使用する事もあり、何よりFlexboxで作成されたサイトの修正作業などを行うこともあるので、知識・技術として知っておく必要性を実際に感じたからです。chromeのデベロッパーツールなどでコーポレートサイトなどのコードを確認すると多くのサイトで使用しているのが分かると思いますので、是非調べて見て下さい。デベロッパーツールなどサイトのコードを確認する方法はこちらの記事(準備中)を確認してください。Flexboxの基本Flexboxには関するプロパティがたくさん用意されており、そのため様々横並びのレイアウトを表現することが簡単に行うことが出来るのです。flexを設定し、子要素(横並びになる要素)をフレックスアイテムといいflexプロパティを設定して使用します。ここからはFlexboxに関するプロパティの説明を用途ごとに一つずつ説明していきます。横幅を設定するプロパティ横幅は子要素に設定するflexプロパティを使用します。flexプロパティは3つのプロパティを合わせて設定することが出来るプロパティです。ベースサイズ多くの場合はflexプロパティで設定していきますが、今回はわかりやすく、3つのプロパティを1つずつ説明していきます。ベースサイズ:flex-basisベースサイズは横並びにする要素の横幅の設定値です。flexを設定した親要素の幅に対しての値を設定し、pxや%で指定することが出来ます。例ではflexのベースサイズに20%を指定しています。この20%は親要素100%に対しての20%の幅になります。伸長比:flex-grow伸長比は0以上の数字でしていします。親要素(フレックスコンテナ)に対してベースサイズを設定した時に余った部分をそれぞれに分配する比率になります。オレンジ枠がフレックスコンテナ。これを100%としてフレックスアイテムに20%を設定すると、40%が残ります。伸長比はこの残った40%をそれぞれの要素にどう振り分けるかを決める値となります。BoxA~Cのフレックスアイテムにはそれぞれ伸長比を0に指定しています。伸長比を0に設定するとフレックスコンテナの余った部分はそのままになり、フレックスアイテムは20%のままとなります。BoxD~Fには伸長比を1に指定しています。全てのフレックスアイテムに1を指定すると、のこたっ分を均等に分配することになり、ベースサイズが全て同じに指定してあれば、均等割りとなります。BoxG~Iの伸長比はそれぞれに違う値を指定しています。BoxGには1、BoxHには2、BoxIには3を。フレックスコンテナの余った部分は1:2:3に分配するという意味になります。縮小比:flex-shrink縮小比は伸長比とは逆で、ベースサイズで指定したサイズが、フレックスコンテナをオーバーしたとき、オーバーした部分を縮小する比率を設定します。BoxA~Cは縮小比を0に指定していますので、フレックスコンテナからオーバーした状態のままで縮小はせずに、表示されています。BoxD~Fは縮小比を1に指定していますので、フレックスコンテナからオーバーした部分20%を1:1:1に均等に縮小されているので、均等割りとなっています。BoxGは1、BoxHは2、BoxIは3に指定していますので、フレックスコンテナからオーバーした部分20%を1:2:3に縮小されて表示されています。3を指定しているBoxIの縮小比が一番大きいので、表示幅は一番小さくなっています。これら3つを合わせて指定するのがflexプロパティとなります。ベースサイズの2つを使用して行います。ベースサイズのauto指定と短縮形ベースサイズをpxや%ではなくautoに指定した場合、フレックスアイテムのサイズは中のコンテンツに合わせて表示されます。flexプロパティにはベースサイズをautoに指定した時の短縮形が用意されています。1で簡単に行えるのでこれも併せて覚えておくと良いでしょう。並び順と方向指定のプロパティFlexboxでは並び順や方向を簡単に変更できるプロパティも用意してあります。並び順:orderorderに指定されている初期値は「0」となっています。その他は初期値の0になっていますので、BoxDが最後、BoxFは最初に移動しています。順番修正がある時にはこのorderプロパティを修正するだけで、htmlは変更せずに修正することが出来ます。方向:flex-directionフレックスアイテムの配置方向を指定します。このプロパティはフレックスコンテナつまり親要素に指定することに注意してください。初期値は「row」となっています。具体的に見ていきましょう。種類は初期値も併せて4つ。今回はわかりやすいように、フレックスコンテナの幅を800px、フレックスアイテムのベースサイズを50pxに指定しました。BoxA~Cは初期値のrowです。何も指定していなければ左から順番に表示されます。BoxD~Fはrow-reverseで指定しています。右から左の順番に表示され、注意点はフレックスコンテナの右端から表示されること。BoxG~Iはcolumnを指定しています。上から下の順番に表示されます。BoxJ~Lはcolumn-reverse。下から上に表示されます。columnやcolumn-reverseを指定した時には、ベースサイズが幅ではなく高さになることに注意してください。複数行表示:flex-wrapこのプロパティを使用する事で、フレックスアイテムの幅がフレックスコンテナの幅をオーバーした時に自動で複数行に表示してくれるとても便利なプロパティです。フレックスコンテナに指定してください。灰色部分はフレックスコンテナのスペースです。今回はベースサイズを15%に指定。7つ目のBoxGでフレックスコンテナをオーバーしていますので、BoxGから2行目に表示されています。初期値は「no-wrap」。複数行を行うにはwrapを指定します。wrap-reverseを指定すれば、逆方向からの表示となります。横位置・余白の指定:justify-contentフレックスコンテナに対してフレックスアイテムの横位置や余白の指定を行うプロパティです。フレックスコンテナに指定します。初期値は「flex-start」。他4つの値を指定できます。下の図で確認してください。space-aroundの両サイドの余白については、フレックスアイテム間の余白は半分になります。縦位置・余白の指定:align-itemsフレックスコンテナに対してフレックスアイテムの横位置や余白の指定を行うプロパティです。フレックスコンテナに指定します。初期値は「flex-start」。他4つの値を指定できます。下の図で確認してください。フレックスアイテムの高さは中にあるテキストなどの量やサイズにより指定されますので、同じ量やサイズではこのように表示されないので注意してください。縦位置をフレックスアイテムごとに指定:align-selfalign-itemsは全体の表示設定ですが、align-selfをフレックスアイテムに指定することで、個々に縦位置を指定することが出来ます。複数行の縦位置・余白の指定:align-contentalign-contentは複数行にしたフレックスアイテムの縦位置指定に使用するプロパティです。このプロパティを使用するには、フレックスコンテナに高さを指定する必要があります。フレックスアイテムに高さを指定した場合はそちらが優先されますので注意してください。横並びレイアウトを柔軟にできるFlexboxは、WEBデザインのコーディングにおいて大きな力を発揮する事は間違いありません。関連記事HTML&CSS初心者が覚えておくべきhtmlタグを紹介!これだけ覚えればサイトの構造は作成できます!!「Webデザイナーの学習をなにからはじめたらいいかわからない」「htmlってなに」そんな悩みを抱えている方に、まず初めに学ぶ必要のあるhtmlタグを説明します。これからのタグを覚えればほとんどのサイトの構造は作成することができます。HTML&CSSheadタグ内に記述必須のタグを紹介!!SEO対策や表示にも影響する重要事項コーディングの学習をしていて、どうしても後回しにしがちなのがheadタグ内のコード。実はとても重要な内容を記述する部分で、SEOにも影響を及ぼすものでもあるのでしっかりと覚えておきたいところです。この記事で解決する内...HTML&CSSSEO対策としてHTMLのタグ設定を理解する!効果的な4つの方法HTML記述がSEOに影響を及ぼすことをご存じですか?正しい記述方法を知っていますか?学習を始めたばかりの人は特に、表示にばかり気を取られ、W3CやGoogleが推奨しているHTMLの記述方法をあまり気にしていない人も多いはず!それほど難しくなく、すぐにでも対応できる内容なので、まとめて説明しました。その一つの原因が保存時に起きていることがあります。私も実際にそれで文字化けが起きてしまい、解決するのに時間を要してしまいました。「CSSでの横並びが上手くできない」「どこが間違っているのかわからない」と言う方に、丁寧にdisplayのinline-blockを説明した記事になっています。この記事を読めば超初心者でも横並びのレイアウトを表現することが出来ます。HTML&CSS5分でわかる!CSSのfloatプロパティの使い方を仕組みから教えます!!floatを使うと「レイアウトが崩れてしまう!」「思ったようなレイアウトにならない!」などCSSでつまづくポイントでもあるfloat。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スポンサーリンクTomoアラフォーで勉強を始めて40歳手前でWebデザイナーとして働き始めた男。アラフォーから始めるウェブデザイナー.メニュープロフィールWEBデザイナーSEO在宅ワークプライバシーポリシーホーム検索トップサイドバースポンサーリンクTomoアラフォーで勉強を始めて40歳手前でWebデザイナーとして働き始めた男。タイトルとURLをコピーしました。