HOMEへ
本HPはhttp://webyoutility.web.fc2.com/に移設しました!(現状7割)

CSS講座

CSS
セレクタ CSSの記述方法
CSSテンプレート

CSSの記述の仕方

■タグに直接記述
最も簡単なCSSの記述方法はHTMLタグに直接埋め込む方法です。
「style」という属性を指定し、そこでCSSの記述を行います。では、具体的な使用方法を見てみましょう。

例1:STRONGタグ内の文字色を赤にする。
<strong style="color:#ff0000">Web@youtility</strong>

【ブラウザ上の表示結果】
Web@youtility
例2:DIVタグ内の背景色を青に、文字色を白にする。
<div style="background:#0000ff;color:#ffffff;">Web@youtility</div>
【ブラウザ上の表示結果】
Web@youtility

以上のように、HTMLタグの作成過程でCSSを追記していけるため容易にCSSが記述できます。
しかし、これを乱用すると、後でデザインを変更したくなったときに全ページを修正しなければならなくなるため CSSのメリットも少なくなってしまいます。
なのでできるかぎりタグに直接記述する事は避け、 idもしくはclassセレクタを指定して外部ファイルに記述するようにしましょう。

HTMLファイルのヘッダーに記述

■HTMLファイルのヘッダーに記述
CSSの記述・2番目の方法は、HTMLファイルのヘッダー(HEADタグ)内に記述する方法です。HTMLのソースを見ると、 最上部に「<head>~</head>」で囲まれた部分があります。ここにはそのページの文字コードの指定やタイトル名などが 記述されていますが、ここにCSSの記述を埋め込むというものです。

実際に指定するには、次のような記述を「<head>~</head>」の間に記載します。

<style type="text/css">
<!--
CSSの指定を記述
-->
</style>

ここで指定されたCSSは、指定したページ内でのみ有効となり、例えば以下の例のように、ヘッダー部分でSPANタグに関する指定を行った場合、 このページのSPANタグには指定が反映され、他のページでは反映されないことになります。

例1:同一ページ内のSPANタグ内の文字を赤・太字にする。
CSSの記述
<html>
<head>
<title>Web@youtility</title>
<style type="text/css">
<!--
span { color:red; font-weight:bold; }
-->
</style>
</head>
<body>
<span>Web@youtility</span>
</body>
</html>
【ブラウザ上の表示結果】
Web@youtility

このようにHEADタグ内にまとめて記述することもできますが、このように記述するくらいなら 外部ファイルに記述してあげた方がHEAD部分の量も少なくでき、無駄な読み込みを避けることができるため、SEO対策的にも良いでしょう

外部ファイルに記述

■外部ファイルに記述
CSSはHTMLファイル内に記述できるだけでなく、別ファイルに作成しそのCSSファイル(拡張子は.css)を読み込んで使用することもできます。
このように外部ファイルから呼び出して使用する方法がロード時間の節約にもなり、Webサイトとしては優良なサイトと言えるでしょう。

CSSファイルの名前を「style-sheet.css」、CSSファイルに「文字を赤くし、左側に5pxのオレンジの罫線を引く」という指定を例に、実際の記述を表すと以下のようになります。

1:HTML-HEAD部分への記述
<link rel=stylesheet type="text/css" href="style-sheet.css">
2:HTMLタグへの記述
<div class="selecter">Web@youtility</div>
3:外部ファイルへの記述(文字色を赤、左に5pxのボーダーを指定)
.selecter { color:#ff0000; border-left:solid 5px #ff9900; }
【ブラウザ上の表示結果】
Web@youtility

CSSの指定を外部ファイルに記述することで、これまでHTMLや直接記述などで行っていた指定部分の記述が大幅にカットされ、 HTMLファイルの軽量化、表示速度の向上を図ることができます。
また、無駄な記述が減少するためSEO対策にも好影響を及ぼす効果的な記述方法です。
そのためWebサイトを構築する際には、できるかぎるこの外部ファイルに記述する方法をとることが望ましいでしょう。

METAタグの記述

■METAタグの記述
CSSを利用する場合、HTMLファイルのHEAD部に次のMETAタグを記述することが推奨されています。
<META http-equiv="Content-Style-Type" content="text/css">
これはスタイルシート(CSS)を利用する場合のベースとなるスタイル言語を指定するもので、記述がなくても指定は反映されますが、 HTMLの文法上記載すべきとされているものであり、CSSを利用する際は必ず記述するようにしましょう。

また、Javascript使用時に記述するMETAタグも記述しておきましょう。
<META http-equiv="Content-Script-Type" content="text/javascript">
Javascriptなんて使ってないと思われる方もGoogle AdSence など使用している方はJavascriptにより出力されていますので、HTML内にJavaScriptの記述内容があるかもしれません。 ホームページを利用して広告収入を得たいとお考えの方は、後々「Google AdSence」を設置した際に追記するのは手間がかかる作業ですので あらかじめ記述しておくことをお勧め致します。

 

SEO [PR] !uO z[y[WJ Cu