ぶちろぐこのサイトについてこのサイトは、Webと音楽を愛する人の提供でお送りしております。サイト設計ツイートシェア+1Pocketfeedlyはてブごきげんよう。CSSにはいろんなスタイルがあり、いろんなスタイルを組み合わせて実現したい体裁に整えていきます。今回はサイト設計でよくある横並びコンテンツのスタイルの選択基準について解説します。横並びコンテンツのスタイルまとめよくある横並びコンテンツまずはどんなものがあるか列挙します。グローバルナビゲーションパンくずリストメインコンテンツとサブコンテンツテキストリンク・ボタン等の横並び上記は昔からよくあるコーポレートサイトを想像してもらうとわかりやすいです。大きいものから小さいものまで横並びにするコンテンツがあるかと思います。小さいものは文章のように複数行に改行を入れて折り返したいものもあるでしょう。サイト設計ではコンテンツの可変・性質を考えて設計しないと運用の時に破綻してしまうことがあります。横並びにする方法さて、横並びにする方法はいくつご存じでしょうか?横並びにする方法は以下があります。table-cellで表組のように並ばせるdisplayのflexでモダンにレイアウトするそれぞれメリット・デメリットがあります。回り込みさせる時に使用する。昔から並列の為によく使用されていた。図版をfloatさせて周りに文字を回り込ませたりできる。floatを使用すると回り込み解除を設定しないと要素が潰れたりと意図しない現象が起きてしまう。インライン要素として並列させる時に使用する。文字の塊で横並びにできる。各要素の間に隙間ができてしまう。表組のように並列させる時に使用する。各要素の横幅を指定しなくても親要素に応じて補完してくれる。table要素扱いになるのでmarginが使用できない等の気を付ける点がある。柔軟なレイアウトを扱う時に使用する。要素を上下左右、好きな順序に並び替えられる等の柔軟性がある。レガシーブラウザは記述方法が異なったり対応していないものが多い。簡単にまとめましたが、実際に使用する時にはfloatやdisplayだけでは不十分です。必要に応じて他のプロパティや親要素にも設定したりとちょっとしたコツがあります。おまじないのように使用するのではなく、プロパティがどのように振る舞うのか仕様を理解するようにしましょう。次世代のレイアウトの話inline-blockを並べた場合に発生する「隙間」を消去するCSSCSS3のdisplay:tableとdisplay:table-cellでレイアウトこれからのCSSレイアウトはFlexboxで決まり!横並びコンテンツのスタイル横並びにするコンテンツと方法を確認したところで、それぞれどの方法でスタイルするのかを見てみましょう。inline-block実際のデモを用意しました。CSSはSCSSで記述しています。※デモ用のためにスタイルを設定しているものは下に固めて記述してあります。CodePen.0まとめいかがだったでしょうか。長年マークアップしている人はfloatですべて記述している方もいらっしゃったのではないでしょうか。flexが登場して柔軟なレイアウトが実現できるようになった反面、仕事で制作するようなサイトではレガシーブラウザの対応まで求められることがまだあるので、今回は使用してないことにしました。仕事で制作する時は、制作要件やブラウザ対応状況等を考えながらどの方法を採用するか検討して実装しないとサイト設計では後々つらくなってきます。スピードを求められて突貫で完成させなければいけない時もあれば、数ページ規模で運用時に修正が少なければあまり影響がなかったりします。いずれにせよ、美しく堅牢な設計がおこなえれば運用時に心を曇らせなくて済みますね。美しいマークアップをおこなって早く帰れるようにしていきましょう。それでは、ごきげんよう。コメントをキャンセルメールアドレスが公開されることはありません。