REDLINE MAGAZINE | [B]RLMの作り方・その４

[B]RLMの作り方・その４

すっかり放置していてすみません。このサイトの作り方シリーズの続きです。
今回はこの右側のボックスについて。右側のボックスのid名は「#main」としています。先日の記事で書いた#leftboxと合わせて#containerというdivで括ってまとめています。

<div id="container">
<div id="leftbox">
左側のロゴとかメニューとかの部分(先日作った部分です)
<!--/#leftbox --></div>
<div id="main">
記事タイトル、本文などの部分
<!--/#main --></div>
<!--/#container --></div>

#main部分の背景画像の巻

この部分で使っている背景画像ですが、まずこのボックスの上部の方にだけグレーのグラデーションが入っているのが分かると思います。(ディスプレイによったら見えないかもしれないけど、見えることにしてっ)で、その部分で使ってる画像はこれ。
>>#mainの背景画像

横に伸びた赤いラインは薄く半透明で残したかったものの、透過画像を使ってるわけではないので、その画像の中に入れて一緒に書き出しています。また右側に少しだけボックスのさらに背景がちょろっと残ってるのが分かると思いますが、書き出しミスでもなんでもないです。#containerの背景画像との重なりでうまく背景の画像が繋がらなくなるのを回避するために入れています。それについては後述します。

この#mainに対してのcssの指定は以下の通り。

#main{
	float:right;
	width:560px;
	background:url(xxx.jpg) no-repeat;
	}

シンプルなので説明する必要もないかとは思いますが、上の方にも書いたとおり、floatで右側へ浮かして寄せる、幅を指定、背景画像を指定。これだけです。

#container部分の背景画像の巻

では#containerの背景画像はどんなんかというとコレです。
>>#containerの背景画像

この#mainのボックスの左右にはグラデーションが入ってるのですが、その画像の正体は#containerの背景画像だったというわけです。上記の画像を縦方向にリピートさせて#mainボックスの左右のグラデーション枠としています。左右フロートのレイアウトで親ボックスに背景画像を指定するのはよく使われる手なので特に珍しい事ではないんですが、各ボックスに背景を指定して重なりを工夫できるのもcssの楽しい所だと思います。

では#containerのcss部分です。ここは左右のフロートを囲っている親ボックスであり、背景画像を入れているのでclearfixを使っています。

#container{
	width:1019px;
	background:url(xxx.jpg) repeat-y;
	padding:0px 0px 55px 0px;
	}

#container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#container {display: inline-table;}

/* Hides from IE-mac \*/
* html #container {height: 1%;}
#container {display: block;}
/* End hide from IE-mac */

すごく長いソースのように見えますが、確認するのは上記ソースの一番上の#container{}の部分だけでいいです。まず幅の指定、背景画像の指定、そしてpaddingの指定です。ここでpaddingの下側に55pxを確保している理由についてですが、それはまた今度書きます。#container:after以下はclearfixの部分なのですが、その説明はよくある話なので詳細はここでは割愛します。(「背景が伸びない」とか「高さが確保できない」とかそういうのの解決方法の1つです。)こちらのページが参考になります。
>>構造のマークアップなしでフロートをクリアする方法

サイトの中で複数箇所にclearfixを使用する場合は「.clearfix」というクラス名をそのまま使用してcssファイルに記述してもいいと思うのですが、今回このサイトではこの#container以外にclearfixを使う場所はないと判断したので、#containerに直接記述しています。直接記述するのではなく「.clearfix」というクラス名でその内容を用意する(cssファイルに記述する)場合は、

<div id="container" class="clearfix" >

こんな感じにすればOKです。クラス名にも確実に意味持たせたい方は別のクラス名にしても大丈夫。なんせ使いどころに間違いがなければ、何に指定するか、どこに指定するかは気にしなくて大丈夫。自分自身、実は以前こういう系の技って「本とかサイトに同じ事書いてあるから同じクラス名にしないといけない、同じ使い方しないといけない」とか思ってた部類の人間なんですが、別に中身の意味理解して使い方が分かってればどういじくっても大丈夫です。よく本やサイトで同じ記述で説明してあるのって単なる例で、そう書くのが一番分かりやすいからみんなそうしてるだけだって気づくのにかなり時間かかりましたが。

clearfixは多分よく使うので、覚えておいた方がいいと思います。覚えておくっていうか、何をするものなのかを上記サイトで確認しておけば必要になった時、困ったときに助かります。

ちょろっと部分の巻

上で書いた#mainの背景画像の右側のちょろっと部分がなかったらの続きです。ちょろっと部分がない場合、右の図のように意図どおりの見た目になりません。(#mainの背景画像丸ごと消したので上部のグレーのグラデーションも消えちゃってるけどそれはスルーで)まぁとりあえず、#containerの背景画像でカバーできない部分を#mainに背景画像を上からかぶせる事によってカバーしている感じです。

検索フォーム部分の巻

#mainの右上にある検索フォーム部分なんですが、以前に別の記事に書いたのでそちらを参考にしてください。ただ、フォームの見た目を変更する弊害もあったので、そちらも確認してみてくらさい。xhtmlソース、cssソース共に下記ページにおいてあります。

>>CSSで検索フォームの見た目を変更
>>検索フォーム続編：Safari だと酷すぎる

2007年05月11日 14:00 | Red | パーマリンク