ichigoryume programming blog

プログラミングに関する備忘録。主にHTML5, C#, Swiftなど。

HTMLのレイアウティング備忘録

レイアウティングに関わる属性

  • display
  • float
  • position

など

display

要素の表示形式を指定する。block, inline, inline-blockなど。

block
  • 縦に積まれていく
  • 幅 width と高さ height が指定できる
  • 上下左右に margin を指定できる
  • 上下左右に padding を指定できる
  • text-align は要素の中身に適応される。
  • vertical-align は指定できない。
inline
  • 横に並んでいく(テキストの一部としてあつかわれる)
  • 幅 width と高さ height は指定できない。幅や高さは文字列の長さや文字の大きさなど、内容物のサイズ。
  • 左右だけ margin を指定できる
  • 左右に padding を指定できる。(実は上下も指定できるけど、前後の行や要素にかぶってしまうので、あまり効果はわからない)
  • text-align を親ブロックに付けることで指定できる。
  • vertical-align を指定できる。
inline-block
  • 横に並んでいく(inlineと同じ)
  • 幅 width と高さ height が指定できる(blockと同じ)
  • 上下左右に margin を指定できる
  • 上下左右に padding を指定できる
  • text-align を親ブロックに付けることで指定できる。
  • vertical-align が指定できる。

参考:CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!

float

要素を左または右に寄せする。left, right, noneなどを指定する。
後続要素は反対側に回り込む。回り込みを解除するには後続要素のclear属性にleft, right, bothなどを指定する。
floatは、positionプロパティで static以外の値が指定されている要素には適用できない。

参考http://taneppa.net/float/

position

表示位置の計算方法を指定する。
position属性にrelative,absolute,center,page,fixedなどを指定した上で、 top、 bottom、left、right属性を適宜設定する。
staticがデフォルト値で、これを指定した場合はtopなどは無視される。

relative

staticを指定した場合の位置を基準として、相対位置を指定する。

absolute

親要素のうち、positionにstatic以外が指定されている要素を基準として位置を指定する。

fixed

ウィンドウを基準とした位置に表示。スクロールしても動かない。

重なり順

z-indexを指定しない場合、staticな要素は一番背面になる点に注意。

<div display="absolute">最背面にならない。staticの前に表示される</div>
<div display="static">最背面になってしまう</div>
<div display="absolute">最前面"</div>

参考:https://gist.github.com/retorillo/40647b9267ef2bbeefb5

センタリング

子要素をセンタリングする方法はあれこれある。
このサイトが参考になるhttps://www.granfairs.com/blog/staff/centering-by-css