Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） - スタイルシート 定番テクニック集 - （3）dlを使った表の作り方
|
初心者webデザイナーさんのための、ホームページ制作無料講座です。Dreamweaver8を使ったXHTML＋CSSコーディングの方法を紹介します。
スタイルシート初心者の方に役立つように作ってみました。
※Adobe® Dreamweaver® はAdobe Systems Incorporated（アドビ システムズ社）の商標です。
|
（3）dlを使った表の作り方
|
4分22秒
 |
|
|
|
|
Tweet |
|
|
解説
スタイルシートを使ったwebデザインのテクニック、今回はdlを使っての見た目「表組」の作り方。 web標準でのHTMLの作り方が前提での話です。 見出しと本文がセットになった表組みは「表」なのでもちろんテーブルを使ってもいいわけですが dl要素を使うことで、テーブルタグで制御するより管理が簡単になる場合もあります。（ソースが簡潔・更新しやすい・プログラムを組み込みやすい・携帯対応可能・デザインの制御も楽。あ、いいことだらけですね＾＾） dlは、定義リストのためのタグなので、使い方も合っているように思えます。 動画の中で出てくる「デフォルトのスタイル」とその初期化の話は、 いろんなブログで紹介されているので、よくわからない方は「CSS 初期化」などの言葉で検索してみてください。 初心者が陥りそうなCSSの7の間違い ↑ここの１番でも触れられています。 もうひとつのテクニックとして、 ddの位置ですが、margin-topを一行分マイナス指定していることで dtと見た目の行を揃えています。 ＊＊＊＊＊ 最近作った大阪のポータルサイトです。 京橋タウンガイド ここで、今回紹介した方法で、求人情報の表組みを作っています。 講師・インストラクター パート・アルバイトの求人情報 ＊＊＊＊＊ このサイトはxoopsで構築しました。 地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。 URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。 xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。 デザイン：webの森 協力／xoopsシステム構築：A-XYZ |
 |
|
カテゴリー内最新記事
マニュアル カテゴリ一覧
マニュアル エントリ一覧