4. スタイルシート

スタイルシートはHTMLを補完してホームページを見易くするための記述言語です。単にHTMLタグで文章のような記述からスタイルシートで見た目を変える ことができるので次の例のような使われ方があります。またスタイルシートの定義の仕方は次の三種類があります。

A：HTMLのタグの要素として記述する。　必要なタグごとに<div　style="スタイルの定義.">
B：HTMLのタグに対する指定要素として最初にまとめて記述する。　<style>tag | #id | .class {スタイルの定義} 繰り返し </style>
C：上記を切り離して別ファイルにし最初にそのファイルを読み込む。<link rel="stylesheet" href="url/stylefile.css" type="text/css">

例１　文字の修飾
<span class="samplelogo">HTML入門</span>
spanタグにスタイル属性samplelogoを定義し、呼び出す
 <style><--
.samplelogo {
font-size: 32px; font-style:italic;background-color: green;
color: white;
border-color: black;border-style: solid; border-width: 5px;
padding: 20px; border-radius: 50%;
}
--></style>
 属性を与えられたSPANタグでロゴ 風に表示  タグに属性を与えるスタイル定義

右の定義をあらかじめ<body>の前で宣言しておきます。それで文字の背景色と文字形式を指定しています。


例２　自由形式の配列リスト（ドロップダウンメニュー）
HTMLのタグ記述は以下のようにulとliタグで行 います。アンカー<a>入れておけば他ページにリンクが可能です。
<ul id="dropmenu">
<li><a href="">ああああ</a><ul>
　<li><a href="" target="_blank">かかかか</a></li>
　<li><a href="" target="_blank">きききき</a></li>
</ul></li>
<li><a href="">いいいい</a><ul>
　<li><a href="" target="_blank">ささささ</a></li>
　<li><a href="" target="_blank">しししし</a></li>
　<li><a href="" target="_blank">すすすす</a></li>
</ul></li>
<li><a href="">うううう</a><ul>
　<li><a href="" target="_blank">たたたた</a></li>
　<li><a href="" target="_blank">ちちちち</a></li>
</ul></li>
</ul>
 <style><!--
#dropmenu{ /* メインメニュ_全体 */
list-style-type: none; width: 200px; height: 40px;padding: 0; background: skyblue;}
#dropmenu li{ /* メインメニュ_項目*/
position: relative; width: 66px; /* menu_width/3 */float: left; text-align: center;}
#dropmenu li a{ /*メインメニュ_リンク */
display: block; margin: 0;padding: 15px 0 11px; /* top,right,bottom */color: black;font-size: 14px;font-weight: bold;text-decoration: none; }
#dropmenu li ul{ /* サブメニュ_枠 */
list-style: none; position: absolute;top: 100%; /* just_under_main_menu */left: 0;}
#dropmenu li ul li{ /*サブメニュ_項目 */
overflow: hidden; /* 初期 */width: 200%; /*二倍枠 */height: 0; color: black;}
#dropmenu li ul li a{ /サブメニュ_リンク */
padding: 13px 15px;background: pink;text-align: left;font-size: 12px;font-weight: normal;}
#dropmenu li:hover a{ /* メインメニュ_のマウスホバー */
background: pink;color: red;}
#dropmenu li:hover ul li{ /* サブメニューのマウスホバー */
overflow: visible;height: 38px;left: -40px;}
--></style>
リストタグで配列を表示する（マウスでポ イントしてください） 　UL タグとその子供LIタグのスタイル定義

目次の大中小項目など配列の数が異なるときに項目列挙のリストタグがスタイルシートと合わせて使われます。 上記のようにスタイルシートのマウスhoverだけでドロップダウンの目次を作ることができます。 （メニューの操作は JavascriptのOnClickなどと組み合わせて記述されることも多いようです。）

例３　レイアウト配列　　　
<div id="container">
　<div id="header">　<h1>見出し</h1>　</div>
　<div id="sidebar1">　<h3>sidebar1 コンテンツ</h3> </div>
　<div id="mainContent">　<h1> メインコンテンツ </h1>
　<div id="footer"><p>フッター</p>　</div>
</div><!--end of container-->
 		#container { /*em=強調文、padding=上、右、下、左の余白*/
　 width: 46em; background: #FFFFFF; margin: 0 auto; border: 1px 　solid #000000;text-align: left; }
#header {
　　background: #DDDDDD; padding: 0 10px; }
#header h1 {
　margin: 0; padding: 10px 0; }
#sidebar1 {
　float: left; width: 12em; background: #EBEBEB;
　padding: 15px 0; }
#sidebar1 h3, #sidebar1 p {
　 margin-left: 10px; margin-right: 10px;}
#mainContent {
　margin: 0 1.5em 0 13em; }
#footer {
　padding: 0 10px; /background:#DDDDDD;}
#footer p {
margin: 0; /* div 間のスペース回避 */ padding: 10px 0; /* スペース設定 */ } 　　　
レイアウト設定をDIVタグとスタイルシートで設 定 レイアウトのスタイルシート構成

　スタイルシートを使えばページ上でコンテンツの位置指定ができます。 初期設定画面の一例を上に表示します。標準的なヘッダー、フッター、目次、記事の構成です。しかし配置を認識するには単なるテキストエデターで記述することは困難になるの で、見た目通り配置（WYSIWYG)の ビルダーソフトを使うほうが一般的です。 見た目通り配置は市販のホームページビルダーや、Dreamweaverの方が使い安いようでがBlueGriffonなどフリーソフトもあります。 なお、CSSは現在CSS5と発展を続けていてtransformなど外部から読み込んだファイルの拡大縮小や変形などもその中に取り込まれています。ただし スタイルシートはMicrosoftのIEや他のFirefoxなどブラウザごとに表示形式が異なる場合が多いので、それぞれのブラウザに対応するような記述 が必要になります。