創作ポスト創作物の力で元気になろう。すてきな創作物を知りたい人、自分で創作物を作っている人に向けて、手紙を書くように記事を届けます。CSSの指定は正確にできているはずなのに、各項目の間に変に隙間があいてしまい悩まされた方もいるのではないでしょうか。この記事では、この問題を解決出来るだけでなく、項目数の増減にも対応できるFlexbox(フレキシブルボックスレイアウト)を用いた横並びメニューの作り方を紹介します。終わりにスポンサーリンクリスト(li要素)を横並びにする方法とその問題点CSSを使ってリスト(li要素)を横並びにする方法には、次のようなものがあります。left;を指定するFlexboxを使用する並べてみると色んな選択肢があるように見えます。inline-blockやfloatの方法を使用する場合、面倒な問題が起きます。black;}まず、inline-blockを使う場合です。コードは上記の通りで、各項目のwidthを25%にしているので、本当であれば1行分のスペースが4等分され、各項目に割り当てられるはずです。実際はこのようにリストの項目間に謎の空白(実態は半角スペース)ができてしまいます。コードを汚くしてもいいのであればこの問題を回避することはできますが、コードを汚さずに解決できるならそれに越したことはありません。floatの方法では、項目数が増減した場合にCSSの修正が必要li要素のwidthをパーセントで指定しているため、項目数が増減した場合にはCSSを修正する必要があります。20%;に書き換える必要があります。メニューの項目数は増減することも考えられるため、それに柔軟に対応できるCSSの記述があるのであれば、そちらを利用するべきです。リスト(li要素)の横並びにFlexboxを使うメリットここまででinline-blockやfloatでリストを横並びにする場合、少し面倒な問題が起きることを説明しました。この問題はFlexboxを使えば解決できるのです!Flexboxでリストを横並びにするメリットは次の通りです。項目間に意図していない空白が生成されない項目数の増減に対応できるCSSの指定方法が存在するFlexboxでリスト(li要素)を横並びにする方法menu1menu2menu3menu4Flexboxでリスト(li要素)を横並びにするとこのようになります。inline-blockの場合とは違い謎のスペースが表示されていないおかげで、全項目が綺麗に1行分のスペースに収まっています。コードは以下の通りです。black;}Flexboxでリスト(li要素)を横並びにするポイントは次の2つ。1;を指定するどうしてこのようなプロパティを設定していくのかをこれから説明していきます。flex;を指定した要素は、flexコンテナボックスとして扱われます。flex;を指定した要素の直接の子要素は、flexアイテムとして扱われます。フレキシブルボックスレイアウトとは何かを簡単に説明すると、flexコンテナボックスの中で、flexアイテムを柔軟に配置するレイアウトです。flex;を指定しています。これにより、flexコンテナボックスとなったul要素の中で、flexアイテムとなった各li要素を柔軟に配置することができます。1;を指定するflexアイテムを柔軟に配置するとはどういうことなのか。そのうちのひとつの答えが、このflex-growプロパティです。flex-growプロパティとは、flexコンテナボックスにflexアイテムを配置した上で余ったスペースをどのように割り当てるかを指定するプロパティです。今回、各li要素にwidthは指定していないため、親であるul要素が持つスペースの100%を各li要素が分け合うことになります。1;を指定したので、それぞれのli要素が1:1の比率になるように余ったスペースを分け合います。1;を指定するということは、余ったスペースを各flexアイテムで等分するということなのです。1;を指定してみます。各項目のwidthが分かりやすくなるよう、項目間にはborderを入れました。スマホで見ると表示領域が小さくて差がわかりにくいかもしれませんが、横画面表示にしてもらえば差がわかるはずです。2;}結果は上記の通りです。2を指定したもののwidthのみが長くなっています。2を指定した項目には2倍のスペースが割り当てられているからですね。none;}ここまでで説明した箇所との違いは以下の通りです。項目数を1つ減らした(CSSで幅の変更は行っていませんが、スペースが自動で再分配されていることがわかると思います)メニューなのでクリックしたら移動できるように各li要素の中にa要素を作ったクリックやタップが効く範囲をボタンのようにするために、a要素をblock要素にしたa要素のリンク装飾を打ち消した各項目にマウスホバーした際に、背景色が変わるようにしたFlexboxで横並びメニューを作る際の注意点flex-growプロパティは、あくまで余ったスペースをどのように割り当てるかを指定するプロパティだということです。文字だけで横幅がいっぱいになってしまった場合などは、配分するスペースはなくなるため、各項目の横幅がキツキツになります。これはFlexboxに限った話ではありませんが、あまり項目数が多くなる場合は、スマホに限り横並びを諦める、というのも選択肢のひとつとして考えておいた方が良いです。終わりにこの記事では、リスト(li要素)を使って横並びメニューを作る際には、Flexboxを活用すると便利なことがたくさんあることを紹介しました。フレキシブルボックスレイアウトは比較的新しい要素ですが、使いこなせれば非常に便利なものなので、是非マスターして下さい。曲と文章とwebを作ります。映像作品や小説・漫画など、物語が好きです。Feel』を運営しています。人間が人間らしく生きられる世の中を作りたい。お仕事のご相談などはお問い合わせフォームからご連絡下さい。僕がブログを書く理由ブログのために記事を書くのではなく、自分と読んでくれる人のために記事を書くために、僕がブログを書く理由をまとめました。ブログを書いている人やこれから始めようとしている人で、他の人がどうしてブログを書いているのか気になる...続きを読むブログ名(ブログタイトル)やドメインの決め方はこれでOKブログ名(ブログタイトル)を決め方で悩んでいる人に向けて、読者さんからのアクセスを失わないための命名法についてまとめました。いわゆる雑多ブログを運営している方向けの記事です。関連事項として、ドメインの考え方についても説...続きを読むCSSのborderプロパティで三角形を作る方法とその解説CSSのborderプロパティで三角形が作れることをご存知でしょうか。知っていたとしても、一度使ったくらいでは、使ってからしばらくすると忘れてしまいやすい部分でもあると思います。この記事では、CSSのborderプロ...続きを読む[WordPress]はてなブログのように記事中に記事を埋め込む方法WordPressの記事中に、はてなブログのように記事を埋め込む方法がわからない人向けの記事です。記事のタイトル、冒頭の抜粋文、ブログ名、アイキャッチなどがセットになって埋め込まれているアレです。僕自身、アレの呼び方...続きを読むポジティブになるには毎日ブログを書けばいいんじゃない?ネガティブ思考を直したくても、ポジティブになる方法(前向きになる方法)がわからない人はたくさんいると思います。Yo)曲と文章とwebを作ります。映像作品や小説・漫画など、物語が好きです。人間が人間らしく生きられる世の中を作りたい。Feel』を運営しています。お仕事のご相談などはお問い合わせフォームからご連絡下さい。Feel人気記事(24h)iPhoneで削除したアプリ(app)の残骸をiTunesから削除する方法Flexboxならリスト(li要素)間に空白ができない横並びメニューが簡単に作れるAutoHotkeyの使い方。生き方Flexboxならリスト(li要素)間に空白ができない横並びメニューが簡単に作れる創作物の力で元気になろう。すてきな創作物を知りたい人、自分で創作物を作っている人に向けて、手紙を書くように記事を届けます。