_ ∠r 了T ヽ
7r- / / ' | | ｜
〃 / / ′ | | |
/,′ | | l | ｜ ｜
＿_ 〈 ヽ‐v'〈 | | l j ｣｀¬ヽ
{Ｌ∠工＿_rヘヽrYﾍ.ヽ 厶- 一 ７＾＼ |
ヾ｢￣lﾆT¬! ヽi> ' ´ ヽ〉 _,-'７ / ヽ |
l| |l二ニrﾊ〈 rベ^ﾊ、/-‐/ / ヘV
lﾍ |l二ニヽﾝr辷くヽ j/ フ / / / ヽ }
l |l二ニ＿上ﾆ-＝──‐'─-､ / / ヽ /
｜ _, イ￣ l ＿ .. -‐¬ Y / ヽ /
|//ヽ | |ヽ | | ヽ / ヽ /｜
ノヽ￣¨ ¬ ∨ | |_〕Ｌ --─ ￣ i、〈rヽ/ |
{r¬ﾚ¬ | rﾍ | ！ ＿ -¬}ﾍ }/ |
. {´＼_j_,ィ^ｰ一| Ｌj ⊥ 二 __辷ニ￣ /ﾘjV_ ＿ j
. ｀7ー--ﾍ | r 1 | | _/＜＿_ ｀ く
. ヽｰ { ｀Ｙ＼／! ﾄ┘| | , ‐T ﾄ､ |
└-ﾍ ﾉイ ｌ ト-､ ⊥ _＿＿jr一¬￣| ｌ| , - ､｜ ＼|
. | | | | ｜｜ |ﾚ- ､-|｜ | l| / ｀ヽl | ヽ
厶-┴,ヘ-､_ | l |! } | | ｜ | /_ ｀ヽｌ | /
／ / ＼ミ=l l l辷'´-┘ j__ 厶/_ ｀ヽｌ | /
／ / 〃⌒ヽ７￣＞‐ ¨ i ￣¬! | /
／ / r{ ／/ | ; ｀ ＜
HTML に CSS を記述する方法とか。外部 CSS や <style> タグとかの使い方の説明です。
なんでイデオンなのかは…たぶん読んでも分かんないと思います。
CSS を定義する
HTML ファイルに CSS を記述する方法について、簡単に説明します。
普通 CSS の本とかだと、こっちが最初にくると思いますが、HTML
知ってる人はこの辺のことはだいたい知ってるだろうと思いますので、あえて最初から外しました。
そんな感じですので、外部 CSS とか <style> タグとかいう言葉を聞いたことがある前提で話を進めます。
外部 CSS
外部 CSS とは、HTML と CSS を別ファイルにしておき、<link> タグや CSS の @import を使って HTML に取り込む方法です。
<link> タグを使う場合はこんな感じです。common.css が取り込む CSS ファイルです。
charset 属性を使って CSS の文字コードを指定することもできますが、個人的には
CSS ファイル中で @charset を使う方が便利だと思うので省略しています。
<head> <link href="common.css" rel="stylesheet" type="text/css"> </head>
@import 使う場合はこんな感じになります。
基本的には <link> タグを使う場合と同じですが、@import
は古いネットスケープでサポートされていないので、それらのブラウザでスタイル定義を無視させるのに使います。
今風に言うと CSS ハックの一種ですが、使ってる人は少ないと思いますので忘れてもらってもいいと思います。
<style type="text/css">
@import url("common.css");
</style>
<style> タグと style 属性
HTML ファイル中に CSS を記述するには、<style> タグか style 属性を使います。
既に外部 CSS の例で使っていますが、
直接スタイル定義を行うには <style> タグを使います。
以下は、<p> タグのスタイルを定義する例です。この定義は文書全体に影響します。
<style type="text/css">
p { margin: 1em 0; line-height: 1.2em; }
</style>
特定のタグのみスタイル定義したいときは、タグに style 属性を付けます。
<p style="color:red">あいうえお</p>
なお、style 属性を使用するときは Content-Style-Type
みたいな話もあります。
Content-Style-Type のデフォルトは text/css なので、CSS
を使う場合は省略しても通常は問題ないでしょう。
(じゃー通常じゃないときっていつよ？って話になると思いますが、例えばブラウザを自作したときとかが通常じゃないときになると思います。)
<meta http-equiv="Content-Style-Type" content="text/css">
id と class 属性
外部 CSS や <style> タグでは、タグ名もしくは
id 属性または class 属性で指定された要素を対象にスタイルを定義することができます。
id 属性に対するスタイルは #ID で、class 属性に対するスタイルは .CLASS
で指定します。
<head>
<style type="text/css">
p { margin: 0.5em 0; line-height: 1.2em; }
#wrapper { padding: 1em; background-color: #cccccc; }
.blue { color: blue; }
</style>
</head>
<body>
<div id="wrapper">
<p>ブルーな気持ち シュッ シュッ</p>
<p class="blue">親戚の子供が今更なんでだろ〜をやっていた時</p>
</div>
</body>
これを表示すると、だいたいこんな感じになります。
<p> タグのスタイルは、class="blue" が指定された <p> タグにも有効です。
ブルーな気持ち シュッ シュッ
親戚の子供が今更なんでだろ〜をやっていた時
このように元のスタイルを上書きすることができるので、Cascading Style Sheet (滝状のスタイルシート) という名前になってます (のはず)。
上書きする場合は、別に id 等の属性が必須な訳ではなく、タグ名に対するスタイルを上書きすることもできます。
あまり役に立ちそうではありませんが、以下の例は最終的に margin-top が
1em、margon-bottom が 0.5em となります。
p { margin: 0.5em 0; line-height: 1.2em; }
p { margin-top: 1em; }
id と class 属性の使い分け
CSS 的視点では id と class 属性の使い分けにそれほどの意味はありません。指定方法が # か . かぐらいの話です。
id と class 属性の違いが問題となるのは、HTML 上の話です。
HTML では同じ id を複数のタグに指定することはできませんが、class
属性は何度でも指定できます。
ページ全体の枠とか、ページを二段組みした際の左と右の段とか、
ページ上に一度しか現れない要素には id を指定します。
逆に複数回現れる要素には class を指定します。
例えば、今ご覧頂いてるページには以下の id を持つ要素があります。
- wrapper
- ページ全体のラッパ要素。
このページではスタイル指定していませんので今のところ無くても構いませんが、チンパン団第426分隊のトップページでは、ブラウザを最大化した際などにコンテンツをセンタリングするために使用しています。
ページのデザインを変える際に無いと困ることが多いので、とりあえず要らないっぽくても付けとく方が無難だと思います。 - header
- ヘッダ。
バナーとパン屑ナビゲーションを含みます。 - content
- メインコンテンツエリア。
ぶっちゃけ、ヘッダとフッタ以外がコンテンツエリアです。 - footer
- フッタ。
著作権表示とかです。
また、以下の class 属性を指定しています。
- sect
- セクション。
<hr>みたいなボーダーを入れてます。 - AA
- AA (アスキーアート)。
AA は消毒だ〜で説明した内容とだいたい一緒です。 - code
- サンプルコードの例示用。
<body> タグと id 属性のスタイルで文書構造を指定し、その他のタグと
class 属性で装飾的スタイルを指定します。
後はコピペするか、適当に中身の無いファイルを作ってテンプレートにすれば、同じデザインのページができあがります。
一般的に配布されているテンプレートも同じような感じです。
他人の作った HTML は以外と使いにくいと感じることも多いので、一回ぐらいテンプレ作りにチャレンジしてみるのもいいと思いますよ。
ちなみに、市販やフリーのテンプレで SEO 対策とか書いてるやつありますが、それって都市伝説ですからーww
と煽るだけなのもあれなんでちゃんと説明しますと、HTML
の中身がぶっ壊れてる場合、確かに検索エンジンは拾ってくれません。例えばこんなのですね。<p> タグが閉じてません。
<p イデオン</p>
このページを検索エンジンがクロールしても、おそらく「イデオン」という単語をページから検出しないでしょう。
<p が閉じていないので、</p> までをタグとみなすからです。
(Google は拾うかもしれませんが、あくまでも例ということで。)
そんな感じなんで、HTML 自体に問題がある場合は SEO どころの話では無い訳です。
SEO 対策してるとか書いてあるテンプレは、こういった問題が無いですよ、とうたっている訳です。
プラスαで HTML 標準に従ってるぐらいの話ですが、Google
は正式に HTML 標準は検索順位に影響しないと言っていましたし
(要出典)、そんなに影響のある話ではありません。
それに「SEO 対策」って何ですか？ SEO スパムされてるページの検索順位を下げるために検索エンジンが行ってることですか？って話もありますが、まあそれはそれって感じでwww
