20. Learn CSS Layout

Tatsuya Asami

14 min readJul 19, 2018

【所要時間】

2時間4分(2018年7月19日)

【概要】

CSSのレイアウトを学ぶ

【要約・学んだこと】

no layout

レイアウトを設定しなかれば、端から端まで目を動かさなければならないので見にくい。

the “display” property

全てのelementはデフォルトディスプレイvalueを持っている。大抵のelementでは、 block(block-level element) か inline がデフォルトである。

block
div が標準block-level elementだ。block-level elementは新しい行から始まり、可能な限り端から端まで伸びる。div の他には form, HTML5では header, footer, section などがある。

inline
spanが標準inline elementだ。inline elementは該当パラグラフの流れを乱すことなく、パラグラフ内のテキストを挟む。他には a elementなどがよく使われる。

none
script などの特殊elementがデフォルトとして使う。JavaScriptで消去や再生せずにelementを隠したり表示したりする時に使う。 visibilityとはことなる。displayをnoneに設定すると、elementは存在しないものとしてレンダリングされるが、visibility: hidden;では、フルに見える場合では、スペースを使う。

other display values
list-item や tableなどたくさんある。こちら参照。Here is an exhaustive list

margin: auto;

#main { 
width: 600px;   
margin: 0 auto;  
}

幅が600pxに固定され、真ん中寄せをする設定。もし幅が600pxより小さい場合は、横スクロールバーが表示される。

max-width

#main { max-width: 600px; margin: 0 auto; }

幅が最大で600pxだが、それより小さい場合はリサイズしてくれる。IE7+を含む多くのブラウザでサポートされている。

the box model

the box model では注意点がある。指定した幅より、枠線の幅と余白の分大きくなる。

.simple { 
width: 500px; 
margin: 20px auto; 
} .fancy { 
width: 500px; 
margin: 20px auto; 
padding: 50px; 
border-width: 10px; 
}

どちらも幅500pxに指定しているが、余白と枠線の太さ分 .fancy の方が幅が広くなっている。

box-sizing

box-sizing: border-box; というelementで、余白や枠線が幅を超えることはなくなる。

.simple { 
width: 500px; 
margin: 20px auto; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} .fancy { 
width: 500px; 
margin: 20px auto; 
padding: 50px; 
border: solid blue 10px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

先ほどと同じ幅、余白、枠線の太さだが、幅を超えないようになる。

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

このようにすれば、全てのelementに先ほどの設定が反映される。 box-sizingをサポートしていないブラウザがあるので、 -webkit- と -moz- を使った方がよい。

position

static: position: static; は特定のポジションを指定されない。

relative: 他のpropertyを追加しない限り、staticと同じ。

.relative1 { 
position: relative; 
} 
.relative2 { 
position: relative; 
top: -20px; 
left: 20px; 
background-color: white; 
width: 500px; 
}

fixed: ページがスクロールされても常に同じところにあるようにする。 relative, right , bottom, lef propertyと一緒に使われる。

.fixed { 
position: fixed; 
bottom: 0; right: 0; 
width: 200px; 
background-color: white;
 }

この場合スクロールしても常に右下にある。モバイルブラウザのサポートはあてにならない。詳しくはLearn more about the situation here

absolute: absolute はfixedのように動作するが、ビューポートではなく、最も近くのancestorを基準にしている。もしancestorポジションがなければ、document bodyを使う。そしてスクロールと一緒に動く。 positioned elementは static を除いた全てのポジションである。

.relative { 
position: relative; 
width: 600px; 
height: 400px; 
} 
.absolute { 
position: absolute; 
top: 120px; right: 0; 
width: 300px; 
height: 200px; 
}

position example

.container { 
position: relative; 
} 
nav { 
position: absolute; 
left: 0px; 
width: 200px; 
} 
section { 
/* position is static by default */ 
margin-left: 200px; 
} 
footer { 
position: fixed; 
bottom: 0; 
left: 0; 
height: 70px; 
background-color: white; 
width: 100%; 
} 
body { 
margin-bottom: 120px; 
}

containerがnavより大きいため機能している。そうでなければ、navがコンテナの外側になる。

float

floatはテキストを画像の周りに囲う時に使う。

img { 
float: right; 
margin: 0 0 1em 1em; 
}

clear

clear propertyは float のコントロールに使う。

<div class="box">...</div> 
<section>...</section>.box {   
float: left;   
width: 200px;   
height: 100px;   
margin: 1em; 
}

section element は divの後に来るはず。しかし、div が左側に float するので、sectionのテキストがdivの周りにfloatし、セクションが全体を包んでいる。

.box { 
float: left; 
width: 200px; 
height: 100px; 
margin: 1em; 
} 
.after-box { 
clear: left; 
}

clear を使うことで、after box がdivの後に来るようになっている。

the clearfix hack

.clearfix { 
overflow: auto; 
}

float: right; を使うと、画像がdivよりも高くなってしまうが、overflow: auto; で画像と高さを合わせることができる。ただ、IE6をサポートする場合は

.clearfix { 
overflow: auto; 
zoom: 1; 
}

zoom: 1; を追加する必要がある。

float layout example

nav {   
float: left;   
width: 200px; 
} 
section {   
margin-left: 200px; 
}

percent width

percentはblockに対しての測定単位。この場合blockの50%が画像になる。

article img {  
float: right; 
width: 50%; 
}

percent width layout

percentはレイアウトにも使えるが、windowが細すぎる時に、navの中身が折り返すので、見にくくなる。

nav {   
float: left;   
width: 25%; 
} 
section {   
margin-left: 25%; 
}

media queries

ブラウザが小さすぎてサイドバーがフィットしない際に有効。

@media screen and (min-width:600px) { 
nav 
 { float: left; 
 width: 25%; 
 } 
 section { 
  margin-left: 25%; 
 } 
} 
@media screen and (max-width:599px) { 
 nav li { 
  display: inline;
 } 
}

通常このように表示されるが、

幅が599px以下になるとnavがsectionの上に来る。

この方法が使われているウェブサイトはこちらを参照。some popular sites that use media queries this way

inline-block

inline-block は inline elementsに近いが、幅や高さを持っている。

.box { 
float: left; 
width: 200px; 
height: 100px; 
margin: 1em; 
}
.after-box { 
clear: left; 
}

after-boxで clear: left; しているので、after-boxがboxの横には並ばない。

The Easy Way (using inline-block)

先ほどの表現はdisplay propertyの inline-blockを使ってもできる。

.box2 { 
display: inline-block; 
width: 200px; 
height: 100px; 
margin: 1em; 
}

この場合は clear を使う必要がない。

IE6やIE7でinline-blockを使う場合は、追記が必要。

inline-block layout

inline-block elementはtopに設置したい時に、vertical-align プロパティの影響を受ける。
それぞれのコラムで幅の設定が必要。
HTML内で空白がある場合、列の間にギャップができる。

nav { 
display: inline-block; 
vertical-align: top; width: 25%; 
} 
.column { 
display: inline-block; 
vertical-align: top;
width: 75%; 
}

column

マルチコラムテキストは下記のように作る。

.three-column { 
padding: 1em; 
-moz-column-count: 3; 
-moz-column-gap: 1em; 
-webkit-column-count: 3; 
-webkit-column-gap: 1em; 
column-count: 3; 
column-gap: 1em; 
}

CSS columnsは新しいので、プレフィックスが必要、またIE9やOpera Miniでは機能しない。詳しくはclick here to read more

flexbox

flexbox layout modeはCSSでレイアウトをどうするか再定義することができる。しかし、ブラウザごとに異なる実行がされる。また、最新バージョンを使用している一部のブラウザしか動作しない。 some browsers that use thee latest version of the standard.

Fancy Layout using Flexbox

.container { 
display: -webkit-flex; 
display: flex; 
} 
.initial { 
-webkit-flex: 
initial; flex: initial; 
width: 200px; 
min-width: 100px; 
} 
.none { 
-webkit-flex: none; 
flex: none; 
width: 200px; 
} 
.flex1 { 
-webkit-flex: 1; 
flex: 1; 
} 
.flex2 { 
-webkit-flex: 2; 
flex: 2; 
}

initial, noneの幅が固定されていて、flex1が1/3, flex2が2/3の幅になる。

Centering using Flexbox

.vertical-container {   
height: 300px;   
display: -webkit-flex;   
display:         flex;   
-webkit-align-items: center;           
align-items: center;   
-webkit-justify-content: center;           
justify-content: center; 
}

css frameworks

css frameworksを使えば簡単に作成しやすくなる。

【わからなかったこと】

１つ１つの動作はわかった。

【感想】

同じレイアウトを作るにも違うやり方があるので、実際にこれら使う際、どれを使えば簡単に作成しやすいかを把握しないと、ある程度進んだ段階で簡単に作れる方法に気が付いたりしそう。

ブラウザや画面幅で表示のされ方が変わるので、しっかりとそれぞれの定義を覚えないと、自分の画面では綺麗に表示されても、うまく表示されていないことに気がつかなさそう。