CSSレイアウトを学ぶ

このサイトでは、ウェブサイトのレイアウトに関するCSSの基礎を学ぶことができる。

CSSのセレクタ/プロパティ/値について、ある程度の知識がある事を前提として書かれている。ところで、このサイトを見ている人の中には、既に少なからずレイアウトの知識がある人もいるだろう。そんな君でも、何か新しい発見があるかもしれない。HTMLやCSSについて初級レベルから学びたい君は、チュートリアルが参考になる。そうでなければ、次に君がプロジェクトに携わるとき、その苛立ちを少しでも我々が軽減できるかどうか、このサイトを見てほしい。

No Layout (レイアウト無し)

ウェブサイトなんて、文章や画像などのコンテンツをブラウザの横幅一杯引き延ばし、縦１列に並べるだけで十分だ。だから、レイアウトなんて必要ない。そう君は考えるかもしれない。でも、ブラウザの幅を大きくしているユーザが君のサイトを見たらどう思うだろう？読むのが大変だと不平を言うかもしれない。何せ、次の行を読もうとするたびに、目線を右端から左端に戻さなくてはならないのだから。君のブラウザの横幅を広げて、このページを見てくれ。そうすれば、私の言いたい事が分かるだろう。

さて。この問題の前に、CSSでレイアウトを作るのに重要となる、displayプロパティについて見ていきたい。