>>>HOME >>>CSSの基礎知識① >>>CSS基礎知識②:仕組み その1
ようこそ「HP-Knowledge」へ。このホームページは、「ホームページ作成・制作」におけるHTMLとCSS(スタイルシート)の基礎知識を紹介するホームページ作成初心者向けのページです。ホームページを作るために知っておくべきHTMLとCSS(スタイルシート)の基礎知識を身につけてホームページ作成に強くなろう!

スタイルシート基礎知識②:仕組み その1

このページではスタイルシートの構造について紹介します。と言ってもこの構造は非常に奧が深く、複雑なルールや書き方が存在するので非常にやっかい。スタイルシートを使おうとする人で、構造を理解できずに断念してしまった人も多いのではないでしょうか。一応当ホームページは、ホームページ作成初心者向けの基礎知識」を紹介するサイトなので難しい部分はひとまず横に置いて、スタイルシートの基本となる部分と、知って得する便利なことに絞って紹介させていただきますのでご容赦下さい。

スタイルシートの表記

スタイルシートは見栄え要素が何個も集まってひとつのシートとなったものです。 一番分かりやすいタグであろう「h1(見出し)」タグを使って説明します。 セレクタはタグ宣言内に書いたスタイルを適用させたい場所を指し、プロパティはフォントサイズや色などタグで変更したい内容を表しています。 数値は変更する度合いを表しています。ちなみに、図ではカラー定義となるの数値を示していますが、#FFFFFFで白色のフォント、#000000で黒のフォントカラーとなります。忘れてはいけないのが、cssで表記する時は全て「半角英数字」を使うことと、;(セミコロン)で宣言を終了させることです。この表記ルールでないとスタイルシートがちゃんと機能しません。

セレクタ

セレクタの部分は「タグ」id(アイディー)」「class(クラス)」の3種類があります。 タグはHTMLタグのこと指し、例えばスタイルシートで「h1」タグのフォントカラーを指定すればHTMLファイル側でh1タグを使うとスタイルの効果が適用されるようになります。id(アイディー)とclass(クラス)は名前を任意に決めて、その名前がHTMLで呼び出されたところにだけスタイルを適用するようにできます。つける名前は何でも構いませんが、できることなら他のclassやidと区別しやすいように、分かりやすく重複しにくい名前にしましょう。 スタイルシートでclassを表記する時は名前の前に「.(ピリオド)」を入れて、idは名前の前に「#(シャープ)」を入れる必要があることを忘れないように。試しに「test」というクラスと「test2」というidをスタイルシートで定義してみました。 解説すると、class「test」ではフォントサイズを14ピクセルとして定義して、id「test2」ではフォントカラーが黒になるようになっています。 上図ではひとつの宣言内のプロパティは1つですが、複数設定することも可能です。複数のプロパティを1つのセレクタに収めることができるようになれば一人前。これらのように書いたスタイルシートはHTMLファイル専用の記述をすることで適用できます。
  • <h1>見出しの色は白</h1>
  • <div class="test">フォンサイズは14ピクセル</div>
  • <div class="test2">フォントカラーは黒</div>
セレクタがタグならば特に記述を変更する必要はないです。classはclass="自分で決めた名前" IDはid="自分で決めた名前"をタグの後に付け加えることで適用させることができます。

classとid

classは同じページ内で何度も使う予定のスタイルとし、idは同じページ内で1回しか使わないスタイルとします。 具体的には、レイアウトに関わる要素にはIDを、装飾要素に対してはclassという感じで使うとわかりやすいかと思います。 必ずしもレイアウト要素と装飾要素を別にしてclassとidを使いわけないといけないという厳密な決まりは無いのですが、idとclassの区別づけが難しい場合はclassを使っておけば問題ありません。

セレクタの重複

スタイルシートでclass定義をつけることに慣れると、稀に名前が重複することがあります。 例えるなら「.menu」などつけやすい名前ほど重複しやすいです。 なるべくなら重複しないようにするべきですが、適用したいタグが違う種類だった場合は次のような表記で解決できます。
  • div.menu { background-color:#FFFFFF; }
  • ul.menu { background-color:#000000; }
.(ピリオド)の前に適用させたいタグを記述すればOK。HTMLでは下のような表記になります。
<div class="menu">
<ul class="menu">
<li>クラス重複</li>
</ul>
</div>
こうするとclass名は同じになっていますが、表示は違って見えるようになります。

プロパティと数値

スタイルシートで一番重要となるのがプロパティと数値の部分。 これらを自由自在に調整できるようになればスタイルシート一人前です。 スタイルシートは非常に細かい設定が可能ですが、それだけプロパティの種類も豊富。本屋に行くとHTMLのタグ解説とセットになった参考書が売られているハズので、スタイルシートを完璧に使いこなしたい人は一冊買っておいてもいいかもしれません。申し訳ありませんが、当ホームページで全てのプロパティと数値を解説することはできないので、リンクページにてスタイルシートを解説しているホームページを紹介しているのでそちらをご覧下さい。

注目サイト

象牙印鑑の通販|京都の老舗のはんこ屋【畑正】

2017/9/15 更新

Copyright(C)2008 HP-Knowledge. All Rights Reserved.