スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Blogのテンプレートとかスタイルシートとか その3

昨日の続き。
昨日はheader領域について話しましたが、今日は昨日出てきた
<style>についてです。

II.デザインの鋳型 <style>
今迄はテンプレートやらスタイルシートやらとは余り関係ない話でしたが、
今日のはタイトルにあげられたうちの1つ、スタイルシートの話です。
このタグはスタイルシートという視覚効果についての指定をする領域を作成します。

スタイルシート、といっても難しいものではないです。
主な仕事は以下の通り。

・指定したタグ全てに適用される視覚効果を設定する。
・特定のタグのみで使いたい時に使える視覚効果を宣言する。
・どのタグでも使いたい時に使える視覚効果を宣言する。
こんな所ですかね。

1つ目の出番は余り無いです。
というのは、これをしてしまうとのべつ幕なし同名のタグ全てに適用されるので、
ちょっと使いづらいってのがあるんですね。
ですから、特に出現回数が少ないタグや、本人の趣味で決め打ち的に設定するもの
以外ではあまり使いません。

どちらかというと、2・3番目がメインですね。
これらは、ここで「こういう風に画面に出したいな」という宣言だけをしておいて
実際にそれを使うかどうか、いつ使うかは書き手に委ねられます。
この「こういう風に…」というのはそれぞれ名前をつけて保存しておき、
使いたい時に、その名前でもってその内容を呼び出せます。
設計図だけ作っておく感じですかね?

例えばスタイルシートの書き方はこんな感じ。
<style type="text/css">
body {
  background-color:#EEEEEE;
}

td.blueline {
  border:solid 1 Blue;
  background-color:#DDAAFF;
}

.Memo {
  font-size:10px;
  color:Black;
}
</style>

ちょっと色を換えてみました。上から順番に…
・指定したタグ全てに設定
・特定のタグで使える宣言
・どのタグでも使える宣言
となります。

指定したタグ全てに設定を行いたい場合、そのタグの名前に続いて、
{}の中に色々宣言を書き込んでいきます。
ちなみに、これは"背景色は凄い明るい灰色にしろ"と指定しています。

特定のタグで使える宣言を行う場合、そのタグ名に続いて、
"."を書き、続いて任意の名前を書きます。
どういう用途に使いたいかを意識して名前をつけるとよいでしょう。
ちなみに、ここではtdタグを使用する際、bluelineという名前で機能を呼び出した時、
"tdのきわに1ドットの青い実線を引け"、"背景色はこんな色にしろ"と いう宣言しています。

どのタグでも使える宣言を行う場合、タグ名がない状態で、
真ん中と同じ書式で包んであげればよいです。
ちなみに、ここでは、Memoという名前を使用した時、
"フォントの大きさを10ドットにしろ"、"フォントの色は黒にしろ"と宣言しています。

こんな感じで、{}の中に自分が表示したい視覚効果をつらつら書いていきます。

使う時はというと、<td class="blueline">とか、<span class="Memo">といった感じで、
タグ名よりも右でclass="つけた名前"と記入してあげれば、
事前に宣言しておいた視覚効果が適用されます。
ちなみに、このスタイルシート、その時々のタグで突発的に指定する事もできるので
ほとんど皆と同じ効果なんだけど、一部分だけちょっと手を加えたいんだよなァ…
なんてニーズにも対応可能です。

ここで指定、宣言できる視覚効果は実に多彩で、
横幅/縦幅の指定、自分の周囲の空白領域、自分の内側の空白領域、境界線の形/色/太さ、
文字のサイズ、背景の色/画像/画像の並べ方、等など… 色々な指定ができます。
中には普通のタグを描いただけでは実現できない効果なんかもあるので、
こった画面にしようと思うとどうしても避けられない所であり、
少し覚えただけでも色々な効果を発揮できる、触っていて楽しい所でもあります。

というわけで、とりあえず、フリースキンモードにして、
スタイルシートを少しずつ触ってみながら、ここを弄ると画面がこう変わる…
みたいのを自分で体験してみましょう。
数値の部分を弄るだけでもなかなか楽しいですよ。


今日はこれでおしまい。
そしてheadタグの子供の話もこれでおしまい。
Blogテンプレート弄るに当って、headの子供のうちで重要なのはこれ位ですからね。
スポンサーサイト
プロフィール

神琳楓雅

Author:神琳楓雅
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。