- 締切済み
2つのリストを横に並べたいのですが
ホームページ作成初心者です。 初歩的な質問ですみません。 ホームページ上のメイン画面に２つのリストを横に並べたいのですが、その方法がわかりません。 ↓例えば以下のような感じ （Ａをはじめよう) （Ｂをはじめよう） ・Ａとは？ ・Ｂとは？ ・Ａの場所 ・Ｂの場所 （Ｃをはじめよう) （Ｄをはじめよう） ・Ｃとは？ ・Ｄとは？ ・Ｃの場所 ・Ｄの場所 ＨＴＭＬとＣＳＳを両方設定することになるのでしょうか？ 具体的にどうやればいいのか教えてください。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
例ですが、たとえばこんな形になります。 HTML部分は名の変哲もない、唯一 id="cotentsTable"で括っているだけです。 こうしておけば、スタイルシートのない携帯でも通じるし、もちろん検索エンジンにもね。 たったこれだけのHTMLでもスタイルシートでカラフルになる。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェック済み。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- div#cotentsTable{ position:static; margin-left:20%; margin-right:20%; width: auto; border: 1px solid red; height: auto; } div#cotentsTable dl{ float:left; width:48%; margin: 4px; border:solid 1px blue; background-color: rgb(200,200,255); } hr{ clear: both; visibility:hidden; margin:0px; } div#cotentsTable dl+dl{ border-color: red; background-color: rgb(255,200,200); } div#cotentsTable dl+dl+dl{ border-color: green; background-color: rgb(200,255,255); } div#cotentsTable dl+dl+dl+dl{ border-color: yellow; background-color: rgb(255,255,200); } --> </style> </head> <body> <h1>テスト</h1> <div id="cotentsTable"> <hr> <dl> <dt>Aを始めよう</dt> <dd>Aとは</dd> <dd>Aの場所</dd> </dl> <dl> <dt>Bを始めよう</dt> <dd>Bとは</dd> <dd>Bの場所</dd> </dl> <dl> <dt>Cを始めよう</dt> <dd>Cとは</dd> <dd>Cの場所</dd> </dl> <dl> <dt>Dを始めよう</dt> <dd>Dとは</dd> <dd>Dの場所</dd> </dl> <hr> </div> </body> </html>
- singlecat
- ベストアンサー率33% (139/418)
TABLEを使って作成するは簡単ですが、SEO対策やメンテナンス性の問題でお勧めできません。 CSSで組み上げる方が良いと思います。
- 参考URL：
- http://css.uka-p.com/
