CSSにできること―ポジションレイアウト編

CSSにできること第八弾。
今回は、画面に対し、相対的、絶対的にコンテンツを配置していく、ポジションレイアウト（positionプロパティを使うので勝手に名付けました。正式名称ではありません）について書いていきます。
前作：CSSにできること―フロートレイアウト編

前回のフロートレイアウトは、右に回りこみ、左に回りこみ、という方向性の指定ですが、
positionプロパティを使うと、画面に対して固定の配置ができるようになります。

こちらの配置に関しても、floatと同様、widthとheightを指定する必要があります。
さらに、positionプロパティを指定したボックスには、「重なり」という概念が出てきます。
z-indexというプロパティによって、そのコンテンツが前景になるのか、背景になるのかを指定する必要があります。

１．相対配置

positionに対してrelativeという値を指定します。
画面に対し、相対的に配置する方法です。

この後で述べる絶対配置、固定配置をする際に、配置の基準となるボックスが必要になります。そこで、relativeという値を指定することによって、基準であるということを示すことができます。
（これ以外で私はrelativeを使ったことがありません・・・）

２．絶対配置

positionに対してabsoluteという値を指定します。
画面に対し、絶対的に配置する方法です。

上から何px、右から何px、という風に指定します。
この、上から、右から、という基準は、absoluteが指定されている部分を囲んでいるボックス、またはposition: relative;が指定されているボックスを指します。
top: 10px; left: 20px;だと、上から10px、右から20pxの部分に配置をする、という指定になります。
topとbottomからひとつ、leftとrightからひとつ選んで指定します。

３．固定配置

positionに対してfixedという値を指定します。
画面に対し、固定配置する方法です。

場所の指定方法は絶対配置と同じですが、fixedでは、画面に対して固定されます。
スクロールしても位置がかわらないので、サイドのメニュー部分の表示に使われることが多いです。
ただし、IE6以下には対応していませんので、現時点ではあまり実用的ではありません。

positionプロパティを使う際に共通に言えることですが、
positionにabsolute、fixedを使用したボックスは、他の要素とは別の次元といいますか、別のレイヤーに配置されます。（この、レイヤーというのがz-indexで指定する値です。）

高さを指定していない通常のボックスでは、文章量が多くなった場合、自動的にボックスが長くなり、その下のボックスも自動的に下に下がります。
しかし、absolute、fixedを使用したボックスは、文章量が多くなった場合、その下のボックスの上に重なるようにして表示されます。

文章ではすごく説明しづらいのですが、言いたいことは、
ボックスの中身が固定でない場合には、ポジションレイアウトをしないほうがいいということです。

CSSにできること―フロートレイアウト編

CSSにできること第七弾。
今回は、floatプロパティを用いて、回り込みによってWebのレイアウトを調整する方法を書いていきます。
前作：CSSにできること―レイアウト概念編

HTMLには、imgタグの属性としてalignという値がありました。これは、画像に文章を回り込ませたいときに指定するものです。
CSSでは、float（フロート）というプロパティを使って、画像だけでなく、文章やdivボックスにも回り込みを指定することができます。

floatというプロパティは、その回り込みを指定するプロパティです。
floatのプロパティにleftを使うと、指定したボックスが左に行き、次の要素が右側に配置されます。
floatのプロパティにrightを使うと、指定したボックスが右に行き、次の要素が左側に配置されます。
そして、floatを解除したいときはclearプロパティにleftやrightなど、解除したい方向を指定します。

ややこしくて私もときどき間違えますが、慣れです。

１．文章内の回りこみ

雑誌のように、画像と文章をうまく回り込ませてレイアウトをしたい場合も、このfloatプロパティを用います。
たいていはimgタグ（画像）の方にfloatを用いることが多いです。

画像と文章の回りこみについてはあまり注意点はないのですが、問題はサイトのレイアウトに使う場合です。

２．段組レイアウト

floatを使えば、このサイトのような横に3列並ぶようなサイトも作ることができます。
（厳密に言うと、このブログはこの手法では作られていないのですが。）

ボックス1
float: left; を指定しています。

ボックス2
float: right; を指定しています。

ボックス3
float: right; を指定しています。

ボックス4
clear: both（floatのleftもrightも両方解除）; を指定しています。

まず、ボックス1はleftの指定があるので、左側に行きます。
次に、ボックス2はボックス1の右側に回りこみ、さらにrightの指定がしてあるので、一番右に行きます。
そして、ボックス3はボックス2の左側に行き、rightが指定してあるのでボックス2の右に行きます。

floatプロパティを使う際の注意としては、
まず、幅を指定すること。floatを指定したときは、必ずwidthも指定してください。

また、floatを指定していても、横に並べるボックスの幅の合計が、その外側のボックスの幅よりも大きいと、横に並ばずに下に押し出されてしまいます。
このため、前々回、widthとpaddingの微妙な関係について書きましたが、
floatを使うコンテンツにもpaddingを指定しないほうが無難です。

この他にも、ブラウザ間の表示の違いが多々あるのがフロートによるレイアウトで、
これがテーブルレイアウトを普及させてしまった要因なんだろうなといつも納得します。
（もともとサイトの段組レイアウトに使われる要素ではなかった、とも考えられますが。）

この点の微調整が、floatの難しいところです。

以上、フロートレイアウト編でした。
次回は、ポジションレイアウト編です。

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で指定することになります。

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