Warning: Use of undefined constant singlepost - assumed 'singlepost' (this will throw an Error in a future version of PHP) in /home/xs376808/c-mdc.jp/public_html/wp-content/themes/cmdc/single.php on line 1
CSSの記述法 - ホームページ制作・WordPress制作・WordPress導入・ブログ制作 | contrast |

CSSの記述法

CSSの書き方のルール

まず、CSSの基本的な書き方を覚えましょう。

タグ名{プロパティ:値}

例を挙げますと、p {font-size:small;}というような感じで、Pタグの{フォントサイズを:小さく表示する;}

といった感じで指定のタグにレイアウトをしていきます。

CSSの記述も基本的に小文字で書いていきましょう。

CSSの書き方のルールとしては、プロパティの後は半角コロン:、値の後ろはセミコロン;で閉めること。もちろんプロパティと値は{}で囲います。この半角コロンやセミコロン{}の何かの記述が抜けていると、CSSで指定した装飾やデザインがHTMLに反映されませんので気をつけましょう!

また、CSSファイルはメモ帳などのテキストエディタで記入し保存の時は.cssという拡張子で保存しましょう。
その際に、スタイルシートのファイル名はわかりやすい名前にしておけば良いでしょう。

セレクタの指定方法

CSSでレイアウトを組む場合、ページをいくつかの領域に分けることからはじめます。
サイドバーを右につけたり左につけたり、タイトルの入ったバナーの画像をトップに配置したりするには、まず領域の指定が必要となります。その領域を指定し、レイアウト、デザインしていくのは

で囲います。

という指定で場所と領域をブロッキングしていくような感じです。
そして、その装飾や大きさ、場所などが”○○”で指定したCSSの反映される場所です。

にはidclassという指定があります。
��div id=””><div class=””>というのでは、CSSの記述が変わってきます。

レイアウトの大きな囲みは

で指定していき、小さな装飾などは<div class=””>を使って指定します。

IDセレクタ

��div id=””>で指定するCSSはIDセレクタといいます。
IDセレクタは特定の1つの要素に適用させます。#から記述します。

#title{
width:750px;
background: #FF6600;
height:40px;
line-height:40px;}

とCSSに記載した場合、HTMLに反映させるには<div id=”title”>反映させたい文字など</div>となります。

class(クラス)セレクタ

��div class=””>で指定するCSSはclassセレクタといいます。
classセレクタは「.」(ドット)から記述します。複数の要素に適用することが出来るのが特徴です。

.red {
color: red;
font-weight: normal;}

とCSSに記載した場合、<p class=”red”>赤い文字で表示させたい文章となります。

子孫セレクタ

子孫セレクタとは、『サイドバーのアクティブリンクだけメインのアクティブリンクの色と変えたい』などという場合に使います。『○○タグのなかの☆☆タグへの指定』で、使われます。○○や☆☆はタグだけではなく、IDやClassにも使えます。さらにタグをいくつもつなげることができます。

#foot p{
font-size:9px;
color:#cccccc;
}

とCSSに記載した場合<div id=”footer”><p>フッター内のp要素に指定</p></div>となります。