dl要素でテーブルのような見た目を表現する

dl要素(定義リスト)は語句・内容と対応するため、色々な場面で応用できます。新着情報とか、フォームとか。

このdl要素をテーブルの見た目のように扱うCSSです。サンプルファイルも用意しています。

ソースなど

HTMLの生書き状態

これを、テーブルみたいに見せるべく…

表現したい装飾

HTMLソース

<dl>
<dt>kotaログ</dt>
<dd>MacやWeb制作に関しての話題。</dd>
<dt>仙グル</dt>
<dd>仙台のおすすめ居酒屋 (角ハイボール・日本酒)、ランチなどをレビューするグルメブログです。<br />
よくサントリーさんともコラボしています。</dd>
<dd>毎日更新、ぜひ見て下さい。</dd>
</dl>

CSS

dl,dt,dd {
 margin: 0;
 padding: 0;
}
dl {
 background-color: #333;
 border: 1px solid #999;
 border-top: none;
 width: 450px;
}
dt {
 color: #ccc;
 width: 7em;
 padding: 0.5em 0 0.5em 1em;
 border-top: 1px solid #999;
 float: left;
}
dd {
 background-color: #FFF;
 margin: 0 0 0 7em;
 padding: 0.5em 1em 0.5em 1em;
 border-top: 1px solid #999;
 border-left: 1px solid #999;
}

お好み、サイトに合わせて調整して下さい。

サンプルファイル

サンプルファイルをダウンロード

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。

    CAPTCHA


    ABOUTこの記事をかいた人

    株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。