言語を学ぶ

HTML&CSSでつくるグリッドレイアウト

HTML&CSSでつくるグリッドレイアウト

チャプター:4

このブックでは、HTMLとCSSを使用してグリッドレイアウトを作成します。グリッドレイアウトとは、いくつものコンテンツがタイルのように敷き詰められたようなレイアウトの事を指します。このブックを通して実際にレイアウトを作成していく中で、実際の開発現場で利用される横並びレイアウトの方法、グリッドのつくり方を学ぶことが可能です。

1.グリッドレイアウトの基となるHTMLをつくろう

このチャプターではHTMLを用いて、グリッドレイアウトの基となるHTMLの構造を作成していきます。

26P

2.クラス名"contents"を持つ要素を装飾しよう

このチャプターでは、前回までのチャプターで作成した要素のうち、全てのグリッドを囲むための要素(「contents」というクラス名を持つ要素)に対して、実際にCSSを用いて装飾を行います。

28P

3.クラス名「box」を持つ要素を装飾してみよう

このチャプターでは、前回までのチャプターで作成した要素のうち、個々のグリッド要素(「box」というクラス名を持つ要素)に対して、実際にCSSを用いて装飾を行います。

29P

4.各要素にスタイルを適用しよう

このチャプターでは、前回までのチャプターで作成したグリッドレイアウトの問題点を修正していきます。このチャプターを通して グリッドレイアウトをつくる時に気をつけるべきことを学ぶことができます。

26P