上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」からどうぞ。


 今回までで、テンプレートでの「スタイルシートの編集」まで出来るようになりました。
 でも、あと一つだけ重要な問題があります。

困ったことが…

 例えば、「<strong> ~ </strong>」タグに対し、スタイルシートで「赤背景、青ボーダー」なんて設定していると、サイドバーで使われている<strong>タグ部分であろうと、フッターで使われている<strong>タグ部分であろうと、テンプレート内すべてで使われている<strong>タグ部分が「赤背景、青ボーダー」になってしまったりします。
 これでは、綺麗なブログどころか、ごちゃごちゃなブログになってしまいます…

本文部分の<strong>タグ部分だけ「赤背景、青ボーダー」にしたいのに…


特定の場所へ、スタイル指定する


 ここで登場するのが「<div>」タグです。最近のブログやホームページはほとんどのものが、この「<div>」タグを利用して、ブログやホームページのレイアウトをしています。

 例えば、一般的なサイトのテンプレートは…

<div id="conteinar">
コンテナ
<div id="header">
ヘッダー</div>
<div id="main">
メインの本文部分
</div>
<div id="side">
サイドバー
</div>
<div id="header">
フッター</div>
</div>

 こんな感じです。HTML部分は以下のようになっています。

<html>
<head>
<title>面白CSSホームページ</title>
</head>
<body>

<div id="conteinar">
 <div id="header">
 ヘッダーの内容
 </div>
  <div id="main">
  メインの本文部分
  </div>

  <div id="side">
  サイドバーの内容
  </div>
 <div id="footer">
 フッター
 </div>
</div>
</body>
</html>


「id」と言うのは、「class」のお仲間で、ページの1箇所にだけ…特別大事な場所に指定するときに使います。今回は同じと考えていただいて大丈夫です。

■番外編「ID」ってなに?

 ページ内リンクの目印やジャバスクリプトなど、他のプログラムからアクセスするとき、重要な役割を果たします。ブログのテンプレートで「ID」を利用することがあるとすれば、「ページ内リンク」くらいです。

 例えばFC2ブログであれば、「追記リンク」をクリックすると、自動的に追記部分へブラウザがあわせ表示したりするテンプレートが時々ありますよね。
 また。「ページの上部へ」ボタンなども、「ID」で指定してある行へ自動でスクロールします。

 同じIDが2つ以上あると、どのIDに行けばいいのかパソコン側が分からなくなります。なので、ページ一つにつき「同じID名」は一つしか使わないというわけです。「ID名」を変えれば、ID要素自体は1ページに複数配置できます。

 このように「divの箱」をレイアウトしてホームページやブログが形作られているわけです。
 「メインの本文部分」の箱には、記事を書いた時の内容とともに、スタイルで使った「divタグ」や「strongタグ」なんかも入っていると思います。
FC2をはじめ、ほとんどのブログサービスでは、自動的に特定の部分に「記事データ」が挿入される仕組みになっています。
 それにより、違う日に書いた違う記事が、常に同じデザインのテンプレート上に表示される仕組みになっています。


 スタイルシートでは、この「id(class)メインの本文部分」の中に入っている「strongタグ」用の「旗印」を立てることが出来るようになっています。


特定の「箱」内のスタイル適応の仕方

 例えば、「<div id="main"> ~ </div>」内に入っている「<strong> ~ </strong」内の文字は、「赤背景、青ボーダー」にする!…なんて指定する方法は、スタイルシートファイルにこのように記述します。

#main strong {
background:#f00;
border:1px solid #00f;
}

「#main」の「#」は、前回「クラス」で使った「.」と同じ意味で、「id」の時には「#」を、「class」の時には「.」を使います。

 こうしておけば、例えば「<div id="main"> ~ </div>」内と「<div id="side"> ~ </div>」内に「<strong>」タグがあったとしても、「main内に有るstrongタグ限定」でスタイルが当てられるという訳です。


実際に表示確認してみる(編集可)
【HTML】

【CSS】



■次のページはこちらです。
マウスオーバーリンクタグで遊ぶ!

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Sun.03.21.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。