web制作初心者です。不慣れにつき色々お見苦しい点があるかとは思いますが何卒よろしくお願いいたします。
現在作成中のページにて、二つのブロック要素を横に並べて配置したいと考えております(.contents-menuと.contents-main)。
はじめはfloatで左に来させたい要素を左寄せしておりましたが、左の要素の中身を上下左右中央寄せにしたかったので、floatを使えない状況になってしまいました(display:table-cellを使用したため)。
ちなみに、左の要素のサイズは固定、右の要素のサイズは内容量により高さが自動で調節されるという風にしたいです。
色々な方法を試しましたが、うまく左右に並べることができなかったのでどなたか良い方法を教えていただけないでしょうか。よろしくお願いいたします。
●html●
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sstemp4.css"> <title>template sample</title> </head> <body> <header> <div id="menu"> <ul id="menu-list"> <li><a href="#about">about</a></li><li> <a href="main">main</a></li><li id="sitename"> <a href="#"><span>Site Name</span></a></li><li> <a href="#bookmark">bookmark</a></li><li> <a href="#contact">contact</a></li> </ul> </div> <div id="header-top"><img src="img/illust8.png"></div> </header> <div id="wrapper"> <div id="about" class="contents"> <div class="contents-menu"> <div class="contents-menu-title"> <h2>about</h2> <p>サイトについて</p> </div> </div> <div class="contents-main">画面サイズ959px以下でメニューが切り替わります。</div> </div> <div id="main" class="contents"> <div class="contents-menu"> <div class="contents-menu-title"> <h2>main</h2> <p>メインコンテンツ</p> </div> </div> <div class="contents-main">メインコンテンツなど。</div> </div> <div id="bookmark" class="contents"> <div class="contents-menu"> <div class="contents-menu-title"> <h2>bookmark</h2> <p>他サイト様へのリンク</p> </div> </div> <div class="contents-main"> <div class="bookmark-list"> <p><a href="">サンプル1</a></p> <p>説明など説明など説明など説明など説明など</p> </div> <div class="bookmark-list"> <p><a href="">サンプル1</a></p> <p>説明など説明など説明など説明など説明など</p> </div> <div class="bookmark-list"> <p><a href="">サンプル1</a></p> <p>説明など説明など説明など説明など説明など</p> </div> <div class="bookmark-list"> <p><a href="">サンプル1</a></p> <p>説明など説明など説明など説明など説明など</p> </div> <div class="bookmark-list"> <p><a href="">サンプル1</a></p> <p>説明など説明など説明など説明など説明など</p> </div> <div class="bookmark-list"> <p><a href="">サンプル1</a></p> <p>説明など説明など説明など説明など説明など</p> </div> </div> </div> <div id="contact" class="contents"> <div class="contents-menu"> <div class="contents-menu-title"> <h2>お問い合わせフォーム</h2> <p>何かご質問等ございましたらこちらからご連絡ください。</p> </div> </div> <div class="contents-main"> <form> <p>お名前</p> <input> <p>メールアドレス</p> <input> <p>お問い合わせ内容</p> <textarea></textarea> </form> </div> </div> </div> <footer> <div id="copyright"> </div> </footer> </body> </html>
●css●
@charset "utf-8"; * { box-sizing: border-box; } /*ここから共通の設定*/ html, body { height: 100%; } h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; } a { text-decoration: none; transition: 0.2s; color: rgb(100,100,100); } a:hover { opacity: 0.7; } header, #wrapper, footer { width: 100%; } #about, #bookmark, #main, #contact { width: 900px; margin: 200px auto; } /*ここまで共通の設定*/ header { height: 100%; } #menu-list { list-style: none; text-align: center; background-color: rgb(0,0,0); } #menu-list li { display: inline-block; } #menu-list li a{ display: block; padding: 15px; color: rgb(255,255,255); } #sitename span::before { content: "│"; color: rgb(200,200,200); } #sitename span::after { content: "│"; color: rgb(200,200,200); } #header-top { height: 100%; width: 100%; } #header-top img { width: 100%; height: auto; } .contents-menu { width: 200px; height: 200px; background-color: rgb(200,200,200); display: table-cell; vertical-align: middle; text-align: center; }
回答1件
あなたの回答
tips
プレビュー