スタイルシートの技

指定した部分の上にマウスが乗った時のカーソルを変更したい （Internet Explorer 4.0~）

dl要素はリストを作成する要素で、dt/ddを包括します。 dtは「definition term」でddは「definition discription」を示し、 例えば、英単語とその意味など1対1関係のデータなどに良く使われます。 dtとddは交互に使う必要はありません。

<dl>
   <dt>HTML</dt>
      <dd>Hyper Text Markup Language</dd>
   <dt>XHTML</dt>
      <dd>Extensible Hyper Text Markup Language</dd>
   <dt>CSS</dt>
      <dd>Cascading Style Sheet</dd>
</dl>
HTML
Hyper Text Markup Language
XHTML
Extensible Hyper Text Markup Language
CSS
Cascading Style Sheet

このdt/ddを使うと日記を作成する事ができます。 dtに日付、ddに日記の内容を記述します。 デザインはスタイルシートに任せると非常に管理がラクになりますし、 HTMLのテキスト容量も削減できて一石二鳥です。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>日記</title>
   <style type="text/css">
      dt
      {
         font-weight: bold;
         border-bottom: solid 1px #cccccc;
         color: #999999;
         margin-top: 1em;
      }
      
      dd
      {
         border: solid 1px #cccccc;
         padding: 1em;
         margin-left: 0em;
         margin-top: 0.5em;
      }
   </style>
</head>
<body>
   <h1>日記</h1>
   <dl>
      <dt>2007年1月1日</dt>
         <dd>ここに2007年1月1日の日記の内容を書きます。</dd>
      <dt>2007年1月2日</dt>
         <dd>ここに2007年1月2日の日記の内容を書きます。</dd>
      <dt>2007年1月3日</dt>
         <dd>ここに2007年1月3日の日記の内容を書きます。</dd>
   </dl>
</body>
</html>
2007年1月1日
ここに2007年1月1日の日記の内容を書きます。
2007年1月2日
ここに2007年1月2日の日記の内容を書きます。
2007年1月3日
ここに2007年1月3日の日記の内容を書きます。

dd要素は基本的にdt要素に比べて3文字分程度インデントされた状態でブラウザで表示されるようになっています。 これはブラウザ側が「dd { margin-left: 3em; }」のような定義がデフォルトでされているからです。 つまり、これをこちら側で強制的に「margin-left: 0em;」として情報を書き換える事によって左端を合わせています。 これだけで随分変わるものですね。ちょっと灰色系でシックに決めてみたいのでしたら、 次のようなものはどうでしょうか？

dt
{
    background-color: #666666;
    color: #ffffff;
    margin-top: 1em;
    padding-left: 0.5em;
    font-weight: bold;
}
dd
{
   margin-top: 0.5em;
    
}
2007年1月1日
ここに2007年1月1日の日記の内容を書きます。
2007年1月2日
ここに2007年1月2日の日記の内容を書きます。
2007年1月3日
ここに2007年1月3日の日記の内容を書きます。

これを応用すればblogの日記のようなものを作れるようになります。 今は画像を使っていないので無味乾燥なデザインですが、 もう少し工夫してクールにしてみましょう。

background2.gif
サンプル画像 
dt
{
    text-align: right;
    color: #ffff00;
    font-weight: bold;
    font-size: 11px;
    margin-top: 1em;
    padding-left: 0.5em;
    position: relative;
    top: 2em;
    left: -1em;
}

dd
{
   color: #ffffff;
   margin-top: 0em;
   margin-left: 0em;
   background-image: url('background2.gif');
   padding: 2em 1em 1em 1em;
}
2007.01.01
ここに2007年1月1日の日記の内容を書きます。
2007.01.02
ここに2007年1月2日の日記の内容を書きます。
2007.01.03
ここに2007年1月3日の日記の内容を書きます。

順番に見ていきます。dt要素のスタイルシートなのですが、 「text-align」で文字列群を右寄せにしています。 「position」というのがありますが、これは初期位置から座標とずらしたりできる大変便利なスタイルシートです。 「position: relative;」で現在指定したタグのある座標を(0,0)とした時の相対座標を指定する事ができます。 逆に「position: absolute;」とすれば、ウィンドウ上の絶対座標になります。 つまりこの場合は、元々存在すべきdtの座標を(0,0)とすると、 「(2em, -1em)という座標に配置して下さい。」 という命令を送っているの事になります。こうすると、y座標は-1emですので、 dd要素の領域内に入り込んでいます。試しに「1em, 0em, -1em, -2em」と変えてみて動作を確認すれば良く分かります。

どうですか？これはまだまだほんの一例で今まで紹介してきたものと併用すれば、 色々なデザインの日記が可能となります。テーブルで日ごとにデザインするのはかなり面倒ですし、 アクセシビリティの観点からあまりよろしくないと思われます。参考になれば幸いです。

top