コピー2020.02.06スポンサーリンクいつの間にやら登場していてめっちゃ便利なFlexbox。ほんとにお世話になっています。以前はfloatやJsで書いていたレイアウトがCSSのシンプルなコードだけで実現できて、レスポンシブとの相性もばっちりというニクイやつです。そのなかでよく使うものをいくつかメモ。PCとモバイルで表示が違うので、ぜひ見比べてみてください。参考にさせていただいたサイトはこちらです。NxWorldFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。HPcodeFlexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使わなくて実装できるよね?」ってなりました。flex;」を指定すると、そのコンテナのなかのアイテムが横に並びます。アイテムは、高さがバラバラでも一番大きなサイズに自動的に揃えられます。PCで見ると細いグレーのラインの高さが同じであることが解ると思います。モバイルでは縦に並ぶよう、メディアクエリで指定します。HTMLのサンプルはこんな感じ。</div></div>CSSのサンプルはこんな感じ。wrap;」は折り返しの指定です。3列になるよう並びます。これを記述しないと全部横に並んじゃいます。space-between;」は等間隔に並べる指定。コチラを記述するとサンプルのように中のアイテムが5つだった場合、下のアイテムが両端に配置されます。それを避けるため、「.flex01::after」で空のコンテンツを入れています。column;」で767px以下の環境下ではアイテムを縦に並ばせています。※わかりやすくするために、アイテムにグレーの細いボーダーを入れています。画像とテキストを左右交互に表示。HTMLのサンプルはこんな感じ。</div></div>CSSのサンプルはこんな感じ。row-reverse;」で偶数のアイテムの中身を逆順に表示させています。center;」で文字を上下左右中央に配置してます。メディアクエリでは、767px以下の場合、画像もテキスト領域も幅100%になるようにしています。※わかりやすくするために、アイテムにグレーの細いボーダーを入れています。column;}}下部に固定表示されるボタンをつけるよくあるボタンが下に表示されるボックス。moreHTMLのサンプルはこんな感じ。href="#">more</a></div></div></div>CSSのサンプルはこんな感じ。※わかりやすくするために、アイテムにグレーの細いボーダーを入れています。まとめFlexbox、はじめはとっつきにくいかと思いましたが覚えると便利なんですよね。他にもロゴとナビゲーションを並べる時やサイト全体のカラムを分ける時にも使ったりします。16進数6桁のコード)を使っている方が多いですかね。わたしもメインはカラーコードです。Favs」の使い方を分かりやすく紹介します。WEB【初心者CSS】属性クラスタの書き方まとめ初心者向けにCSSの属性クラスタの書き方をまとめておきます。WEBそのリンク、切れてません?「dead-link-checker」で無料チェック!そのリンク切れを無料でチェックできる「dead-link-checker」の使い方を分かりやすく説明します。Webグランプリ」受賞サイトを調べてみました。Webグランプリ」は企業サイトのみが参加できる、WEBサイトAWORDです。WEB【初心者HTML】よく使うHTML特殊文字のコード初心者向けによく使うHTML特殊文字のコードを置いておきます。ダブルクォーテーション」「大なり・小なりかっこ」をHTMLで表示させたい人向け。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月おすすめサーバこのサイトでも使用しています。まとめAUTHOR書いた人nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。nullll14人気記事Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編2019.10.152020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編2019.11.262020.01.14Cocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編2019.12.122020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編2019.10.162020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編2019.10.182020.01.09nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。Reserved.検索メニューWEBWORDPRESSWORKSいろいろプロフィールタイトルとURLをコピーしました。