Webアプリケーションの画面のレイアウトをHTML, CSSで作成する際、画面が崩れて嵌ってしまいだいぶ苦戦したのでその覚え書き。
まず、displayプロパティの各値の特徴について。
display
・縦に積まれていく
・幅と高さを指定できる。
・上下、左右にmargin、paddingを指定できる。
・text-alignは要素の中身に使用できる。
・verticle-alignは指定できない（縦に並ぶので）。
inline
・横に並んでいく。
・幅と高さは指定できない。文字の大きさに合わせて変化する。
・左右のみmargin、paddingを指定できる。
・text-alignは親要素に指定することで使用できる。
・verticle-alignを指定できる。
inline-block
・横に並んでいく。
・幅と高さを指定できる。
・text-alignは親要素に指定することで使用できる。
・verticle-alignを指定できる。
inline-blockは高さ、幅を指定できるブロック要素みたいな感じでレイアウトを行う際によく使われる。
CSSでレイアウトを考える際、テキストやボタンなどの部品の固まりを要素として考えるが、単純に要素を並べていくと通常下図左側のように要素が下へ下へと並んでいく。座標を指定して要素を動かすことも可能であるが、画面の大きさやブラウザによって表示され方が異なってくるので推奨されない。
要素を横に並べたい場合には次の２つの方法が考えられる。子要素Aのfloatプロパティでleftを設定する方法と要素をinline-blockとして横並びさせる方法がある。floatを使った場合以下のように記述することができる。
・CSS
parent {
position:relative;
}
childA-block {
position: relative;
float: left;
}
childB-block {
position: relative;
float: left;
}
・HTML
<div class="parent-block">
親要素
<div class="childA-block">
子要素A
</div>
<div class="childB-block">
子要素B
</div>
</div>
この場合float:leftと設定することで自分の要素を左側に追いやって、右側にスペースを作っている。
続いてdisplayプロパティのinline-block要素を使う方法である。inline-block要素に設定することで、inline要素とblock要素の両方の性質を持つことができる。inline要素とは、<a>や<span>など主にブロック要素の内容として扱われる要素で、文章として扱われる。一方、<div>や<form>、<table>などはblock要素と呼ばれ、一つのブロックとして扱われるため、通常同時に改行される。
・css
parent-block {
position: relative;
}
childA-block {
position: relative;
display: inline-block;
}
childB-block {
position: relative;
display: inline-block;
}
上記のように記述することで、子要素を横に並べることが可能になる。しかし、子要素同士の高さが異なる場合や複雑なレイアウトでfloatとinline-blockの両方を使う必要があるときなどに画面が崩れる場合がある。下図のようなレイアウトを考える。
まず、子要素A, Bをinline-blockで並べ孫要素は単純に上から並べてみる。
.parent-block {
width: 150px;
margin: 10px;
position: relative;
background-color: #888;
display: inline-block;
border: 1px solid;
}
.childA-block{
position: relative;
background-color: #aaa;
display: inline-block;
border: 1px solid;
}
.childB-block{
position: relative;
background-color: #aaa;
display: inline-block;
border: 1px solid;
}
子要素の高さが異なる場合、子要素Aは子要素Bの高さに合わせてどんどん下へと移動してしまう。また、原因はよくわからないが子要素A, Bの間に隙間ができてしまった。
HTML上で要素間に改行があった場合に、子要素A,B間に隙間が生じてしまう。これを解決する方法もいくつかあって、最も簡単な方法は改行しないことです。
<div class="parent-block"> 親要素 <div class="childA-block">子要素A</div><div class="childB-block">子要素B</div> </div>
それ以外にも改行箇所にコメントを挟むことで、防げるようです。
<div class="parent-block">
親要素
<div class="childA-block">
子要素A
</div><!--
--><div class="childB-block">
子要素B
</div>
</div>
別の方法として、float:leftを使ってレイアウトしてみる。
.parent-block{
width: 150px;
margin: 10px;
position: relative;
background-color: #888;
border: 1px solid;
}
.childA-block{
position: relative;
background-color: #aaa;
float: left;
border: 1px solid;
}
.childB-block{
position: relative;
background-color: #aaa;
float: left;
border: 1px solid;
}
今度は子要素Aの位置は変わらず、子要素A, Bの間にできていた隙間も生じなくなった。しかし、親要素が高さを失いつぶれてしまっていることがわかる。floatを使用することで、親要素が高さを失ってしまったのである。ここで登場するのがoverflowという収まりきらない領域をどのように処理するかを決めるプロパティである。値にhiddenを設定することにより、フロートした要素の回り込みを防ぐことができて、親クラスに高さが復活するようである（自信なし）。高さを持たせたい親クラスに一行書き足すだけでfloatを解除することができ、他にも方法はあるが現在はこれが主流らしい。
.parent-block{
width: 150px;
margin: 10px;
position: relative;
background-color: #888;
border: 1px solid;
overflow: hidden;
}
今回は、floatを使うことにより、この問題を解決した。しかし、より複雑になってきた場合、floatとinline-blockを組み合わせるなど、位置の調整が必要になってくることが考えられるので使えこなせるように勉強していきたい。
—————————————参考文献—————————————
display: inline、display: block、display: inline-block をマスターしよう！