HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

贈り物に頭を悩ませている方へお薦め〔リンベルの上質カタログギフト [PR]

● スタイル設定

HTMLの使用目的は タイトルや段落、箇条書き、表、フレームなどのページ構造や、画像の表示、ページとページのつながりであるリンクなど 『文字に対してに意味付けを行う』ためのものです。
しかし、それだけのページでは味気ない物になてしまいます。 そこで、『ウェブページを装飾するため』に、HTML内に『スタイルシート(CSS)(Cascading Style Sheet)を記述します。

・スタイルの記述の方法

スタイルの記述する方法には主に三つの方法があります。

・タグに埋め込み直接設定する方法

<P style="font-size:1.5em ; font-style:italic">

この方法は、装飾したい記事に直接スタイルを記述すればよいので、わかりやすいと思いますが、 一方で、記述量が従来のHTML要素より多くなり面倒で、CSSを使うメリットが少なくなります。
具体的な方法は『style』属性に属性値として、スタイルプロパティとその値を設定します。 (複数のスタイルを設定する場合はセミコロン『;』で区切ります。) これにより設定できる範囲は、『style』属性を記述した要素内だけです。
上の記述では<P>タグ内に記述されているので、</P>でタグが閉じられるまでそのスタイルが反映されます。
なお、特に要素を必要とせずにスタイルを設定するために『<DIV>』や 『<SPAN>』というタグが用意されています。

・ページの全体のスタイルを一括で設定する方法

<STYLE type=text/css >
<!--
H1{font-size:1.5em ; color:maroon}
.heading{font-size:1.2em ; font-weight:bold ; font-style:italic}
P.stro{font-size:1.2em ; font-weight:bold ; color:red}
-->
</STYLE>
のように記述する

この方法は、同じ記述を繰り返さずにすみむだけで、上と基本的には代わりありません。
ただし一括で管理するため、スタイルを変更したいとき、この記述したプロパティの値を書き直せば、 設定先のスタイルを一括して変更できるので非常に便利になります。
HTMLファイル内に記述するときは、スタイル設定を記述していることを示すために、
<STYLE type=text/css >
<!--
と、
-->
</STYLE>
で、記述を囲みます。
<!--と、-->はコメントアウトの指示で、コレに囲まれた記述はブラウザには表示されません。
こうしておくことで、スタイル設定に未対応なブラウザがページを表示しても、 スタイル設定が表示されてしまうことが無くなります。
記述は、『設定する要素』と、ドット『.』を付けてその後ろに 『識別子』を記述するか、又は、その片方を記述します。 そのあとに続けて、中かっこ『{』と『}』で囲ってスタイルを記述します。 (複数のスタイルを設定する場合はセミコロン『;』で区切ります。)

・別のファイルでスタイルを設定し、複数のファイルにスタイルを一括で設定する方法

<LINK href="style.css" rel="stylesheet" type="text/css">
ヘッダー部分にこの一文を記述します。これはスタイルを記述しているファイルを設定しています。

この方法はヘッダへの記述を別ファイルに持っていきサイト全体でスタイル設定を共有する物です。 ヘッダへの記述同様、同じ記述を繰り返さずにすみ、スタイルを一括して管理できます。
href="style.css"』で記述されているファイル内に、 ヘッダに記述したのと同じようにスタイルを記述します。
拡張子は慣習的に『.css』になっていますが、特に決まりはありません。

これら3つの方法は併用できますので、うまく使い分け効率よくページを作成していけます。

・スタイルの管理

H1{font-size:1.5em ; color:maroon}
.heading{font-size:1.2em ; font-weight:bold ; font-style:italic}
P.stro{font-size:1.2em ; font-weight:bold ; color:red}

この例だとH1要素は常に通常文字の1.5倍で茶色の文字となり、 <SPAN class="heading"> のように『class="heading"』を記述されたタグ内の記事は1.2倍の斜体で太文字に成ります。
そして、P要素で、『class="stro"』を記述されたタグ内は記事は1.2倍の赤い太文字に成ります。

この時使用している『class』とは、スタイルを部類分けするための識別子で、 スタイル設定時にドット『.』の後に記述された文字です。
スタイルは『要素』とこの『class』属性による識別子によって管理されます。
要素のみで分類されたスタイルは、その要素すべてに設定され、
識別子のみを与えられたスタイルは『class』属性でその識別子が与えられた要素に設定されます。
その両方が与えられたスタイルはその両方が一致しなければ適用されません。

なお、『class』属性にはスペースで区切って列挙することで、一つの要素に複数の識別子を与えられます。

class』と全く同じで用途で使用できるid』という属性があります。
ただし、スタイル設定時にドット『.』の代りに、ハッシュマーク『#』を使用します。

H1{font-size:1.5em ; color:maroon} #heading{font-size:1.2em ; font-weight:bold ; font-style:italic} P#stro{font-size:1.2em ; font-weight:bold ; color:red}

このように記述されたスタイルは、 <P id=heading>のようにして使用します。
実際にはそうなっていないようですが、 IDで設定される先はページ中に1ヵ所(同時に出力されない状態)でなければ成らないとされています。 IDってそういう物ですよね。

・実際の使用例

例えばH1要素は文字が大きすぎるという問題を感じるなら、 H1すべてに文字の大きさを設定する方法をとると良いでしょう。 H1〜H6要素すべてに同じスタイルを設定したければ、 カンマ『,』を利用して一括設定することも可能です。

H1,H2,H3,H4 {color:#0000FF ; font-size:9pt}

A要素に関しても、リンクの装飾が多様に変わると閲覧者が混乱するので、 一括でスタイル設定する方法が良いでしょう。
それ以外に関しては要所要所でclassを使ってスタイル設定できるようにしておくと便利かと思います。
なお、『/*』と『*/』で囲まれた文字はコメントアウトとして認識されないので、 スタイルの利用方法などをメモしておくと良いでしょう。

.stro{font-size:1.2em ; font-weight:bold}/*強調表示*/
.small{font-size:0.8em ; line-height:0.9em }/*小さい文字*/
.note{font-size:1.1em ; color:gray}/*メモ*/

<<前へ  |上へ|  次へ>>
1234567891011121314151617

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09