« 春は桜だけではない | メイン | 相互行為とインターフェース »

スタイルのフォーマット [web_design]

更新情報:おすすめCDを3件追加.
「Hobby > 音楽の部屋 > おすすめCD」に3件ほど追加しました.Prokofiev,Lekeuのヴァイオリンソナタ,Beethovenのチェロソナタです.

htmlドキュメントを作るとき,ブラウザの初期値の違いをなくすため「スタイルシートに初期化用の記述を追加しておく」というのがCSSテクニックのひとつとしてよく知られています.例えばh1やh2などのヘッダをfont-weight: normal;にしておけば勝手に太字にされてしまうのを防ぐことができます.

私もこれをよくやるわけですが,最近はだいぶ仕様が固まってきました.いろいろと試行錯誤しつつ,4つか5つウェブサイトを作って,リニューアルも何回か繰り返して,自分なりの作り方が決まってきたかなぁと思っています.悪く言えば幅が狭くなったということなのかもしれませんけどね.ということで唐突ですが,その固まっ(てしまっ)た仕様を書き出してみようと思います.だいたいの場合,下に書き出すコードをformat.cssとか,basics.cssとか言う名前にして読み込ませるようにしています.一番下に全体を載せてあります.あとは,ちょこちょこ解説をくっつけつつ部分ごとに.

まずフォントの設定ですが,Verdanaはアルファベットの読みやすさを考えて設定してます.他のフォントを指定することもありますが,serif体(装飾のひげがついている書体)はあまり好きではないので,Arialなどを使うことが多いです.

@charset "utf-8";
body		{
margin: 0;
padding: 0;
color: #333;
font-size: small;
font-family: 'Verdana', 'MS ゴシック', sans-serif;
}

それからpとddにつけているtext-align: justify;とtext-justify: inter-ideograph;は,文字列を均等割り付けするためのプロパティです.CSS2.0ではサポートされませんが最近のブラウザのほとんどは対応していますし,対応していないとしても表示が崩れるわけではないので害はありません.marginとpaddingの2つはidやclassで別に指定した方が管理しやすいのでここで一括して初期化しています.

p, dd		{
margin: 0;
padding: 0;
text-indent: 1em;
text-align: justify;
text-justify: inter-ideograph;
}

list-style: none;をulだけでなくliにも指定しているのはFirefoxやSafariなどのブラウザに対応させるため.IEではulだけでもよいのですが,他のブラウザの場合は中黒が文字列の内側に表示されてしまうんですね.最初のころはなんでだかまったくわからず首をかしげていました.

ul, li		{
list-style: none;
}

imgはインラインで使う機会があまりないので,display:block;を指定してブロック要素に変換しておきます.それから勝手についてしまう枠線もborder: none;で消しています.

img		{
display: block;
border: none;
}

一番最後にあるのは有名なclearfix.そのまま使うとおかしなことになる場合もあるので適用するクラスを変えたり,IE7では新しく対応したmin-height: 0;(最小の高さを指定できる.逆に最大を指定するときはmax-height.)にしたりして使っています.振り分けには条件付きコメント(<!--[if IE7]><style type="text/css" href="./css/ie7.css" /><![endif]-->など)を使います.スタイルシートが増えるのであんまり好きではないのですが,一度設定してしまえば後は特にいじる必要がないので初期段階でしっかり設計しておくと楽になります.それがなかなか難しいんですけどもね.

div:after		{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

最後に全体.アンカーの設定は基本的なものなので特に解説はいらないですね.だいたい基本色,訪問済み,ホバーの3つを色だけ決めています.

@charset "utf-8";
body		{
margin: 0;
padding: 0;
color: #333;
font-size: small;
font-family: 'Verdana', 'MS ゴシック', sans-serif;
}
p, dd		{
margin: 0;
padding: 0;
text-indent: 1em;
text-align: justify;
text-justify: inter-ideograph;
}
h1, h2, h3, h4, h5	{
font-size: medium;
font-weight: normal;
margin: 0;
padding: 0;
}
img		{
display: block;
border: none;
}
ul, li		{
list-style: none;
}
a:link		{
color: #00f;
}
a:visited		{
color: #800080;
}
a:hover		{
color: #f63;
}
div:after		{
content: ".";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

トラックバック (0)

このエントリーのトラックバックURL: http://dormouse.oops.jp/mtc/mt-tb.cgi/121

(スパム対策として当該エントリへのリンクが含まれないトラックバックを弾いています)

以下の一覧は、このエントリーを参照しています:  スタイルのフォーマット

コメント (0)

コメントを投稿

(コメントは承認制をとっているため,公開されるまで時間がかかる場合があります)


画像の中に見える文字を入力してください。