CSSを組むときの考え方 ～レイアウト編～

　cssを実装する時にcssのクラスに関しての設計はよく話に出てきますが、パラメータ側を考慮した良い設計という話はあまり見ないのでまとめてみました。

１　縦と横を意識する

　Webページを作成する際、一番最初にすることは画面を縦、横を意識しつつ分割していく作業です。ここを意識して設計すると後々別の要素が追加されたり、逆に消す場合もバランスを保ちやすく扱いやすいhtml、cssになります。

　それでは実際のwebページを見つつパースしてみましょう。参考に Yahoo! JAPANを使います。以下は上部を切り取って分割してみた図です。(一応ボカしてます)

赤線　縦方向の分割

青線　横方向の分割

　分割するときの優先順位は

　　１　縦

　　２　横

の順番で分割します。今回の例だと最上部のヘッダのエリア、下のコンテンツのエリアで分割できます。(下のほうは実際はもっと下のコンテンツまでが範囲です)

　さらに下のコンテンツは左、中、右の３つのコンテンツで分割でき、これが横並びで分割できます。このような作業を繰り返してレイアウトを縦、横で分割していきます。 

２　inline要素とblock要素

 　レイアウトを分割してじゃあ実装だ！となるところですが、まずは要素の特性を知ってから組みましょう。要素には２つの特性があります。それぞれの特性を見ていきましょう。

　・inline要素

　　　inline要素はその名の通り並べると文字が並ぶようにインラインで連なるような要素です。基本的には横に並びますが、文字のように折り返します。また、ブロック要素の内部にテキストを記述した場合、そのテキストはinline要素の特徴を持ちます。

　実際に配置してみたものが以下になります。２つ並びで指定すると横並びになりますね（見やすいように少しcssをかけてます)

　・block要素

　　　block要素はinlineとは逆に複数並べても横並びしません。基本的に親要素の幅いっぱいまで横に広がります。その為複数並べたときには縦に並びます。

　こちらも実際に配置してみるとこうなります。

３　実際にレイアウトを組む

　さて、ここからは実際にレイアウトを組んでみます。試しに１で分解したレイアウトを組んでみます。赤線で縦に分割した要素はblock要素、青線で横に分割した要素はinline要素で組みます。実際にレイアウトを組むとこうなります。

ざっくりとは形になりました。ただこれでは同じレイアウトとはいえなさそうです。

全体のサイズ感を整えてみます。spanはinline要素ですが、inline要素は色々と不便な所が多いのでinline-block要素にします。

まだ崩れていますが、なんとなく見える形にはなりましたね。

　このように縦と横を分け、要素の特徴を使い分けるとより見やすく保守しやすいレイアウトが組めます。ただ実際にinlineとblockだけで実装するのは困難です。inlineとblockは大枠でさらに拡張した属性を使って組むことが多いです。さきほど利用したinline-blockもその一つです。詳細はdisplay - CSS | MDNにあります。

ざっくりとレイアウトを分割→組む作業までの流れを書いてみました。

次回は中のコンテンツ(モジュール)の作り方を書きたいと思います。