ホームページ作成支援Ran.comX
 

簡単そうごリンク
■スタイルシートとは?


■同じ効果が得られるHTMLタグとスタイルシートを併記してみます。
HTMLタグをCSSに改めたい場合、またはCSSをHTMLタグに改めたい場合には参考してくださいね。
(ただし、デザインに関しての指定はCSSでの指定が推奨されています)


背景色の指定  
HTML表記 <BODY bgcolor="★"> 〜 </BODY>
CSS表記 body { background-color : ★ }
★=色
背景画像指定  
HTML表記 <BODY background="★"> 〜 </BODY>
CSS表記 body { background-image : ★ }
★=画像のURL
背景画像の固定  
HTML表記 <BODY bgproperties="fixed"> 〜 </BODY>
CSS表記 body { background-attachment : fixed }
テキスト色指定  
HTML表記 <BODY text="★"> 〜 </BODY>
CSS表記 body { color : ★ }
★=色
リンク色の指定1 (未参照のリンク色)
HTML表記 <BODY link="★"> 〜 </BODY>
CSS表記 a:link { color : ★ }
 ★=色
リンク色の指定2 (クリック時の色)
HTML表記 <BODY alink="★"> 〜 </BODY>
CSS表記 a:active { color : ★ }
 ★=色
リンク色の指定3 (参照済みリンクの色)
HTML表記 <BODY vlink="★"> 〜 </BODY>
CSS表記 a:visited { color : ★ }
 ★=色
テキスト色指定2 (部分的に変更したい時)
HTML表記 <FONT color="★"> 〜 </FONT>
CSS表記 ☆ { color : ★ }
 ☆=セレクタ ★=色
位置指定 (段落)
HTML表記 <P align="★"> 〜 </P>
CSS表記 p { text-align : ★ }
 ★=left,center,right
位置指定 (まとめて指定したい)
HTML表記 <DIV align="★"> 〜 </DIV>
CSS表記 div { text-align : ★ }
 ★=left,center,right
センタリング  
HTML表記 <CENTER> 〜 </CENTER>
CSS表記 ☆ { text-align : center }
 ☆=セレクタ
マージン指定 (top,right,bottom,left 同様)
HTML表記 <BODY topmargin="★"> 〜 </BODY>
CSS表記 body { margin-top : ★px }
 ★=数値(書式は同様に)
フォントサイズ  
HTML表記 <FONT size="▲"> 〜 </FONT>
CSS表記 ☆ { font-size : ★ }
 ▲=1〜7 ☆=セレクタ ☆=数値・キーワード
フォント指定  
HTML表記 <FONT face="★,★…"> 〜 </FONT>
CSS表記 ☆ { font-family : ★,★… }
 ☆=セレクタ ★=フォント名
太字指定  
HTML表記 <B> 〜 </B>
CSS表記 ☆ { font-weight : bold }
 ☆=セレクタ
斜体指定  
HTML表記 <I> 〜 </I>
CSS表記 ☆ { font-style : italic }
 ☆=セレクタ
取り消し線指定  
HTML表記 <S> 〜 </S>
CSS表記 ☆ { text-decoration : line-though }
 ☆=セレクタ
等幅指定  
HTML表記 <TT> 〜 </TT>
CSS表記 ☆ { font-family : monospace }
 ☆=セレクタ
下線指定  
HTML表記 <U> 〜 </U>
CSS表記 ☆ { text-decoration : underline }
 ☆=セレクタ
リストマーク指定  
HTML表記 <UL type="★"><LI> 〜 </UL>
CSS表記 ul { list-style-type : ★ }
 ★=リストのマーク
回り込み指定 (画像に対してテキストの回りこみ)
HTML表記 <IMG src="☆" align="★">
CSS表記 img { float : ★ }
 ☆=画像URL ★=left,right
テーブル枠指定 (線幅の指定)
HTML表記 <TABLE border="★"></TABLE>
CSS表記 table { border : △ ◇ ★px }
 ★=枠線の太さ △=枠線スタイル ◇=色
セル内の位置 (テキストの位置指定)
HTML表記 <TR align="★" Valign="☆"></TR>
CSS表記 tr { text-align : ★; vertical-align : ☆ }
 ★=left,center,right  ☆=top,middle,bottom

この他にも数種類の乗り換えできるタグが存在しています。
使う頻度の高いモノだけを記述しておきます。
テーブルタグやフォントなどは、スタイルシートで記述をしておくと、HTML内がスッキリして見やすくなると思いますので、ぜひ覚えておいてほしいものです。
COPYRIGHT © 2004-2007 FREEMETHOD ALL RIGHTS RESERVED. ランキングナビ