枠と背景を付けてみよう

あらゆるサイトは全て四角、箱でできています。
例えば、次のキャプチャは2014年3月26日のyahoo!japanです。(クリックして原寸大)

見ての通り、箱だらけです。
箱を制したものがhtmlを制するといっても過言じゃないと私は信じています。
イイ感じに装飾した箱をイイ感じに並べればもうそれでOKなんです。
上手く並べるのがまた大変なのですが……

まずは箱から、そして枠へ

とりあえずは箱を1つ用意しましょう。

サンプル

<div>は、オールマイティな何でもない箱です。特に用途は決まっていません。箱です。
でも、見ての通り何も表示されていませんね。(見出しの「サンプル」しかなくてびっくりですが、いちおう見出しの下にdiv君はいます)なぜなら中身がなければ大きさや色の設定もないからです。
まずは枠を付けてみましょう。箱をデザインするので、開くのはcssですね。

/*まとめて設定する方法*/
.box{
	border:1px solid black;
}

/*1つ1つ設定する方法*/
.box{
	border-width:1px;
	border-style:solid;
	border-color:black;
}
サンプル

「.box」というアイコトバを用意して使ってみました。枠の設定はborderが全て請け負ってくれます。1pxは太さ、solid(実線)は線の種類、blackは色です。「まとめて」のように全部borderの所に書いてもいいし、「1つ1つ」のように専門の人(border-width、border-style、border-color)に頼むのもありです。好きな方で。

というわけで枠を付けたので、箱が目で見えるようになりました。(繰り返しますが、枠を設定する前も目に見えないだけで一応箱は存在しています)
ですがなんだか線みたいですね。中身もないし縦幅の設定もないので、今箱はぺしゃんこの状態です。まずは中身を入れて、中身が入れば入るほど箱の縦の長さが伸びるのを確かめてみましょう。

サンプル

うんと長い文章を入力してみたり、たくさん改行したりすると、どんどん箱が縦に伸びていくのが分かると思います。
逆に、何も入力しないと箱はぺしゃんこですね。

ブログやニュースは記事の長さが不定なので、無理に縦の長さを決めるよりは、敢えて決めないで勝手に縦に伸びるのに任せた方がよさそうです。
ですが、長さを決めたいときもあります。しかも、何よりこの箱というやつ、横幅は伸びる所まで伸びてしまいます。あんまり横に長いとだらしないですね。
なので、ちょっと縦横の長さを決めてみましょう。

.box600{
	border:1px solid black;
	width:600px;
	height:100px;
}

.box350{
	border:1px solid black;
	width:350px;
	height:100px;
}
box600の横幅は600px!
box350の横幅は350px!
サンプル
box600の横幅は600px!
box350の横幅は350px!

横幅はwidthに、高さはheightに設定してもらいます。今度は中身が少ないのにちゃんと言った分だけの大きさになってくれました。
なお、高さに対して中身が多すぎるとその分がはみ出てしまうので、大きさを決めるときはしっかり計算をしましょう。上の例では箱がでかすぎて横にはみ出ていますね。
「最低限の高さは欲しい!」「これ以上は大きくならないで!」という人には最小値を指定するmin-heightや最大値を指定するmax-heightが用意されています。また、overflow:scroll;を設定しスクロールバーで指定した大きさの箱に収める方法もあります。

ちなみに、枠の線の種類はいろいろあり、頑張れば画像で枠も作れます。以下のサイトさんに色々まとまってます。画像は結構難しいので無理して使わない方がいいかなというのが個人的印象ですが。Internet Explorerだと見れないし。
border-imageの数値設定がイマイチわからんという人はhttp://border-image.com/を使って色々いじくってみるといいかも。
border-スタイルシートリファレンス
border-image-CSS3リファレンス
そういえば、過去にはtableタグと画像で装飾枠を表現していたこともありますが、tableはあくまで表であって枠を作る物じゃないです……

背景をつけてみよう

枠だけではつまらないので、背景を付けてみます。ちなみに、背景が何もない場合は透明ということで、下に敷いてあるものがまるみえになります。

サンプル
背景が
なにも
設定されて
いないよ

まずは簡単な例として、単色の背景を設定してみます。
背景の設定はbackgroundが一手に引き受けてくれていますが、色の設定ならばbackground-colorでもOKです。

/*backgroundで*/
.bg{
	background:#ffffcc;
}

/*background-colorで*/
.bgcolor{
	background-color:#ccffff;
}

/*borderと一緒に*/
.bdbg{
	border:1px dotted #000000;
	background:#ffccff;
}
backgroundを設定したよ
ちなみに#FFFFCCはうすいきいろだよ
background-colorを設定したよ
#CCFFFFだとうすめのみずいろ
backgroundの他にborderも設定したよ
#FFCCFFはうすめのピンクいろ、dottedはドットの枠にするよ
サンプル
backgroundを設定したよ
ちなみに#FFFFCCはうすいきいろだよ
background-colorを設定したよ
#CCFFFFだとうすめのみずいろ
backgroundの他にborderも設定したよ
#FFCCFFはうすめのピンクいろ、dottedはドットの枠にするよ

なんか付箋っぽいいろだなあ。ともかく、背景を設定したので地の色がそれぞれ黄色・水色・ピンクになりました。

単色を設定するほかに、画像を敷き詰めることもできます。今回は背景画像をWEBデザイナーが作った超シンプル素材集 | WEB素材 ボタン 背景画像 矢印アイコンさんから借りまして……
コイツをつかわせていただきます。

画像を扱ってくれるのは、背景関係なら何でもOKのbackgroundくんか、background-imageくんです。
url(画像ファイル名)と書くことで画像を指定できます。なお、この画像ファイル名はどのディレクトリ(フォルダ)に入れたかで変わってしまいます。わからねえ!という人は、今扱っているhtml・cssと同じところに入れておきましょう。それならば単純に画像ファイル名を入れるだけでOKです。

.bgimage1{
	background-image:url(bg097_05.gif);
	width:250px;
	height:150px;
	border:2px solid #000000; /*太めの枠にしてみました*/
}
.bgimage2{
	background:url(bg097_05.gif);
	width:50px;
	height:30px;
	border:1px solid #0000ff; /*青色の枠にしてみました*/
}
おおきい
ちいさい
サンプル
おおきい
ちいさい

この縞模様の画像は四方60pxです。それよりも箱が大きいと、画像がタイルのように敷き詰められます。なので敷き詰めるときは上手く上下左右で柄が合うように柄合わせをしなくては汚くなってしまいます。
一方、小さい箱だと背景画像の一部分しか表示されません。例のようなパターン柄ならともかく、イラストとかが一部分しか表示されないと大変です。

では、またまた画像を借りまして。商用利用OK&無料の写真・フリー素材を集めました!総合素材サイト|ソザイングさん(画像投稿者はzaihonyaさん)の画像です。元のは大きかったのでちょっと小さくしてあります。

177px×154pxサイズの画像なのですが、これをさっきみたいに設定すると敷き詰められてしまいます。

.bgflower{
	background:url(hana3-400x360.gif);
	height:250px;
	border:1px solid #000000;
}
あいうえおかきくけこさしすせそたちつてとなにぬねの~~
サンプル
あいうえおかきくけこさしすせそたちつてとなにぬねの~~

ヤバイっすね。こんなにいらないっすね。幸い、「繰り返さない」という設定が出来るのでやってみましょう。
繰り返すかどうかの設定は背景なら何でもござれbackgroundか、background-repeatがやってくれます。ここでは全く繰り返さない、というのをやってみましょう。no-repeatだ!とbackgroundかbackground-repeatに言ってやります。

/*background-imageとrepeat利用*/
.bgflowernorpt1{
	background-image:url(hana3-400x360.gif);
	background-repeat:no-repeat;
	height:250px;
	border:1px solid #000000;
}

/*backgroundに全部お任せ*/
.bgflowernorpt2{
	background:url(hana3-400x360.gif) no-repeat;
	height:250px;
	border:1px solid #000000;
}

画像が大きいので2のほうだけ表示させておきます……結果は一緒です。

あいうえおかきくけこさしすせそたちつてとなにぬねの~~
サンプル
あいうえおかきくけこさしすせそたちつてとなにぬねの~~

ちなみに、横方向だけ、縦方向だけ繰り返すというのもあります。それぞれrepeat-x、repeat-yと言ってやるとやってくれます。
ネット上で配布されているフリーの素材にも、横に敷き詰めるタイプのものと、縦に敷き詰めるタイプのものが一部見られますね。
no-repeatはrepeatの前にnoがついて、repeat-x,yは後にxやyがつくの、ややこしくねえ?

さて、さっきの「繰り返さない」例、なんかいまいちですね。左上に居座られても困ります。
なので、ちょいといじくってやりましょう。background-positionというのがあって、どこに画像を表示するのかを決めることが出来ます。一番簡単な設定方法は「top」「bottom」「left」「right」です。下の例では右下に表示させるために「bottom right」と記述しています。
がんばればもっと細かい設定もできるようです。(background-position-スタイルシートリファレンスさんを参考にどうぞ) 厳密には画像の表示開始位置指定のようですね。

.flowerbox{
	min-height:154px; /*背景画像の縦サイズが154pxなのでmin-heightで箱の縦サイズの最小値を154pxに指定*/
	border:1px dashed #000000;
	background-color:#fcfefc;
	background-image:url(hana3-400x360.gif);
	background-repeat:no-repeat;
	background-position:bottom right;
}
あいうえおかきくけこさしすせそたちつてとなにぬねの~~

これだと、中身は縦に長くないので、箱は画像をちゃんと表示させるのに必要な最低限の高さ(154px)になっています。

サンプル
あいうえおかきくけこさしすせそたちつてとなにぬねの~~

中身が多いと、154pxよりも高い箱になります。










こ~~
サンプル









こ~~

どちらの例でも、設定どおり「繰り返さない(1枚だけ背景画像が敷かれる)」「右下に設置」が守られていますね。それから、背景色として#fcfefcが設定されています。もしも置く画像の背景に色がついている場合は箱の背景もその色にしてやればOKなのです。青背景の画像を敷くなら箱の背景も青!ってね。
(ただ、背景の複数指定は書く順番を間違えると大変なことになる(他の画像の下に埋もれて表示されなくなる)ので、無理しないであきらめるか、さもなくばぐぐってください。)

どうでしょうか。ただの箱ですが、ちょっと枠と背景色、それにアクセントに画像をちょいと載せてやるだけでも大分違ってくると思います。
私のセンスではこれが限界なのであとはがんばってくれたまえ。

前回のwebページっぽくしてみようの記事部分を上の箱にぶちこむとこうなります。

サンプル

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

20xx (c)○○大学△△学園祭 All rights reserved.
tel: 0xx-xxx-xxxx fax: 0yy-yyy-yyyy

背景関係でいうとあとはbackground-attachment(スクロールしても背景が流れない)があるけど、サンプル作成がめんどくさいからいいや。気が向いたら書きます