質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

296閲覧

二つの要素を横に並べて配置したい。

aazzkk

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/02/08 10:02

編集2018/02/08 10:33

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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/02/08 10:23

.contents-menuと.contents-mainを横並びにしたいということであってますか?
aazzkk

2018/02/08 10:32

はい、そうです。説明不足で申し訳ありません。
guest

回答1

0

ベストアンサー

テーブルレイアウトの考え方で、
table-cellを使いたい場合は、
tableとセットが基本です。

.contents(table) .contents-menu(table-cell) .contents-menu-title(table-cell)

という構成になります。

下記CSSを追加すれば、横並びになります。

css

1.contents { 2 display: table; 3} 4.contents-main { 5 display: table-cell; 6}

.contents-menuと.contents-mainがくっついているので、padding等で余白の調整はしてください。

追記

「.contents-menu」の方にかかっているheight、background-colorを「.contents-menu-title」の方に移動すれば大体OKです。
そうすると、「.contents-menu-title」の中で上寄せになってしまうので、上下中央になるようにflexで調整です。

css

1.contents-menu { 2 width: 200px; 3 display: table-cell; 4 text-align: center; 5 vertical-align: middle; 6} 7.contents-menu-title { 8 height: 200px; 9 display: -webkit-flex; 10 display: flex; 11 flex-direction: column; 12 justify-content: center; 13 background-color: rgb(200,200,200); 14}

投稿2018/02/08 10:41

編集2018/02/08 12:08
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aazzkk

2018/02/08 11:42

ご回答ありがとうございます。 とても綺麗に横並びになったのですが、右の要素(.contents-main)が.左の要素(.contents-menu)のサイズをより大きくなると、左も右に合わせて大きくなります。私の説明が下手で申し訳ないのですが、左の大きさは固定(200x200pxの正方形で背景塗りつぶし)で右だけ内容量に合わせて高さが自動調整されるようにしたいと考えております。なにか良い方法がありますでしょうか?
kszk311

2018/02/08 12:09

やはりそこは正方形固定でしたか、追記しましたのでご確認下さい
aazzkk

2018/02/09 05:22

理想通りになりました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問