私のサイトが出来るまで。HTMLとCSS実践編その2

[ Web関係 ]

id属性とclass属性を付加

div要素は使いたくないので、必要に応じて各要素に直接idとclassを付加。私の場合、使い分けが結構適当です。全部classにしてしまった方が適切かもしれません。

どこにid振るかは勘で決定。「id="left"」みたいなことはしていないものの、結局見栄えのためのidなので一緒だと思う。ホントは好ましくありません。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>der Gegenwart</title>
<meta name="author" content="Rusica" />
<link rel="stylesheet" type="text/css" media="screen,tv" href="css/style.css" />
</head>
<body>
<h1>どうでもいい雑記そのXX</h1>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p class="date">200X年X月XX日XX時XX分XX秒</p>
<h2 id="NAVIGATION_HEADING">目次</h2>
<h3 id="MAIN_NAVI_TITLE">メインメニュー</h3>
<ul id="NAVIGATION">
<li id="INFO"><a href="sample.html">サイト情報</a></li>
<li id="NOTE"><a href="sample.html">雑記帳</a></li>
<li id="LINKS"><a href="sample.html">リンク集</a></li>
</ul>
</body>
</html>

CSSを書き始める。まずはデフォルトスタイルの無効化。

下準備が出来たので、CSS書き始めます。

最初にブラウザのデフォルトスタイルを無効化するわけですが、全称セレクタは使わない方向で。フォーム関係のスタイルを再定義するのが面倒です。私が普段使ってるのは以下の通り。

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: none;
    font-weight: inherit;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
    text-align: left;
    vertical-align: baseline;
}
a img, :link img, :visited img {
    border: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}

どっかのサイト（たしか海外の）で見つけて良さ気だったのでそのまま使ってます。これは別ファイルにしておいてimportして使い回す予定。

ページ自体の背景とかの指定

次にページの背景を指定します。今回の14代目スタイルで使った画像は以下の二つ。

html要素とbody要素に指定するCSSは以下の通り。IE6以前だとhtml要素に指定した背景が上手く反映されないけど、読めなくなる訳じゃないからOKでしょ、ってことでスルー。

html{
    color: #404040;
    background-color: #F3F1F0;
    background-image: url(image/14th_style/bg2.gif);
    background-repeat: repeat-y;
    background-position: right;
}

body{
    margin-right: 50px;
    position: relative;
    background-image: url(image/14th_style/bg.gif);
    background-repeat: no-repeat;
    background-position: 95% 20px;
    font-size: 100%;
}

html要素には斜線の画像を指定して右側に配置して縦に繰り返させます。body要素には右マージンを50px確保。html要素に指定した背景画像が見えるようにします。さらに女の子の絵を適当な位置に配置して終了。

ちなみに、body要素の「position: relative」は他の要素を絶対配置するときの基準決めのための指定です。

ま、その2はこんな感じで。待て次回。

2007年5月27日日曜日 10時52分37秒