要素並列が難しい場合は table を使って時間短縮 [IE10対応]

001

table タグは便利です。
Flexbox / float / inline-block / table-cell では困難な並列レイアウトを、容易に解決することができます。

HTMLコーディングは時間との勝負なので、上記4つで対応できそうにないときは、tableを使ってしまいましょう。ただ、「Google対策として問題ない」とは言い難いため、 積極的に使うことは避けたいですね。

目次

検証済みブラウザとOS

  • IE 10~
  • Firefox
  • Google Chrome
  • Windows 7

 

右揃えテキストと左揃えテキストのセンター配置

 

右揃えテキストと左揃えテキストブロックを複数並列(Flexboxを併用)

 

背景ありテキストブロックの天地中央揃え(Flexboxを併用)

 

連番と複数行テキストの天地中央揃え

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。