CSSにできること―レイアウト概念編

CSSにできること第六弾。
今回は、これからWebサイトをレイアウトしていくにあたって必要になってくる概念や考え方を書いていきます。
前作：CSSにできること―レイアウト基礎の基礎編

CSSを使ってレイアウトをするにあたって、知っておいてほしい概念が２つほどあります。

まずは、divタグの紹介です。
divというのは、HTMLで用いるタグなのですが、h1（見出し1）やp（段落）のように、明確に文章の構造を指し示すものではありません。
div=division=区別する、つまり、コンテンツ同士を区分けするためのタグです。

たとえばこのブログを例に説明すると、

一番上のタイトル画像がある部分がひとつのdiv、
左のプロフィールなどが表示されている部分がdiv、
真ん中のこの文章が表示されている部分がdiv、
右のカレンダーなどが表示されている部分がdiv、
一番下のコピーライトが表示されている部分がdiv。

というふうに、コンテンツを５つのdivで区切って作られています。

どうして区切るのかというと、通常、CSSがない状態のHTMLはこのサイトのように、横に段組を組むことができません。
これを、CSSによってdivに幅や高さ、配置などを指定することによって、横の３段組レイアウトを実現しているのです。
この段組を実現するため、この３つの部分をそれぞれ違うボックスとして囲む必要があります。
この囲むためのタグがdivなのです。

Webサイトをレイアウトしていくにあたって、このdivタグはとっても重要な要素になってきます。

この「Web制作の基礎」関連の記事では、ではこれからレイアウトについて書く際に、「ボックス」という言葉を使いますが、ボックスとは、このdivタグを用いて囲んだ部分を指すと思ってください。

そして、もうひとつ大事なのはブロック要素、インライン要素という概念です。

HTMLには、ブロック要素とインライン要素という二つの要素があります。
ブロック要素の中には、ブロック要素、インライン要素、データ（文字）の３つが入りますが、
インライン要素にはインライン要素、データ（文字）のみ入れることができます。

これ、説明が非常に難しいんですが、ブロック要素はダンボール箱、インライン要素はビニール袋、データはおもちゃという感じで考えてみてください。

ダンボールボール箱には、小さいダンボール箱を入れることができますし、ビニール袋に入ったおもちゃも入ります。大きい人形だったら袋に入れずそのままダンボールに入れることもあるかもしれません。

ビニール袋にはおもちゃや人形を入れるかもしれませんが、ダンボール箱は入りませんし、いれませんよね。

と、こんなぐあいです。

この概念を使用することが多いのは、ボタンを作るときです。

aタグはインライン要素なので、幅と高さを指定しても、文字の部分しかリンクの範囲になりません。
ここがリンクです。

しかし、これをCSSでブロック要素として表示することが可能なので、
ここがリンクです。
このようにボタンっぽくすることができます。

以上、レイアウト概念編でした。
次回は、フロートレイアウト編です。

CSSにできること―レイアウト基礎の基礎編

CSSにできること第五弾。今回は、幅や高さ、余白といったレイアウトに関する技術の基礎の基礎を書いていきます。
前作：CSSにできること―リスト・テーブル編

１．幅、高さを指定する。

HTMLでは、width属性、heightを使って幅・高さを指定していました。
CSSでは、要素の幅や高さを指定することができます。widthプロパティで幅、heightプロパティで高さをそれぞれ指定できます。

また、
max-width max-height というプロパティでコンテンツの最大幅、最大高さを、
min-width min-height では最小幅、最小高さを指定することができます。
ただし、IE6以下ではこれらのプロパティが使えないので、まだまだ利用は避けた方がいいプロパティです。

２．余白を指定する。

余白には、２つの種類があります。外側につける余白と、内側につける余白です。
外側の余白をmargin（マージン）、内側の余白をpadding（パディング）で指定します。
ちなみに、marginは余白、paddingは荷物の梱包材のような、箱と中身の間を埋めるものを指すようです。

この２つをどう使い分けるか、というところですが・・・。
width（幅）を指定している場合には、paddingを使わないのが今のところ無難です。
（これは、IE6以下のブラウザによるバグを回避するためです）
私が意識しているのはこのくらいです。

３．コンテンツがはみ出たときの対処

要素にwidth（幅）やheight（高さ）を指定していた場合、その中に入る文章や画像などの中のコンテンツの量が収まりきらない場合、overflowというプロパティではみ出たぶんを表示したり、しなかったりすることができます。
overflow: hidden;ではみ出した文を隠し、overflow: scroll;ではインラインフレームのように、スクロールして表示できます。

４．ボーダーをつける

borderというプロパティでは線をつけることが可能です。
上下左右それぞれの指定もできますし、点線や破線、二重線といった線の指定、色、太さの指定も可能です。

ボーダーがwidthで指定した値に含まれるブラウザと含まれないブラウザがあるため、注意が必要です。
基本的に、幅や高さを厳密に指定したい場合はborderプロパティは使わないほうがいいと思います。

以上、レイアウト基礎の基礎編でした。
レイアウトの概念編へ続きます。

CSSにできること―リスト・テーブル編

CSSにできること第四弾。今回はリストとテーブルに関する装飾です。
前作：CSSにできること―背景編

CSSでは、HTMLでつくるリスト（ul系タグ）と、テーブル（tableタグ）に関する装飾や、見栄えを調節することが可能です。

１．リスト

リストのマーカーを変える

HTMLでは、リストタグを使うと、項目の左に●が現れます。これをマーカーというのですが、list-style-typeでこの形を四角や白丸に変えることができます。
また、このマーカーを消すこともできます。（Webサイトではこのマーカーを消して、ナビゲーションボタンを作ることがほとんどです）

また、list-style-imageを指定すると●や■などのマーカーを画像にすることができます。
ただし、このプロパティでリストのマーカーを画像にすると、微妙にマーカーと文章がずれてしまうため、現実的にはリストのマーカーを非表示にし、liタグの背景に画像を指定するのが一般的です。

２．テーブル

空のセルのボーダーを表示する

テーブルタグにおいては、trやtdのタグの中に何も文字が入っていないと、その部分だけ枠線が表示されません。これをempty-cellsというプロパティで表示することができます。
表示させたい場合は、テーブルタグに対してempty-cells: show;と指定します。

セル間の幅を指定する。

HTMLではcellspacingという属性で、セルとセルの間（tdタグとtdタグの間）の間隔を調整していましたが、CSSではborder-spacingというプロパティでその間隔を指定することができます。

テーブルのボーダーを1本にする

テーブルは基本、

たとえばこれは	テーブルの線が
分離している	例です。

このように線が二重になっています。

CSSのborder-collapseというプロパティに対し、collapseという値を指定すると、下記のように枠線を1本にまとめることができます。

そして、これは	テーブルの線が
結合している	例です。

やっていることとしては、ボーダー間の空間を分けるか、閉じるかを指定しています。

ちなみに、cellpaddingは、次回説明するプロパティpaddingで指定することになります。

以上、リスト・テーブル編でした。
レイアウト基礎の基礎編へ続きます。

CSSにできること―背景編

CSSにできること第三弾。今回は背景色、背景画像編です。
前作：CSSにできること―文章編

背景色や背景画像の指定は、HTMLでもできた部分が多いですが、より細かく指定をすることが可能になっています。

１．背景色をつける。

HTMLにおいては、bgcolorという属性で背景色をつけることができます。
この属性は、bodyとtableにしか対応していないので、HTMLでは、bodyとtable,tr,td系のタグにしか色をつけられないことになります。（だからテーブルレイアウトが主流になったんですね。と納得。）

CSSでは、background-colorで背景色をつけることが可能です。bodyやtable系のタグ以外にも背景画像をつけることが可能です。

２．背景画像をつける。

HTMLでは背景画像はbackgroundという属性でつけることができますが、この属性はbody専用のものなので、背景はページ全体にしかつけられない仕様になっています。
CSSではbackground-imageというプロパティでどこでも背景画像をつけることが可能です。

背景画像をつけた例。

３．背景画像の繰返し

背景が画像の場合、画像の表示方法を指定するbackground-repeatというプロパティがあります。値をrepeatにすると、画像が全体にしきつめられます。
また、横方向、縦方向のみに画像を繰り返すこともできます。x-repeatだとx軸方向（横）、y-repeatだとy方向（縦）のみの繰返しになります。no-repeatだと繰返しなしになります。
ここでは、background-repeat: none;を指定しています。

４．背景画像の位置固定

画像の表示位置を指定するには、background-positionを使います。

また、background-attachmentというプロパティでは、画面をスクロールしても画像が動かないように指定することも可能です。

以上、画像でできることの紹介でした。
テーブル・リスト編へ続きます。

CSSにできること―文章編

CSSにできること第二弾。今回は文章レイアウト編です。
前作：CSSにできること―文字（フォント）編

文章レイアウトに関することは、フォント系に比べてCSSにしかできない事が多いと思います。

１．文字同士の間隔を変更

word-spacingというプロパティでは、word、つまり単語同士の間隔を調整できる。英文では単語同士を（半角）スペースで区切るため、この半角スペースの幅を調整する機能と言ってもいいと思う。日本語では単語同士をスペースで区切ることがないので、効果はない。が、日本語でも、単語同士をスペースで区切ればword-spacingが機能する。

また、文字間を調整するletter-spacingというものもある。これは、英単語1文字、漢字1文字など、文字間を調整できる。

さらにフォント編でも述べたline-heightプロパティでは、行間の調整をすることができます。

２．文章のインデント（字下げ）

書籍では、段落の一番最初に1文字分マスが空き、そのあとに文章が続いていきます。この文章のように字下げを行うには、text-indentというプロパティを使用します。text-indentで指定した分だけ字下げされて文章が表示されます。

３．文章の配置

HTMLでは、align属性あたりで指定をしていた、文章の右寄せ、左寄せ、中央寄せの指定は、CSSではtext-alignで指定できる。値もHTMLとほぼ同じで、left、right、centerが指定できます。

 

４．文章の装飾

text-decorationというプロパティでは、テキストに関する装飾を指定できる。HTMLではuタグで指定していたアンダーライン、sタグで指定していた取り消し線などが指定できるようになっています。
ちなみに、この取り消し線を装飾ではなく、文章構造的な意味として「訂正前のもの」といったことを示したい場合は、CSSではなく、HTMLのdelタグを使ってください。

デフォルトスタイルシートでは、aタグに下線が表示されていますが、test-decorationの値にnoneを指定すると、下線を消すこともできます。

文章編は以上です。
次回は背景編です。