Q&A
回答はしていますが、「この内容だけで良し悪しは判断できない」というのが実際のところです。
根本的な話をすれば「幅固定の３カラムレイアウト」ということ自体が「古い」とも言えるし、「そういう要件」なら「それでいい」となります。
レスポンシブもしたいのか、どのようなコンテンツになるのか、そういうところまで含めて判断する必要があるので、質問本文に追記してください。
HTML、CSSの学習中です。
一応、意図しいたレイアウトは出来たのですが、果たして私の書いたHTML、CSSのコードが
良いものなのか、合っているのか、修正すべき箇所があるのか分からないため、
ご意見、アドバイスをいただけれえばと思います。
HTML
1<!-- 2 3カラムレイアウト 3--> 4 5<!DOCTYPE html> 6<html lang="en"> 7 8<head> 9 <meta charset="UTF-8"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <link rel="stylesheet" href="sample_20201023b.css"> 12 <title>Document</title> 13</head> 14 15<body> 16 <div class="header"> 17 header 18 </div> 19 20 <div class="main-wrap"> 21 <div class="left-side"> 22 left-side 23 </div> 24 25 <div class="main"> 26 main 27 </div> 28 29 <div class="right-side"> 30 right-side 31 </div> 32 </div> 33 34 <div class="footer"> 35 footer 36 </div> 37 38</body> 39 40</html>
CSS
1/* 2 3カラムレイアウト 3*/ 4 5body{ 6 7 margin: 0; 8} 9 10.header{ 11 background-color: thistle; 12 width: 960px; 13 height: 80px; 14 15} 16 17.main-wrap{ 18 width: 960px; 19 20} 21 22.left-side{ 23 width: 200px; 24 height: 500px; 25 background-color: violet; 26 float: left; 27 28} 29 30.main{ 31 width: 560px; 32 height: 500px; 33 background-color: tomato; 34 float: left; 35 36 37} 38 39.right-side{ 40 width: 200px; 41 height: 500px; 42 background-color: violet; 43 float: left; 44 45} 46 47.footer{ 48 background-color: turquoise; 49 width: 960px; 50 height: 80px; 51 clear: left; 52 53}
回答4件
0
フロートレイアウトはレガシー（負の遺産）です。
IE10をターゲットブラウザにするならともかく、2020年に採用すべきではない、と考えています。
グリッドレイアウト、あるいはフレックスレイアウトを検討することをおすすめします。
投稿2020/10/23 02:13
総合スコア36960
0
枠を組んだだけで良し悪しを判断するのは早計かと思います。
要件通りに組めて、実際のコンテンツが収まるかどうかのほうが大事です。
実際のレイアウト次第で変わることも変えることも起きえます。
「要件」は結局作る人が決めるものなので、他者には何とも言えません。
投稿2020/10/23 01:25
編集2020/10/23 02:17総合スコア80875
低評価された方はコメントください。
きちんと指摘できないならやめてください。
失礼ながら、高評価という回答ではないと思うのですが、低評価される理由もないので打ち消しときました。
回答の内容としては正論ですが、結果的にフロートレイアウトを初期段階で回避できることになるなら、質問者にとっては有益な質問であったかもしれませんね。
floatでやりたいならそれはそれで頑張ってもらっていいのかなとは思ってます。
レスポンシブしたいとか、要件がまだあれば良いのですけど、単に３カラム組みたいなら現状でも悪いとまで言えませんし。
「これでいいか？」という質問なので、「これだけじゃ判断できない」と。質問への追記修正依頼で先に聞いたほうが良かったかもしれませんね。あっちにも書いときます。
0
<div class="header"> <div class="footer"> <div class="main"> などは、現在ならHTML5で追加された <header> <footer> <main> タグを使う方がいいでしょう。
<div class="left-side"> <div class="right-side"> も <aside>タグにするといいでしょう。
レイアウトはFlexbox か Grid を使うのがお勧めです。
全体の幅は固定値にせずに、max-width で最大幅のみ決めて、中央寄せにするといいと思います。
上記の方針で修正したサンプルをさくっと作成してみました。（よくあるレイアウトです。）
あとは、メディアクエリを使って、スマホサイズになったら1カラムレイアウトになるようにするといいと思います。
投稿2020/10/23 02:35
総合スコア34075
0
- 左、中、右のfloatは良いとは言えない
- 幅は100%取ったほうがよいかも
- コンテンツ部分は可変サイズだと思うのでmin-heightのみ宣言で
- 左、右が可変になっても良いように中は全面を使う
投稿2020/10/23 02:00
総合スコア116724
上記反映するとこんな感じ（これがイイというわけではありません）
body{
margin: 0;
}
.header{
background-color: thistle;
width: 100%;
height: 80px;
}
.main-wrap{
position:relative;
}
.left-side{
width: 200px;
min-height: 200px;
background-color: violet;
position:absolute;
left:0px;
top:0px;
}
.main{
min-height: 500px;
background-color: tomato;
padding-left:200px;
padding-right:200px;
}
.right-side{
width: 200px;
min-height: 300px;
background-color: violet;
position:absolute;
right:0px;
top:0px;
}
.footer{
background-color: turquoise;
width: 100%;
height: 80px;
}
左右のメニューは中のスクロールに反応して移動させたりする必要あるかもしれません
広告入れたり、検索やSNS機能つけたりいろいろあるでしょうしね
あなたの回答
tips
プレビュー
