４．実際にページを作りましょう！ ４−１．スタイルシートについて
スタイルシート内で「 選択部 { 属性 : 値 } 」のような定義を行う際、選択部の文字列先頭に数字を使わないでください。
ホームページ作成ソフト内では意図したアクションが機能していますが、インターネットエクスプローラーなどのブラウザーは認識していません。
スタイルシートの利用例をご紹介するためにサンプルを用意しました。
このデザインの特徴
上のようなレイアウトでこの下にソースを貼り付けてありますので、ご自分のホームページ作成ソフトで新規HTMLとCSSを開き、コピー＆ペーストして実際に確認してみることもできます。
body {
font-size: 95%;
}
.left-menu {
float: left;
clear: right;
width: 9em;
background-color: #CCFFFF;
padding: 0.5em;
border: thin ridge #CCCCCC;
}
.right-contents {
float: right;
background-color: #FFFFCC;
padding: 0.5em;
border: thin solid #999999;
margin: 0.5em;
}
.center-contents {
border-left-width: thin;
border-left-style: dotted;
border-left-color: #666666;
margin-left: 10.5em;
padding: 0.5em;
background-color: #CCCCFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-top-color: #000000;
border-right-color: #006600;
border-bottom-color: #FF0000;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>スタイルシートの利用例１（誰でも作れるホームページ アフィリエイト対応版）</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<link href="examples_css/examples.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>★★★スタイルシートの利用例１★★★</p>
<div class="left-menu">
<p>左側のメニュー</p>
<ol>
<li>左メニュー１</li>
<li>左メニュー２</li>
<li>左メニュー３</li>
<li>左メニュー４</li>
<li>左メニュー５</li>
<li>左メニュー６</li>
<li>左メニュー７</li>
<li>左メニュー８</li>
<li>左メニュー９</li>
<li>左メニュー１０</li>
<li>左メニュー１１</li>
<li>左メニュー１２</li>
</ol>
</div>
<div class="right-contents">
<p>右側のメニュー</p>
<ol>
<li>右メニュー１</li>
<li>右メニュー２</li>
<li>右メニュー３</li>
</ol>
</div>
<div class="center-contents">
<p>中央コンテンツ</p>
<ol>
<li>左側のメニュー</li>
<p>左側のメニューは識別のために明るいグリーン色にしてあります。<br>
HTMLファイルでの記述位置は上から１段目ですが、Web表示での位置は横３つに分割された左側に表示されているはずです。<br>
また、左側のメニューの文字は中央コンテンツの範囲外へ回り込まないはずです。</p>
<li>右側メニュー</li>
<p>右側のメニューは識別のために薄い肌色にしてあります。<br>
HTMLファイルでの記述位置は上から２段目ですが、Web表示での位置は横３つに分割された右側に表示されているはずです。<br>
また、左側の中央コンテンツの文字がこの範囲外へ回り込んでいるはずです。</p>
<li>中央コンテンツ</li>
<p>この文字が配置されているフレームです。 中央コンテンツは識別のために薄青色にしてあります。<br>
HTMLファイルでの記述位置は上から３段目ですが、Web表示での位置は横３つに分割された中央に表示されているはずです。<br>
また、中央コンテンツの文字は右側メニューの範囲外へ回り込んでいるはずです。</p>
</ol>
</div>
</body>
</html>
スタイル２．ブログっぽいデザインの例
このページはヘッダー、左・中央・右コンテンツ、フッターの５つのブロックで構成しました。
また、ページの幅も一般的なブログ同様780ピクセルに固定し、左寄せしてあります。
このデザインの特徴
トップへ戻ります