CSS

2011/09/05(月)

CSS（Cascading Style Sheet）はHTML同様にW3Cが策定したHTML文章の体裁やデザイン、レイアウトを指定するための手法です。HTML文書内に記述することもありますが、多くは、HTMLを文書からリンクしたスタイルシート専用のテキストファイルに記述し、HTML文書の体裁を指定します。

HTMLの項の太字と赤い字の例は…

HTML文書の記述：

 

<head>
　<link type="text/css" rel="stylesheet" media="all" href="stylesheet.css"><head>
<body>
　<p>京都の<a href="http://www.mtm.or.jp/uslm">梅小路蒸気機関車館</a>には<span class="akaji">19両の蒸気機関車</span>が<span class="futoji">保存</span>されています。<p>
</body>

 

<head>～</head>の部分は画面に表示されない文書の設定が記入されています。ここでは文書の体裁やデザイン、レイアウトはstylesheet.cssというファイルにリンクするように指定しています。
<body>～</body>内が画面に表示されます。 <p>～</p>で段落を設定し、その段落内の部分を<span>～</span>で指定し、class="futoji"やclass="red"でその指定した部分の属性を指定しています。

スタイルシート stylesheet.cssの記述：

 

.futoji{font-weight:bold;}
.akaji{color:red;}

 

class="futoji"で指定された部分は太字、class="akaji"で指定された部分は赤い字にするように記述しています。これで同じホームページ内にあるどのページでもclass="futoji"と指定された部分はstylesheet.cssに記述され太字の設定が適用されるようになります。

レイアウトを指定する場合、<table>タグを使わずに部分部分を<div>～<div>で区切り、その区切りの表示をcssの記法で指定します。

HTML文書の記述：

 

 <div class="migi"><img src="http://uemachi.foolontheweb.net/pics/P1000796.jpg"></div>
<div><p>京都の梅小路蒸気機関車館には19両の蒸気機関車が保存されています。機関車は次の2種類の方法でたいせつに保存されています。<p></div>

 

スタイルシートの記述：

.migi{float:right;}

class="migi"で指定した区分を右寄せに位置させ、それに続く部分が空いたスペースに流れ込むようにします。 

©Uemachi Web Factory