ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1904-01-01草稿「どんなセレクタにすればいいのかを調べ

どんなセレクタにすればいいのかを調べる

スタイルシートでどこかを変えたいと思ったとき、どこを変えたらいいのか、つまりなんていうセレクタにすればいいのかが、最初の問題です。でもここをクリアすれば、ほとんど自分でスタイルシートを使えるようになるでしょう。このページが最大の山だと思います。

ごぞんじのとおり、パソコンではアイコンをひとつ動かすにしても、どのアイコンかをクリックして教えてやらなきゃいけませんし、文字を消去するにしても、どこからどこまでを消すのかドラッグしてやらなきゃいけません。範囲指定をしないとちょっとしたこともやってくれないし、間違えると違うことをしちゃいます。ぜんっぜん融通がききません。この、冷血っ!

けれど命令に忠実な、かわいいやつでもあります。パソコンへの愛憎はさておき、そこで「セレクタ」が登場します。これはスタイルシート用語で、“選択対象”を表す部分です(応用編「スタイルシートの書き方」)。

セレクタにできるのは主にHTMLの「要素」と「クラス」、またその組み合わせです。「そこよ!そこを変えるの〜!soko wo!」とか書いても無視されます。ちょっと要素からもう一度ご説明しましょう。

日記の「要素」

要素とは前述の通り、HTMLでいうところのページの構成要素であり、具体的にはタグで示された部分です。HTMLの要素の種類はいっぱいありますが、はてなダイアリーはタグを書かずに更新できるのでなかなか覚える機会に恵まれません。でもスタイルシートを適用させるために最低限知っておかないといけないので少しご紹介します。

なにもタグを書かずに(簡易記法も使わず)日記を更新しているとき、日記の表示部分を構成する要素は以下の通りです。そんなに多くの種類はありません。

body
ページの表示内容全体です。ページに表示させたい内容をbodyタグで囲みますが、はてなダイアリーを使っているときに自分で書くことはないでしょう。背景に画像を表示するときに利用しました。
a
「a」は「anchor」、錨(いかり)の意味があります。リンクの始点と終点を表します。キーワードリンクもこれです。
p
「p」は「paragraph」、「段落」のこと。はてなダイアリーでは編集画面で改行すると、自動的に前後がp要素になります(pタグで囲まれる)。
br
「br」は「line break」、「改行」です。brタグははてなダイアリーではあまり使わないタグかもしれません。編集画面で3回以上連続で改行キーを押すと挿入されます。
img
「img」は「image」、「画像」です。<img src="画像のアドレス" alt="画像が表示されないときの代替文">という書き方で画像を配置します。はてなダイアリーで普通に画像登録した画像は、<img src="画像のアドレス" tittle="画像のタイトル">となってます。
h1〜h3
「h」は「Heading level」、「見出しレベル」です。h1が日記タイトルで、その日ごとのタイトルがh2、『*』で作る記事の見出しがh3になります。タグを書けばh要素は1〜6までのレベルを使えます。
span
「span」とはズバリ「範囲」のこと。文章中(インライン)でここからここまでといったかんじに、ひとつのまとまりを作るためのタグです。囲むことに意義があり、このタグ自体に意味はありません。囲んだ部分にスタイルを指定していくなど、範囲を決めるための要素です。
div
「div」は「division」、「区分」です。前後で改行される段落のような、ひとつのまとまり(ブロック)を作るためのタグです。これもspan要素同様、ページ内での役割を表すような意味はなく、囲んで範囲を決めることに意義があります。

背景の色を変えてみようで「body」をセレクタにしたように、これらの要素はそのままセレクタにできます。けれど、「ここを変えたいな」と思う部分はたいていもっと細かいでしょう。そこにはもうひとつ細かい名前がついているのです。

「要素」を細かく区別するのが「クラス」

要素だけじゃ大ざっぱだという話。ためしにスタイルシートで『div {border: 2px solid gray;}』と指定してみます。すべてのdiv要素に「グレーの枠線」がつきます。ちょっとやってみましょう。

(日記のあちこちに枠線が現れて非常に見づらいの図)

というかんじになります。「全てのdiv要素に同じ指定」をすればこうなっちゃうわけです。だから『div』という要素そのものをセレクタにするのはあんまりうまい方法ではありません。

ブラウザで日記のソースを見るとわかるのですが(補足:ソースの見方)、divタグの中には『class="day"』や『class="body"』のような文字列が書かれています。

これは「クラス」というものを表すコードです。「クラス」は同じ要素を区別するためにつける名前だと考えるとわかりやすいでしょう。(名前づけといえばidっていうのがあるんですが、ここでは飛ばします)

要素にクラス名をつけるには上のように、タグの中に<要素名 class="適当なアルファベットと英数字">と書きます。HTMLを自分で書く場合なら、勝手にクラス名を決めていくことができるのですが、はてなダイアリーでは最初からあちこちのクラス名が決まっています。すでにいろんなdiv要素を区別するための名前が「day」「body」「section」という具合についているのです。

クラスをスタイルシートで表すための記法は「.クラス名」という具合にピリオドの後にクラス名を書きます。

HTMLで<div class="body">〜</div>の部分になにかを指定するとき ………… div.body {〜}

HTMLで<div class="day">〜</div>の部分になにかを指定するとき ………… div.day {〜}

という書き方になります。「要素+クラス」のセレクタにそれぞれ別の指定をしていくと、テーマのようなデザイン性の高い指定が可能になっていきます。

例えば、はてなのデフォルトテーマ(hatena.css)には以下のような指定があります。

div.comment {
	font-size: 90%;
	line-height: 1.5;
}

これは『div要素のcommentクラスは、文字の大きさが90%、行の高さが文字の高さの1.5倍』という指定です。コメント関係のまとまりの部分ですね。

「div.body」には、いろんな指定がしてあります。はてなダイアリー - 1日分のHTMLテンプレートの構造でいうと<div class="body">〜</div>の部分、つまり日記の本文を囲む青い枠線のある部分です。

div.body {           ←div要素のbodyクラスは
	font-size: 90%;       ←フォントサイズが90%
	border: #5279e7 1px solid; ←枠線が幅1ピクセルの実線で色は#5279e7
	margin-top: 0px;      ←上の物との間隔は0ピクセル
	margin-bottom: 0px;    ←下の物との間隔は0ピクセル
	padding: 3px 10px 3px 10px;←内容物との間隔は上下3ピクセル左右10ピクセル
	line-height: 1.5;      ←行の高さは文字の高さの1.5倍
}

要素+クラスでできたセレクタの意味、おわかりでしょうか。これで山はほとんど越えました。「それがわかってもまだ指定できないし…」と思われるかもしれませんが、その要素に指定できるプロパティを調べて「値」を入れていく作業は、ただ調べるだけです。どこに指定すればいいかがわかれば、もう人に聞かなくてもだいたいわかるレベル、勝ったも同然なのです(わーい)。

セレクタ探し

たとえば書影のための省略記法を使ってAmazon.co.jp オリジナルブックカバー(文庫サイズ)画像を表示したとき、この画像に黒い枠線をつけたい、だからセレクタを知りたいなと思ったらブラウザでソースを見ます。(表示メニュー>ソースを表示、とか、右クリック>ソースの表示とか)

<img 〜中略〜 class="asin">

と書かれていました。imgタグでclassがasinだから、じゃあセレクタは『img.asin』にすればいいな、とわかります。

セレクタがわかれば次にプロパティです。とほほのスタイルシート入門のようなプロパティ集を見ておいて、枠線は『border』プロパティだな、と調べまして、値の書き方が書いてあるので

img.asin {border : 1px solid black;} /*img要素のasinクラスは、枠線が1ピクセルで実線で色は黒*/

みたいに指定できるという手順です。プロパティの種類は覚えていくしかないんですが、だんだん覚えちゃうと思います。

クラスだけのセレクタ

もうちょっとだけ、セレクタの決まりをやります。クラスの部分だけでもセレクタにできます。例えばいろんな要素、p要素にもdiv要素にも「abc」というクラス名がついているとき、『.abc {〜〜:〜〜;}』という指定で、abcクラスの要素すべてに指定が適用されます。

『a.keyword』の「keyword」などはa要素以外に使われていないので、aを省略できるということでもあります。が、要素の種類によって使えないプロパティもありますし、「要素+クラス」で指定しておく方が、あとあとどの部分であるかわかりやすいかもしれません。

「要素」の中の「要素」を指定するとき

Hatenaテーマ(hatena.css)などを見ていると、『div.section p』とか『div.comment p』のように、半角スペースを1個はさんで要素がふたつ並んでいるセレクタを見かけます。

これは「div.sectionの中のp要素」「div.commentの中のp要素」ということです。

日記で言えば「記事」の「段落」と、「コメント」の「段落」の見栄えをそれぞれ指定しているのです。

『要素(クラス)』+『半角スペース』+『要素(クラス)』という書き方で、『この部分の中のこの部分』というふうに場所を絞り込んで書かれています。

細かい指定の例です。calendar2モジュールで、カレンダーの見終わった日付の色を#99cc99にしたいときは(参考:calendar2モジュールのクラス一覧

td.calendar-day a:visited { color: #99cc99 ;}

となります。場合によってはもっと要素やクラスを重ねたセレクタが登場するかもしれません。

まとめ

さあどうでしょう?ちょっと急ぎ足だったでしょうか、それともだらだら長かったでしょうか。

はてなダイアリーのテーマで使われているセレクタの多くは「はてなダイアリーガイド「CSSセレクタ」」というガイド資料の中にあります。ここで探せないものについては、日記のソースを直接読んでみたり、テーマを使っているときはテーマのCSSファイル(http://d.hatena.ne.jp/theme/テーマ名小文字で/テーマ名小文字で.css)を見ることで探せるでしょう。

ええと、あと、日記のレイアウト関係(サイドバーの配置とか)は指定の相互関係を把握しないとグチャグチャになるので、もうちょっと複雑です。また次の機会ということで……。

 | 

ホームページ制作