わたしは、普段ブログ記事を書いたり編集したりする中で、見よう見まねで何気なくスタイルシート(CSS)の記述を使用していますが、基本をもう一度よく確認してみたいと思います。
CSS.jpg

スタイルシートの記述方法には大きく3つの方法があるようです。
 
 

インラインスタイルシートで指定する方法


・スタイルはHTMLタグの中にstyle属性として指定する。
( h1, div, span, p など、大半のタグで使用できる)

・指定した位置に部分的にスタイルを適用させることが可能。

▼記述方法(spanタグでの例)
<span style="color:red;">文字色は赤</span>
文字色は赤

▼セミコロン(;)で区切って、複数スタイルの指定も可能。
<span style="color:red;font-size:24px;">
文字色は赤、大きさは24px</span>
文字色は赤、大きさは24px

▼最後のスタイルのセミコロン(;)は省略可能。
<span style="color:red;font-size:24px">
文字色は赤、大きさは24px</span>
文字色は赤、大きさは24px

この方法は、
文中で使うことからインラインスタイルシートとも呼ばれ、
HTMLタグ感覚で記述できて最もわかりやすい使い方のようです。

私はブログ記事の中で、
主に「div」や「span」などのタグを用いて、
文字サイズや色指定・レイアウト調整などに使用しています。

基本的にインラインスタイルシートによる方法しか理解していませんが、レイアウト調整が思うように行かないことが時々あります。

記述方法や使い方が間違っているのか、それとも使用しているテンプレートとの相性などの原因なのかはわかりませんが、上手く行かない時はstyle要素にmargin指定をした<div>タグで囲んでやるとだいたい思った通りにレイアウトができます。
<div style="margin:0px auto 0px auto;width:400px;">
<img src="gazou.jpg" border="0" width="400" />
</div>

これは、サイトコンテンツをセンタリングする方法でも紹介していますので、こちらの記事も参照してみて下さい。


インラインスタイルシートの注意点


わかりやすい反面、この方法の欠点として、

・HTMLの中に埋め込まれることでメンテナンス性が悪くなる。
(本来、構造と表現とを別々に管理できるというメリットがある)

・インラインスタイルシートで記述した場合、
 修正時に、HTML文書中のstyleタグが使われている部分を全て探しだして書き直す必要がある。


head要素内の<style>タグで指定する方法


・<style>~</style>で、文書全体のスタイルを指定する方法。


外部スタイルシートで指定する方法


・<link>タグで、外部ファイルに記述したスタイルシートを読み込む方法。
・メンテナンス性がよい。
・この方法を用いることで、複数のHTML文書間でスタイルシートの共有化が可能。
・Seesaaなどのブログサービスでは、この方法でスタイルシートを設定しているようです。スタイルシートを記述するウィンドウに入力した内容が外部ファイルとなる訳ですね。

インラインスタイルシート以外の記述方法については勉強が必要のようですね。さらに理解を深めていきたいと思います。

最後までお読みいただきましてありがとうございます。
↓ブログ応援クリックよろしくお願いします。
にほんブログ村 IT技術ブログへ
にほんブログ村

人気ブログランキングへ


スポンサード・リンク