CSS（つづき） - ee83126の日記

前回のつづきです。スタイルシートを眺めてみます。

スタイル定義の確認

「sidebar」のスタイル定義を確認したところ、以下のとおり。

.sidebar {
	/* 表示位置を指定（topとleftの指定方法を決定） */
	position: absolute;
	/* 上からの位置を指定 */
	top: 1em;
	/* 左からの位置を指定 */
	left: 0px;
	/* ボックスの横幅を指定 */
	width: 24%;
	/* ボックスの外部の余白幅を指定 */
	margin: 0px;
	/* ボックスの内部の余白幅を指定 */
	padding: 0px;
	/* 文字の左寄せ右寄せ、センタリングを指定 */
	text-align: left;
	/* ボックスの枠線プロパティの一括指定 */
	border: none;
}

「main」のスタイル定義を確認したところ、以下のとおり。

.main {
	/* ボックスの外部の余白幅を指定 */
	margin: 0px 0px 0px 26%;
	/* ボックスの内部の余白幅を指定 */
	padding: 0px;
}

プロパティ「position」がポイントになりそう。値「absolute」の意味を調べたところ、以下のとおり。

絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture

「sidebar」の親ボックスである「hatena-body」のスタイル定義を確認したところ、以下のとおり。

.hatena-body {
	/* 表示位置を指定（topとleftの指定方法を決定） */
	position: relative;
(snip)
}

つまり、「sidebar」は、親ボックスである「hatena-body」の左上が基準位置となっている。

スタイル定義の変更

「sidebar」のスタイル定義を以下のとおり、オーバーライドします。

.sidebar {
	/* ボックスの横幅を指定 */
	width: 24%;
	/* ボックスの外部の余白幅を指定 */
	margin: 0px 0px 0px 78%;
	/* ボックスの内部の余白幅を指定 */
	padding: 0px;
	/* 文字の左寄せ右寄せ、センタリングを指定 */
	text-align: left;
	/* ボックスの枠線プロパティの一括指定 */
	border: none;
}

「main」のスタイル定義を以下のとおり、オーバーライドします。

.main {
	/* 表示位置を指定（topとleftの指定方法を決定） */
	position: absolute;
	/* 上からの位置を指定 */
	top: 1em;
	/* 左からの位置を指定 */
	left: 0px;
	/* ボックスの横幅を指定 */
	width: 76%;
	/* ボックスの外部の余白幅を指定 */
	margin: 0px;
	/* ボックスの内部の余白幅を指定 */
	padding: 0px;
}

設定の仕方は簡単。管理ツールトップ > 詳細デザイン設定で、スタイルシートのテキストエリアに貼り付けるだけ。以下のとおり反映されるので、上から順番にブラウザが解釈してくれる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

(snip)
<link rel="stylesheet" href="/css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="/css/headerstyle_wh.css" type="text/css" media="all">
<link rel="stylesheet" href="/theme/memo/memo.css" type="text/css" media="all">

(snip)
<style type="text/css">
<!-- 
.sidebar {
	/* ボックスの横幅を指定 */  
	width: 24%;
	/* ボックスの外部の余白幅を指定 */  
	margin: 0px 0px 0px 78%;
	/* ボックスの内部の余白幅を指定 */  
	padding: 0px;
	/* 文字の左寄せ右寄せ、センタリングを指定 */  
	text-align: left;
	/* ボックスの枠線プロパティの一括指定 */  
	border: none;
}
.main {
	/* 表示位置を指定（topとleftの指定方法を決定） */  
	position: absolute;
	/* 上からの位置を指定 */  
	top: 1em;
	/* 左からの位置を指定 */  
	left: 0px;
	/* ボックスの横幅を指定 */  
	width: 76%;
	/* ボックスの外部の余白幅を指定 */  
	margin: 0px;
	/* ボックスの内部の余白幅を指定 */  
	padding: 0px;
}
-->
</style>
(snip)

レイアウト反映確認

ダラダラ書いてしまった上にいまいちだ。途中でなんとなく気付いてたけどね。しばらくしたら元に戻そう。