はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSの基礎知識

2007/05/25 Fri [Edit]

このページではFC2ブログ運営者の方で、尚かつ前回のエントリーHTML の基礎知識をご覧頂き HTML の基礎知識をご理解した方を想定して CSS の基礎知識について説明しています。

CSS(シー・エス・エス)とは Cascading Style Sheets(カスケーディング・スタイル・シート)のことで、頭文字を取り CSS と表記されています。

Web ページの制作現場ではスタイルシートと言えば CSS のことを指していると思って頂いて問題ないと思います。
※厳密に言うと CSS はスタイルシートの1つだと解釈しておくのがベストです。

それでは CSS とは何をする為のもので、何ができるのか1つ1つ理解していきましょう!

何をするものかをまず説明すると CSS とは HTML の視覚的構造を規定する枠組み(規格)です。
もう少し簡単な言い方をすると HTML の見た目(装飾やレイアウト)を設定するための技術です。

それでは実際に CSS の定義方法を下の図1を見ながらご理解を深めてください。

図1 CSS の定義方法

まず、グレー枠内の左側に「セレクタ {属性 : 値;}」と見つかるでしょうか。これが、CSS のもっとも基本的な定義方法です。しかし、これだけを見てもそれぞれ何を意味しているのか、はじめて CSS をご覧になる方には分かり辛いと思います。

まず、セレクタとは何でしょうか?

セレクタとはどの HTML 要素について属性(プロパティ)を適用させるかを選択(セレクト)するものです。

図1に目を戻すと、「実際には→」の右側に「 h1 」が見つかると思います。「実際には→」の右側は実際に CSS に記述した例です。
つまり、図1の場合 h1 がセレクタ(選択された HTML の要素)であり、h1 に属性の値を設定することになります。
h1 は覚えている方も多いでしょうが、おさらいの意味もこめて一応説明しておくと HTML のタグの1つです。 HTML 内に記述する時は <h1> のように、「 < > 」を使い要素名(タグ名)を囲っていましたが、セレクタとして記述する際は、「 < > 」は必要ありません。

HTML の基礎知識のほうで説明しておくべきだったのかも知れませんが、タグとは要素名を「< >」で囲ったもの。そう言った定義の仕方もあったのかも知れません。

それはともかく、図1の CSS の定義方法に話しを戻しますと、h1 の font-size(フォント・サイズ)属性を 20px(20ピクセル)と値を記述し定義(設定)しています。

上のように定義することにより、HTML 内にある h1 タグに囲まれたテキストは 20px の大きさとなります。

ここではなんとなくご理解頂ければ結構です。後ほど、幾つかサンプルを使いもう少し詳しく説明いたします。しかし、これが CSS 定義の基本的な考え方なので、これさえ分かってしまえばブログの簡単なカスタマイズが出来るようになったも同然です。

それでは図1のグレー枠の下にある拡大図をご覧下さい。

!)上の図1と同じものです。
図1 CSS の定義方法

ご覧頂くと分かると思いますが、これは図1のグレー枠の右側にある CSS 定義を拡大したものです。 何故、拡大したかと言うとコロンセミコロンが小さいと分かり辛いかな?と思い大きくしてみました。

繰り返しの説明も交えながら基本的なことを説明すると、まず左にセレクタ(この図では h1 )があり、属性と値を「 { }中括弧(ちゅうかっこ)で囲んでいます。
また、中括弧の中の左に属性(この図では font-size )があり、その属性の値(この図では 20px )の間を「 :コロンで区切ります。そして属性の値の後ろ(右側)に「 ; 」セミコロンを記述します。コロンとセミコロンは似ていますが、良く見ると違いが分かりますよ。

中括弧とコロンが記述される理由は説明しなくてもご理解頂けると思いますが、セミコロンは分かりますか?

セミコロンはその属性の設定がここ迄ですよと言う印です。しかし図のようにセレクタの属性の設定が1つの時はセミコロンを記述しなくても問題ありません。 おそらくですが、中括弧を「 } 」閉じた時にそのセレクタへのプロパティの設定を終了するからだと思います。
※私の持っている書籍や Web 上を検索し情報を探したのですが、確かなものがなかったので曖昧な説明になってしまいました。

それでは何故セミコロンが必要なのかと言うと、下の CSS 定義をご覧ください。

h1 {font-size : 20px; color : #000000}

セミコロンの後ろ(右側に)color : #000000 とありますね。
color(カラー)も属性の1つで、#000000 は color 属性の値です。 このように、CSS の定義ではセレクタに対して中括弧の中で複数の属性を設定することができます。その時「属性:値」と「属性:値」を区切る役目になるのが「 ; 」セミコロンです。複数の属性を設定する際は必ずセミコロンを使い、1つの属性の設定の終わりを明示する必要があります。

文章を読み理解しようと思っても、なかなか分かり辛いとは思いますが、図1さえ頭に入ってしまえば用語や CSS 定義の決まり事は、実際に CSS に触れているとある程度は自然と身について行くと思います。

ここ迄の説明をご覧頂いた方で、なんとなく理解し切れない部分がある方、行ったことのない場所の説明を聞いてもピンとこないのと一緒で、慣れない言葉が重なるとどうしても理解しきれないのは当然の事だと思います。
ましてや私の拙い説明ですと尚更のことと思います。どうか『難しい・・・』と諦めず1つ1つご自身のペースでご理解して頂ければと思います。

ここからは実際に CSS 定義のサンプルをご覧頂こうと思います。 どのような属性にどんな値を指定しているか、そしてその結果どのように Web ブラウザ上に表示されているかに注目してください。

サンプル1


.sample1 {
	color : #000; /*文字色をRGBカラーで黒に指定*/
	font-size : 200%; /*文字の大きさを%(相対的に)で指定*/
	background-color : whitesmoke; /*要素の背景をカラーネームで指定*/
	padding-top : 1em; /*要素の上に1文字分の余白を指定*/
	padding-bottom : 1em; /*要素の下に1文字分の余白を指定*/
	padding-left : 2em; /*要素の左に2文字分の余白を指定*/
	border-left : 0.5em solid #cf0; /*要素の左に0.5文字分の罫線を指定*/
	border-bottom : 1px dotted red; /*要素の下に1pxの点線を指定*/
}

サンプル1の表示結果

まずセレクタに注目してください。.sample1 とあります。このようなセレクタをクラスセレクタと言います。 HTML の要素に .sample1 なんて名前のものはありません。 つまり私が勝手に作ったセレクタです。
それでは何故 CSS 定義を適用できたのでしょうか?

答えは HTML のタグにあります。 下がその答えですので確認してみてください。

<p class="sample1">サンプル1の表示結果<⁄p>

HTML の基礎知識で説明した img タグを思い出して頂きたいのですが、タグには src などの属性を与えられて機能するものがあると説明しましたが、実は HTML のタグには共通属性と言うものが用意されていて、要素をグループ化したり、目印をつけることができます。
また、推奨はいたしませんが style 属性を使い要素自体に直接 CSS 定義(インラインスタイル)することもできます。
話しがそれ、しかも今さらですが、FC2ブログでは、外部(別のファイル)に CSS 定義用のファイルを用意し、HTML の head 内でその CSS ファイルを読み込み HTML 内の要素に適用させています。

HTML には共通属性の他にも要素により様々な属性が用意されています。その中には装飾やレイアウトに使える属性も存在します。
しかし、そう言った HTML の持つ視覚的構造を使用することは、HTML には論理構造だけを記述すると言う本来の目的に反します。 せっかく HTMLCSS の分離に成功しているのですから、CSS ファイルでセレクタを使い HTML に視覚的構造を設定することのほうがメリットが多いでしょう。

話しが大分それてしまいましたが、クラスセレクタを適用する HTML 要素には、HTML のタグが持つ共通属性の1つであるクラス属性で適用させます。
クラスセレクタの名前の付け方は英数字と( _ )アンダースコア、「 - 」ハイフンが使用でき、セレクタの名前の頭(左側)にクラスセレクタの印である「 . 」(ピリオド)を付けます。 HTML のクラス属性にクラスセレクタの名前を記述する時は「 . 」は要りません。

サンプル1の属性と値の説明は細かくいたしませんが、「 /**/ 」の間に簡単に説明を記述しておきましたので参考にしてください。

サンプル2


#sample2 {
	color : #095c76;/*文字の色をRRGGBBで指定*/
	font-size : 20pt;/*文字の大きさをptで指定*/
	font-weight : bold;/*文字を太く指定*/
	background-image : url("http://blog77.fc2.com/…省略.gif");/*要素の背景に画像を指定*/
	padding : 1em 0 1em 2em;/*要素の回りに余白を指定*/
	border : #555 solid 2px;/*要素の回りに枠線を指定*/
}

サンプル2の表示結果

サンプル2で注目して頂きたいのが #sample2 としてあるセレクタ名です。
またしても HTML にはない属性がセレクタとして定義されています。このようなセレクタを ID(アイ・ディー)セレクタと言います。
ID セレクタはサンプル1で説明したクラスセレクタと HTML への適用の仕方、用途も似ています。ID セレクタがクラスセレクタと違う部分を挙げると、セレクタ名の頭(左側)に「#」(ハッシュ記号)が付くこと、HTML への適用には HTML のタグが持つ共通属性の1つ ID 属性を使うことです。HTML への適用は下のようになるのでご確認ください。

<p id="sample2">サンプル2の表示結果<⁄p>

クラスセレクタと ID セレクタは似ているのですが、大きな違いとして ID セレクタは1つの HTML ファイルの中で同じ ID 属性を複数適用することができません。
つまり、上のサンプル2に ID セレクタで定義しているスタイルを現在ご覧頂いている HTML ページでは他の場所にもう一度同じ名前の ID セレクタでは適用させることができないのです。
サンプル1のクラスセレクタは何度でも同じ HTML ページ内に同じ名前で適用することができます。 何故この ID セレクタのような1度しか適用できないセレクタがあるかと言うと、1カ所を特定することができるからです。1カ所を特定することができるメリットは CSS の管理が簡単になるのと同時に優先順位に関係してきます。
これから CSS を勉強されようと考えている方にはピンとこない部分だと思いますが・・・

たとえばある街に「佐藤さん」という名字の方が沢山住んでいたとして、その街の「佐藤さん」全員を呼び集める時にはクラスセレクタが便利なのですが、ある1地区に住んでいる「佐藤さん」だけを呼ぶ時には ID セレクタが便利になります。クラスセレクタでも、1地区の「佐藤さん」だけを呼ぶことは可能なんですが、ID セレクタで呼んだ方が「佐藤さん」は言うことを聞くのです。

また「佐藤さん」を呼び集める側から見ても、今回は街に住む全員の「佐藤さん」を呼んだのか、1地区の「佐藤さん」だけを呼んだのかが一目瞭然となります。 「佐藤さんが言うことを聞く」の部分をもう少し掘り下げると、ID セレクタで呼ばれると、もしその後からクラスセレクタで違う場所に呼ばれても「佐藤さん」は ID セレクタの言う通りにします。

もし、クラスセレクタ同士で違う場所に「佐藤さん」を呼ぶと、後から呼んだクラスセレクタの言うことを聞くのです。 このようにセレクタは同じセレクタなら後から指定した方が HTML に適用され、ID セレクタのように個別性が高いものの方が適用されると言う優先順位を持っています。

また、HTML 内の ID 属性やクラス属性はプログラムが参照している場合もありますので、FC2ブログ運営者の方は ID セレクタやクラスセレクタの名前を変更する際は注意が必要です。特に ID セレクタの名前を変更する際や、新しくご自身で ID セレクタを使う時は注意してください。

下の CSS 定義をご覧ください。

サンプル3


p.sample3 {
	color : black;
}

div#hajime p.sample3 {
	color : red;
}

strong , em {
	font-style : bold;
}

サンプル3の1番上の CSS 定義を見てみると、p 要素セレクタの後ろにクラスセレクタが続いています。これも個別性を高める方法の1つであり、.sample3 と言うクラスセレクタが HTML 内で p 要素にだけ指定されていることが CSS だけを見て判断できます。

その下の定義はどうでしょう?
セレクタが大分込み合ってきました^^
でも、以外と簡単なことですよ。
まず div とは HTML の要素の1つです。つまり「 div 要素で ID 属性が hajime のもの」という具合に個別性と CSS 内での分かりやすさを高めています。そして半角スペースで区切り、1番上と同じ p 要素セレクタで .sample3 と言うクラス名のものに対し指定しているのです。

この結果、HTML 内の p 要素でクラス属性が sample3 の p 要素には黒(black)が適用されるのですが、div 要素の ID 属性が hajime に囲まれているクラス属性が sample3 の p 要素だけ赤( red )が適用されます。

このように要素名の間を半角スペースで区切り、複数並べるとある特定の要素の子孫にあたる要素にスタイルを適用することができ、個別性も上がり、CSS を見ただけでどこにスタイルを適用しているのかがより判断しやすくなります。ちなみにこのようなセレクタのことを子孫セレクタと呼びます。

続いて1番下のセレクタに注目してください。セレクタが2つ並んでいますね。どちらも HTML のテキストの強調を意味する要素です。セレクタの間に「 , 」(カンマ)があるのが分かりますか?
このように同じスタイルを適用したい要素は「 , 」で区切り並べて指定することもできます。

こうしたセレクタの優先順位やグループ化を利用することで、HTML ソースや CSS ソースが簡潔になり、後から修正を加える時なども分かりやすくなります。

FC2ブログ運営者の方がご自身のブログをカスタマイズをする際は、変更したい HTML の要素に ID 属性がついているのか、クラス属性がついているのかを判断し、CSS の中から該当するセレクタを見つけ、CSS の属性の値を変更すれば良いのです。

分からない属性や値は Google などで検索すればすぐに分かると思います。それよりも、CSS のセレクタがどこにスタイルを適用しているのかを判断することの方が難しいと思います。テンプレートの制作者やテンプレートのデザインにより無数に変化する部分だからです。
属性名や値は誰が作っても、どんなデザインであっても使われるものは限られています。

それでは最後にリンクカラーの定義をご覧頂き CSS の基礎知識を終了したいと思います。

>サンプル4


a:link , a:visited { /*リンクカラーと訪問済みリンクカラー*/
	color : blue;
	text-decoration : none;
}

a:hover , a:active { /*マウスカーソルが乗っている時とクリックされた時*/
	color : aqua;
	text-decoration : underline;
}

サンプル4ではリンクカラーの定義に注目して頂きます。
HTML で他のページへリンクする際は、a(アンカー)タグを使用します。つまり上のセレクタは a 要素へのスタイルを定義しているのですが、a セレクタの後ろに :(コロン)があり、英単語が続いています。

:疑似クラスをあらわしていて、今迄説明したクラスセレクタや ID セレクタでは英数字などを使い好きな名前をつけられましたが、疑似クラスでは予約語を使い定義します。

a 要素では「 link 」「 visited 」「 hover 」「 active 」の4つの疑似クラスが使え、あらかじめ用意されていたクラスを使うことになります。 つまり、リンクカラーのスタイルを変更したい時は疑似クラスを使い、自分の使いたいクラス名ではなく予約語で定義するのです。

なんのことか分からない方も、リンクカラーの変更だけ他とは違うんだな・・・程度の理解で充分です。
※正確に言うと疑似クラスはリンクカラーだけではなく input 要素などの「 focus 」が時々使用されています。

以上で CSS の基礎知識の説明を終わります。

最後に注意点として、テンプレートをカスタマイズをする前にはバックアップをとることと、レイアウト関係のカスタマイズは、ある程度 CSS の知識や経験が付く迄は手を出さない方が良いと思います。

テキストの色や背景の色、背景の画像の変更やリンクカラーなどは心配要らないのですが、レイアウトの変更では沢山の Web ブラウザでの確認作業がつきまといます。

Windows 用の Web ブラウザで成功したかに見えても Macintosh 用の Web ブラウザではレイアウトが崩れてしまったり、その逆に Macintosh 用では何も問題なくても Windows< 用では大変なことになっていたりします^^

ですので、確認作業が出来る環境とある程度の CSS の知識がつくまでは、カラーや画像変更を楽しむ程度が無難だと思います。

分かり辛い説明だったとは思いますが、最後迄読んで頂きありがとうございます。 このエントリーが少しでもどなたかのお役に立てれば幸いです。

Prev
コメントの修正&削除ができない
Top
はじめてのブログデザイン
Next
HTMLの基礎知識

Comments

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。