BreathTake/ホームページ作成の小技・CSS篇

*
ホームページ作成の小技タイトル・CSS篇・イメージ写真
CSSとは?

CSSとは

■CSSは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略称です。
 拡張子を「.CSS」として外部ファイルにその内容を記載しておけば、異なるHTMLファイルで同じCSSファイルを読み込むことにより、デザインの統一性が保たれることになります。

■たとえば、100ページ分のHTMLファイルで「ホームページの小技」というタイトル色と形を変えたい場合、普通だと100ページ分の更新作業が必要ですが、あらかじめCSSで定義した中にタイトルが書かれていれば、その定義を変更するだけで、全てのページにその結果が反映されます。

■この特性から、movable_typeなどのブログソフトでは、基本部分とCSS部分を分けて、CSSの設定を変えるだけで、他と差別化した独自のブログを作成できるようになっています。

CSSの書き方

div#id {

/* 枠線のスタイル */
    border-style : solid;
/* 枠線の色 */
    border-color : #c0c0c0;
/* 枠線の幅 */
    border-top-width : 0px;
    border-bottom-width : 0px;
    border-left-width : 0px;
    border-right-width : 0px;
/* 枠線の余白 */
    margin-top : 2px;
    margin-bottom : 2px;
    margin-left : 5px;
    margin-right : 5px;
/* 枠線からの距離 */
    padding-top : 60px;
    padding-bottom : 2px;
    padding-left : 300px;
    padding-right : 10px;

/* ボックスの幅と高さ */
    width : 500px;
    height : 140px;

/* 背景画像の指定 */
    background-color : white;
    background-image : url(./images/back.gif);
    background-repeat : no-repeat;
    background-position : top left;

/* 文字の指定 */
    font-size : 15pt;
    font-weight : 600;
    color : RED;
    display : inline;
    line-height : 1.5;

}

■説明

  • "{" から "}" までの部分を宣言ブロックといいます
  • "div#id" をセレクタ(選択子)といいます
  • 宣言ブロックとセレクタを合わせて規則集合といいます
  • "color : red" 部分を宣言といいます
  • 宣言の内、":" より前(上例では "color")をプロパティ(特性)といいます
  • 宣言の内、":" より後(上例では "red")を値とといいます

@classを使う場合
●HTMLでの表記
   <div class="sakura">クラスを使った例</div>
●スタイルシートでの表記
   div.sakura {
      color: red;
   }

AIDを使う場合
●HTML
   <div id="sakura">アイディーを使った例</div>
●スタイルシート
   div#sakura {
      color: red;
   }

BclassIDの違い
ID : ページ中に1度しか登場しない
class : ページ中に何度でも登場する
「ID」は、ページ中で一意に特定できる場所を示すために使われます。
ですから、1ページ中に1度しか使えません。
その為、IDはページ内リンクでその場所を特定する場合などでも使われます。

Copyright © 2011 BreathTake All Rights Reserved