新しい技術とか古い技術とか関係なく今のhtmlを考える。

CSSを賢く使う

スタイルシート仕様のHTMLを構築する上で普段よくやるやり方や、新しく見つけたテクニックを載せていく予定

backgroundのみで背景をコントロールする

これは絶対必須のテクニック。
ボタンやタイトルを作る時はかなり便利です。

----------------------------------------------
HTML
----------------------------------------------
<p id="bg01">左上にいます</p>
<p id="bg02">右下にいます</p>
<p id="bg03">中央→</p>

<p id="bg04">横並び1列</p>
<p id="bg05">縦並び1列</p>
<p id="bg06">全面に配置</p>

<p id="bg07">icon風→</p>
<p id="bg08">←icon風</p>
<p id="bg09">飾り風</p>

----------------------------------------------
CSS
----------------------------------------------
#bg01 {background:#ccc url("../img/icn_flower.png") no-repeat;}
#bg02 {background:#ccc url("../img/icn_flower.png") right bottom no-repeat;}
#bg03 {background:#ccc url("../img/icn_flower.png") center center no-repeat;}

#bg04 {background:#ccc url("../img/icn_flower.png") 0 bottom repeat-x;}
#bg05 {background:#ccc url("../img/icn_flower.png") right 0 repeat-y;}
#bg06 {background:#ccc url("../img/icn_flower.png") repeat;}

#bg07 {background:#ccc url("../img/icn_arrow02.png") 123px 7px no-repeat;}
#bg08 {background:#ccc url("../img/icn_arrow02.png") 5px center no-repeat;}
#bg09 {background:#ccc url("../img/flower.png") 115px -10px no-repeat;}

[ 設定方法 ]

{ background:色番号 url("画像へのリンク") 左右の位置値 上下の位置値 反復の有無; }

色番号は短くできる

通常RGBカラーは"#000000"のように6ケタの英数字で表記します。

"RGB"を表す数字の最初の2つの数字が"R"、3,4番目の数字が"G"、5,6番目の数字が"B"の値を表しています。 これらがそれぞれ揃っていれば短くすることができます。

#666666

#666

#6699cc

#69c

#ff9900

#f90

----------------------------------------------
HTML
----------------------------------------------
<p id="bg11">#666666</p>
<p id="bg12">#666</p>

<p id="bg13">#6699cc</p>
<p id="bg14">#69c</p>

<p id="bg15">#ff9900</p>
<p id="bg16">#f90</p>

----------------------------------------------
CSS
----------------------------------------------
#bg11	{background:#666666;}
#bg12	{background:#666;}

#bg13	{background:#6699cc;}
#bg14	{background:#69c;}

#bg15	{background:#ff9900;}
#bg16	{background:#f90;}

最初の行だけをスタイリング

----------------------------------------------
HTML
----------------------------------------------
<p class="FstLine">
あいうえお<br />
かきくけこ<br />
さしすせそ<br />
</p>

----------------------------------------------
CSS
----------------------------------------------
p.FstLine:first-line{
	font-weight:bold;
	color:#fff;
	background:#333;
}

文章の一番最初の文字だけをスタイリング

----------------------------------------------
HTML
----------------------------------------------
<p class="FstLetter">
あいうえお<br />
かきくけこ<br />
さしすせそ<br />
</p>

----------------------------------------------
CSS
----------------------------------------------
p.FstLetter:first-letter{
	font-weight:bold;
	color:#fff;
	background:#333;
}

指定したタグの中にある要素だけをスタイリング

----------------------------------------------
HTML
----------------------------------------------
<p class="InObj">
あい<small>う</small>えお<br />
かき<span>く</span>けこ<br />
さし<strong>す</strong>せそ<br />
</p>

----------------------------------------------
CSS
----------------------------------------------
p.InObj *{
	font-weight:bold;
	color:#fff;
	background:#333;
}

titleに入れた補足語を表示

----------------------------------------------
HTML
----------------------------------------------
<p id="AddWord" title="＊注)">画像はイメージです。</p>

----------------------------------------------
CSS
----------------------------------------------
#AddWord[title]:before{
	content:attr(title);
}