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

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

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

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

858閲覧

サイドメニューのデザイン

yasu0716

総合スコア15

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/08/22 10:36

編集2019/08/23 09:01

【整理しました】

全体の幅を960px、ヘッダー(width100%)、メニューバー(width100%)、コンテンツエリア(width80%)、
サイドメニュー(width20%)、フッター(width100%)からなるレイアウトのwebページを作成したいです。

メニューバーをスクロールしても画面上端に残るようにし、サイドメニューもそのすぐ下に固定したいです。
サイドメニューをfixedで固定しましたが、
ヘッダー画像を入れるとサイドメニューの初期位置が下がるため、中途半端な位置に固定されてしまいます。

〇サイドバーをメニューバーと一緒に動かしてメニューバー直下に固定するにはどうしたらいいでしょうか。相対位置を指定しての固定などできませんか・・・?

質問が下手ですみません。
お力添えいただけませんでしょうか。

(画像1)イメージ説明
(画像2)イメージ説明

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <link rel="stylesheet" href="contact.css"> 8 <!--CSS ライブラリ--> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css"> 11 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css"> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css"> 14 </head> 15<body> 16 17 <header id="header"><!--ヘッダー画像--> 18 <img src="" alt="Contact to us"> 19 </header> 20 <nav class="navbar sticky-top navbar-light bg-white"><!--トップメニュー--><!--重要なリンクへ飛ばすnav--> 21 <div class="dropdown"> 22 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 23 aria-expanded="false"> 24 Home 25 </button> 26 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 27 <li class="dropdown-item"> 28 <a href="#">a</a> 29 </li> 30 <li class="dropdown-item"> 31 <a href="#">b</a> 32 </li> 33 <li class="dropdown-item"> 34 <a href="#">c</a> 35 </li> 36 <li class="dropdown-item"> 37 <a href="#">d</a> 38 </li> 39 <li class="dropdown-item"> 40 <a href="#">e</a> 41 </li> 42 <li class="dropdown-item"> 43 <a href="#">f</a> 44 </li> 45 </div> 46 </div> 47 <div class="dropdown"> 48 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 49 aria-expanded="false"> 50 A 51 </button> 52 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 53 </div> 54 </div> 55 <div class="dropdown"> 56 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 57 aria-expanded="false"> 58 B 59 </button> 60 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 61 </div> 62 </div> 63 <div class="dropdown"> 64 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 65 aria-expanded="false"> 66 C 67 </button> 68 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 69 </div> 70 </div> 71 <div class="dropdown"> 72 <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 73 aria-expanded="false"> 74 D 75 </button> 76 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 77 </div> 78 </div> 79 <div class="dropdown"> 80 <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 81 aria-expanded="false"> 82 E 83 </button> 84 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 85 </div> 86 </div> 87 </nav> 88 <div class="wholearea"> 89 <div class="area" ><!--コンテンツ--> 90 <div class="sidemenuboad"> 91 <div class="sidemenu"><!--サイドメニュー--> 92 <div class="col-2"> 93 <section class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 94 <table border="1" width="100%" table frame="void"> 95 <input class="button1" type="button" value="A"> 96 <input class="button1" type="button" value="B"> 97 <input class="button1" type="button" value="C"> 98 <input class="button1" type="button" value="D"> 99 <input class="button1" type="button" value="E"> 100 <input class="button1" type="button" value="F"> 101 <input class="button1" type="button" value="G"> 102 <input class="button1" type="button" value="H"> 103 </table> 104 </section> 105 </div> 106 </div></div> 107 <div class="contents"><!--メインコンテンツー--> 108 <div class="col-10"> 109 <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br> 110 <br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br> 111 <br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br> 112 </div> 113 </div> 114 </div> 115 116 </div> 117 <footer class="footer"><!-- フッター --> 118 <div> 119 <p>aaaaaaaaaaaaa 120 </div> 121 </footer> 122 </body> 123 124</html> 125

CSS

1@charset "utf-8"; 2 3body { 4 width: 100%; 5 background-color:#FFF; 6 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", sans-serif; 7 color:#000; 8} 9 10header { 11 position:relative; 12 text-align:center; 13 overflow:visible; 14 width:960px; 15 margin:0 auto; 16} 17.wholearea{ 18 width:960px; 19 margin:0 auto; 20 overflow:hidden; 21} 22/*-----メニューバーの設定-----*/ 23nav:first-of-type {/*メニューバーら辺*/ 24 text-align:center; 25 width:960px; 26 margin:0 auto; 27 border-bottom:3px double black; 28 margin:10px auto 15px auto; 29} 30.dropdown:hover > .dropdown-menu{ 31 display:block; 32} 33/*-----サイドメニューエリアの設定-----*/ 34.sidemenuboad{ 35 width:20%; 36 float:right; 37 background-color:rgb(181, 240, 240); 38 padding-bottom: 32767px; 39 margin-bottom: -32767px; 40} 41/*-----サイドメニューバーの設定-----*/ 42.sidemenu{ 43 height:300px; 44 background-color:rgba(255, 255, 255,0); 45 position:fixed; 46} 47.sidemenu [type="button"]{ 48 background-color:rgb(241, 197, 147); 49 margin:5px 5px 0 5px; 50 padding:2px 5px; 51 width:150px; 52 height:30px; 53 text-align:center; 54 display:inline-block; 55 color:rgb(0, 0, 0); 56 border-radius:5px; 57} 58.sidemenu [type="button"]:hover{ 59 background-color:rgb(227, 230, 32); 60} 61/*-----メインエリアの設定-----*/ 62.contents{ 63 width:80%; 64 65 float:left; 66 background-color:rgb(247, 236, 179); 67 overflow-wrap : break-word; 68 padding-bottom: 32767px; 69 margin-bottom: -32767px; 70} 71/*-----フッターの設定-----*/ 72.footer { 73 clear:both;/*回り込み解除*/ 74 width:100%; 75 border-top:10px solid #000; 76 text-align:center; 77} 78.footer div p { 79 font-size:0.7em; 80 line-height:2.0em; 81}

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

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

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

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

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

yasutomi

2019/08/22 11:52

sticky-topと言っているのに対し 画像ではfixedとなっており、質問文が矛盾しています。 あと肝心のメニューバーとフッターの高さに関しての 記述がないです。 メニューバーとフッターの高さが固定値でなければ JavaScriptが必要になるのですが JavaScriptを使用して要素の高さの取得などは可能でしょうか。
yasu0716

2019/08/23 09:03

失礼しました。 修正しました。 コンテンツエリア、サイドバー、フッターなどの高さを固定値にすることは可能です。 中身のレイアウトが固まっていないので指定していませんが・・・。
guest

回答1

0

ベストアンサー

headerの位置は固定せず、
ウィンドウに固定させたいものだけposition:sticky;を使用してみてはいかがでしょうか?

投稿2019/09/09 15:22

H40831

総合スコア973

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問