Blogのテンプレートとかスタイルシートとか その４ [2008年08月20日(水) 22:36]
その３は７月３１日ですってよ！
まぁ、なんというか、間 空きましたね。
今回はblogテンプレートによくでてくるタグの紹介です。
ソースを開くとよく見かける事ができるので、
気になったらじっくりみてみるといいかもしれませんね。
III.舞台そのもの<body>
さて、最初はは<body>です。
特に何するでもないタグですが、表示領域全ての親となるタグです。
まぁ…お行儀悪くこのタグの外に書いても描画はされるんですけどね…。
ただそれはブラウザの実装次第ですので、確実に表示させたいなら<body>の
中に色々書くのがルールとなります。
といっても… このタグほんとなんもせんからなぁ…
そうですね…
例えば、全体の背景色を設定したい場合なんかはこのタグに設定します。
全体の背景画像なんかを設定したい場合もこいつに設定ですね。
画面で基本的に使用するフォントを指定したい場合もこいつですね。
まぁ、こんな感じで、画面表示全体に関わる事の設定を行ったりします。
というか、それ位しかこいつ仕事しません。
他の表示用タグの親になってるというの最大の仕事ですかね。
IV．スタイルシートの手下<div><span>
次は<div>と<span>。
こいつらは特に決まった仕事はもっていません。どちらも、
囲んだ範囲にスタイルシートを適用する為だけに存在します。
<div>と<span>の違う点は、<div>で囲んだ範囲は改行されますが、
<span>で囲んだ範囲は改行されません。
なんというか、<div>はスタイルを適用する為の箱を作り、
<span>は突発的に文字色変えたいとか大きさ変えたいとか、
そいうちょっとした事に使う感じです。
blog本文中で文字の大きさや色を変えている所のソースを開くと
よくわかると思いますが、変えたい部分だけ<span>でくるんであります。
<div>は区画を作るイメージが見えてくると思います。
だからどうした、とか思われそうですが、
以前の記事で紹介したスタイルシートの事前に宣言しておく奴と
組み合わせると、特定の部分の色変えを一元管理したり、
同じ情報を扱う区画は全て同じ描画方法を適用させる…なんていう事が出来ます。
「うーんやっぱりこの種類の情報は黄色より赤だよね…」とか思ったら
事前にその情報をカテゴリ毎に<span>でかこんでスタイルを使用する旨記しておけば
スタイルシートの宣言部をちょっと弄るだけで全ての色が変わります。
一箇所一箇所探して回って全部直すなんて手間は必要ありません。
で、この便利な機能を多用しているのが、blogテンプレートです。
スタイルシートの交換で、各種の描画方法をガラリと変えているわけですね。
スタイルシートの便利さの一端がうかがえるとおもいます。
今日は２つ紹介。
次も２、３つ紹介の予定。
table, a, image あたりかなぁ
まぁ、なんというか、間 空きましたね。
今回はblogテンプレートによくでてくるタグの紹介です。
ソースを開くとよく見かける事ができるので、
気になったらじっくりみてみるといいかもしれませんね。
III.舞台そのもの<body>
さて、最初はは<body>です。
特に何するでもないタグですが、表示領域全ての親となるタグです。
まぁ…お行儀悪くこのタグの外に書いても描画はされるんですけどね…。
ただそれはブラウザの実装次第ですので、確実に表示させたいなら<body>の
中に色々書くのがルールとなります。
といっても… このタグほんとなんもせんからなぁ…
そうですね…
例えば、全体の背景色を設定したい場合なんかはこのタグに設定します。
全体の背景画像なんかを設定したい場合もこいつに設定ですね。
画面で基本的に使用するフォントを指定したい場合もこいつですね。
まぁ、こんな感じで、画面表示全体に関わる事の設定を行ったりします。
というか、それ位しかこいつ仕事しません。
他の表示用タグの親になってるというの最大の仕事ですかね。
IV．スタイルシートの手下<div><span>
次は<div>と<span>。
こいつらは特に決まった仕事はもっていません。どちらも、
囲んだ範囲にスタイルシートを適用する為だけに存在します。
<div>と<span>の違う点は、<div>で囲んだ範囲は改行されますが、
<span>で囲んだ範囲は改行されません。
なんというか、<div>はスタイルを適用する為の箱を作り、
<span>は突発的に文字色変えたいとか大きさ変えたいとか、
そいうちょっとした事に使う感じです。
blog本文中で文字の大きさや色を変えている所のソースを開くと
よくわかると思いますが、変えたい部分だけ<span>でくるんであります。
<div>は区画を作るイメージが見えてくると思います。
だからどうした、とか思われそうですが、
以前の記事で紹介したスタイルシートの事前に宣言しておく奴と
組み合わせると、特定の部分の色変えを一元管理したり、
同じ情報を扱う区画は全て同じ描画方法を適用させる…なんていう事が出来ます。
「うーんやっぱりこの種類の情報は黄色より赤だよね…」とか思ったら
事前にその情報をカテゴリ毎に<span>でかこんでスタイルを使用する旨記しておけば
スタイルシートの宣言部をちょっと弄るだけで全ての色が変わります。
一箇所一箇所探して回って全部直すなんて手間は必要ありません。
で、この便利な機能を多用しているのが、blogテンプレートです。
スタイルシートの交換で、各種の描画方法をガラリと変えているわけですね。
スタイルシートの便利さの一端がうかがえるとおもいます。
今日は２つ紹介。
次も２、３つ紹介の予定。
table, a, image あたりかなぁ