CSSレイアウトの基礎を学習するなら「CSSレイアウトを学ぶ」がわかりやすい

CSSの設定は、簡単なものから難しいものいろいろあります。

簡単なものといえば、文字色・背景色・サイズを変更したり、マージンやパディングあたりは比較的わかりやすいのではないでしょうか。

難しいものといえば、いろいろありますが「CSSによるレイアウト」なんかは学習したてのときは、「意味がわからない」なんて事もあるかもしれません。

そんな、CSSのレイアウト設定について紹介されているサイト「CSSレイアウトを学ぶ」がとてもわかりやすかったので紹介です。

photo by daniel julià lundgren

CSSレイアウトを学ぶとは

CSSレイアウトを学ぶは、ウェブサイトのレイアウトに関するCSSの基礎を学ぶのにとても適したサイトです。

元々は、Learn CSS LayoutというCSSレイアウトのチュートリアルサイトですが、日本語翻訳ページもあり、今回紹介するのはそれです。これが短いのに本当わかりやすい。

このサイトは、CSSセレクタやプロパティについて、多少の知識が必要なのは前提です。なので、CSSの書き方ぐらいは知っている必要はあります。

ただ、多少のCSSの知識があるなら、以下のようなレイアウトのことを理解するのにとても適したサイトだと思います。

このような、CSSを始めたばかりの頃は、つまずいてしまうようなところを、わずか19ページの中の短い文章で、とてもわかりやすく説明されています。

レイアウト経験者も

今回紹介するページは、レイアウトのエキスパートは得るものはないかもしれません。ただ、多少レイアウトの知識がある人も一読しておくと、何かしら発見があるかもしれません。

僕は恥ずかしながら、以下のようなことを今回知りました。

floatで画像を使用するとはみ出す問題の解決方法

floatで画像を使ったりして、文章量が少なかったりすると、以下のようになっちゃうのを、

ラッパー要素に以下のように書くだけで

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

次のように改善できるとか。

参考 CSS – clearfix hack

inline-blockの使いどころ

この方法だと、float後の要素でclearが必要なく、気持ち良い書き方です。

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

参考 CSS – inline-block

inline-blockで作るレイアウト

inline-blockでレイアウトが作れるという発想がなかった。

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

参考 CSS – inline-blockで作るレイアウト

div要素内にdiv要素を中央寄せするスマートな方法

これまで、テーブルを使った方法など、いろいろあったけど、これが最もスマートな書き方かも。（ベンダープレフィックスを無視して良くなるような数年後ならなおさら）

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

参考 CSS – flexbox

結構知らないことがありました；

まとめ

僕は、CSSに関する本を読むことがほとんどなかったので、無知だっただけなのかもしれませんが、こういった発見があるのは嬉しいです。

floatで画像がはみ出してしまうのなんか、やり方さえわかれば「なるほど、確かに」となるのですが、ボーダー再表示しなければ、目立たないところなので、そういうもんだと思っていました。また、要素の縦横中央寄せの方法を知れたのも収穫です。

とにかく、とてもわかりやすく解説してあるサイトなので、「CSSを勉強し出したけどもう少し深く知りたい」なんて方には、「CSSレイアウトを学ぶ」は、とてもおすすめです。