CSSって何?
CSSの編集っていうけど、いったいCSSって何?って思っている方のための記事です。長いので、「それくらいは分かる~」っていう方は、すっ飛ばしてくださいね。CSSとは、HTML文書の装飾部分を一括管理できる機能です。ブログテンプレートでは、CSSを外部ファイル化していて、HTMLとCSSを別ファイルで管理しています。HTMLではテンプレートの基本構造(レイアウト)を、CSSでは文字や背景の装飾部分を定義しています。ブログのトップページなどのHTMLソースを見ていただくと、<head> タグの範囲内に、下記のような記述があります。<< HTMLファイル >><head><link rel="stylesheet" media="screen,print" type="text/css" href="http://stat100.ameba.jp/p_skin/cmn/css/all110127.css" charset="UTF-8" /></head>この記述で、 CSSを別のファイルから読み込むことができます。投稿記事のHTMLタグ編集で CSS を記述することもできますが、CSSを外部ファイル化することで、同一のスタイルを複数のページで共有できます。この外部ファイル化されたCSSを編集することで、トップページや個別記事などのデザイン部分(文字の色・サイズ、背景色、背景画像など)を、一括で変更することができます。CSSの記述方法CSSの書式は下記のようになります。<< CSSの書式 >>セレクタ { プロパティ : 値 ; }セレクタ(selector)とは、スタイルを適用する対象のことで、HTML の要素(element)、例えば、 body や p などが該当します。プロパティ(property)とは、セレクタにどのような効果を付与するかを指定するものです。プロパティごとに指定できる値が決まっています。;(セミコロン)は、2つ以上のプロパティを設定するときに「値」の後ろに入れます。ただし、プロパティが1つしかない場合に記述しても、特に表示に支障はありません。<< CSSの記述例 >>body{background-color: #ffffff;}この例では、「BODY」がセレクタ、「background-color」がプロパティ、「#FFFFFF」が値となります。プロパティが多い場合は、上記のように改行を入れて見やすくしましょう。クラスブログのテンプレートでは、クラスが頻繁に使用されていますので、説明します。クラスを定義することにより、特定の要素(タグなど)にスタイルを指定することができます。記述方法は、下記のようなパターンがあります。■ セレクタ名 .クラス名(任意の名前)セレクタにピリオド(.)とクラス名(任意の名前)をつけて記述します。一つの要素に複数のスタイルも指定できます。<< スタイルシート >>p.menu { color: red; }p.submenu { color: green; }<< HTML >><p class="menu">メニュー</p><p class="submenu">サブメニュー</p>■ .クラス名(任意の名前)セレクタ名を指定せず、ピリオド(.)とクラス名だけを記述した場合は、すべての要素でそのスタイルを指定することができます。つまり、そのクラスはタグに依存することなく、複数のタグにスタイルを指定できます。<< スタイルシート >>.menu { color: #666666; }<< HTML >><p class="menu">メニュー</p><div class="menu">メニュー</div>以上、CSS(スタイルシート)について簡単に説明しました。今回の内容はちょっと分かりにくかったかもしれません。んん・・・・なかなか、分かりやすく説明するのは、難しい・・・スミマセン。CSSは、実際にカスタマイズしていくと段々慣れてきて、理解できるようになると思います。