メニュー



色んなこと



外部リンク



リンク



他のサービス





ここを編集

更新履歴

取得中です。
ここを編集

HTML・CSSについて

※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

HTMLとCSSの基礎知識

WikiなどのCMSを含む「ホームページ」の実体はHTML文書です。元来はこのHTMLタグ付のテキスト文書を、そのままテキスト文書として読んでいましたが、近年は「視覚系ブラウザ」と呼ばれるタイプのWebブラウザで、「画面として表示する」ソフトでホームページを閲覧するのが大勢です。

そこで、「どのように表示させるのか」が問題となります。その経緯は割愛しますが、現在ではCSS(カスケイディング・スタイル・シート)が利用されるようになりました。

これは、HTML文書は、あくまでも文書の構造をHTMLタグで定義することをその役割とし、画面として表示するときには、CSSで定義したデザイン情報を適用させることで、「文書に書かれている内容を読み出しやすくする」ことと「デザイン情報を分離することで管理や開発をしやすくする」という目的があります。

そこで、このWikiが自動生成するHTMLに対して適用されているCSS情報を、一部書き換えることで、細かなデザイン変更が可能となるわけです。

HTML文書の要素
HTMLは、文書内にある情報を「HTMLタグ」と呼ばれるタグで囲むことで、その部分を「要素」という単位に定義します。逆に言うと、これら(構成)要素の集まりで、HTML文書は構成されている、とも言えます。

HTMLの要素は、次のような書式になっています。
<要素名 属性名="属性値">内容</要素名>
<div id="top">リンク</div>・・・(例文)
<em class="color_red">ここ注意!</em>・・・(例文)
CSSの書式

CSSは、この要素単位で、デザイン情報の適用先を選別します。その際に利用される主な情報は、以下の3つです。
  • 要素名
  • class属性値
  • id属性値
CSSでは、これらの情報を「 セレクター 」と呼び、セレクターに続く「 」と「 」に囲まれた間に、 プロパティ (デザイン情報)を記述するという、書式を用います。

また、CSSにおいては、上記のHTML要素の持つ範囲を「ボックス」という概念で捕らえます。下図では、黄色い部分が要素の範囲(ボックス)ということになります。おおむね、以下のようなプロパティを設定できます。
プロパティ名 意味
color 文字色
background 背景色
border ボックスの境界線(外枠)
margin ボックスの外側の余白
width 内容の横幅
height 内容の縦幅
padding ボックスの内側の余白

プロパティは、「 プロパティ名 : プロパティ値 ; 」で1セットになります。続けて複数のプロパティを記述することもできます。 

セレクタ { プロパティ名 :(コロン) プロパティ値 ;(セミコロン) }
em { font-weight : bold;} ・・・(例文)
.color_red{ color : red ;} ・・・(例文)
#top { background : white; color : blue} ・・・(例文)

このように、要素名をセレクタにするならば、要素名をそのまま記述し、class属性値を使う場合は、「 .(ドット)  + class属性値」が、id属性値を使う場合には「 #(シャープ)  + id属性値」がセレクタになります。

なお、CSSを記述するときには、すべて「半角英数」で記述する必要がありますので、IMEを停止して記述するようにしたほうが、記述ミスを回避しやすくなります。

子孫セレクタと優先順位
セレクタ1 (半角スペース)セレクタ2{ プロパティ名 : プロパティ値 ; }
em .color_red{font-weight:bold;color:red;}・・・(例文)

このように記述すると、em要素でかつ、class属性値がcolor_redである要素だけに、「太字・文字色赤」を適用できるわけです。

上記のように、CSSを適用させる対象はセレクタで指定するわけですが、これらのセレクタを複数組み合わせることで、より限定した対象を指定することができます。

もし同じ要素に対して、同じプロパティについて複数のCSS指定が行われている場合、基本的には後に記述したものが優先的に適用されます。ここではプロパティ「color」についてid名、要素名、class属性名で、それぞれ指定してみます。

[HTML側の記述]
<div id="left" class="color_red">左段組</div>

[CSS側の記述]
#left{color:blue;}
div{color:yellow;}
.coloe_red{color:red;}

では、このようなHTMLとCSSがあった場合、「左段組」というも文字は、何色になるでしょうか。

上記のとおり「後に記述したものが優先」ならば、class属性で指定した「赤色」になるはずですが、じつは違います。正解は「青」です。

実はセレクタの状態と種類によって、優先順位があるのです。単独のセレクタならば、 一番優先順位の高いのがid属性名 です。次がclass属性名、要素名となっています。

また、複数のセレクタを組み合わせるということで、優先順位を上げることができます。

[HTML側の記述]
<div id="right" class="color_red">右段組ー<span>ブロック1</span></div>

[CSS側の記述]
#right span{color:yellow;}・・・例文1
#right{color:blue;}・・・例文2

[表示結果]
右段組ー ブロック1

例文1のように、セレクタを半角スペースをはさんで複数記述することで、「id属性名rightがついた要素の中に入っている、span要素」という、より対象を絞ったセレクタにすることができます。この場合は、後から記述した例文2よりも優先されて、span要素内の「ブロック1」という文字は、黄色になります。

特にCSSを変更したい部分の要素に親要素があり、それにid属性がつけられている場合は、親要素のid属性名と組み合わせて指定する方が、細かなCSS指定が可能となります。
|新しいページ|検索|ページ一覧|RSS|@ウィキご利用ガイド | 管理者にお問合せ
|ログイン|