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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

8622閲覧

ヘッダーが「width:100vw」なのに右に寄ってしまう。html css

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/04/03 06:28

編集2020/04/03 06:36

前提・実現したいこと

ヘッダーを横いっぱいに広げたい

発生している問題

ヘッダーが少し右による

モバイルフレンドリーテストによるスクリーンショット

該当のソースコード

html

1<html><head><meta name="viewport" content="width=device-width,initial-scale=1" /> 2</head><body><header> 3 <div class="header-logo-menu"> 4 <div id="nav-drawer"> 5 <input id="nav-input" type="checkbox" class="nav-unshown" /> 6 <label id="nav-open" for="nav-input"><span></span></label> 7 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 8 <div id="nav-content">ここに中身を入れる</div> 9 </div> 10 <div class="logo-area"><h2>logo</h2></div> 11 </div> 12</header> 13 14<style> 15header { 16 padding:10px; 17 margin-left:0px; 18 background: #fff; 19border:medium solid #94de8c; 20width:100%; 21} 22 23#nav-drawer { 24 position: relative; 25} 26 27/*チェックボックス等は非表示に*/ 28.nav-unshown { 29 display:none; 30} 31 32/*アイコンのスペース*/ 33#nav-open { 34 display: inline-block; 35 width: 30px; 36 // height: 22px; 37height: 8vh; 38 vertical-align: middle; 39} 40 41/*ハンバーガーの形をCSSで表現*/ 42#nav-open span, #nav-open span:before, #nav-open span:after { 43 position: absolute; 44 45 height: 1px; 46 width: 45px;/*長さ*/ 47 border-radius: 10%; 48 background: green; 49 display: block; 50 content: ''; 51 cursor: pointer; 52} 53#nav-open span:before { 54 bottom: -8px; 55} 56#nav-open span:after { 57 bottom: -16px; 58} 59 60/*閉じる用の薄黒箇所*/ 61#nav-close { 62 display: none; 63 position: fixed; 64 z-index: 99; 65 top: 0; 66 left: 0; 67 width: 100%; 68 height: 100%; 69 background: black; 70 opacity: 0; 71 transition: .3s ease-in-out; 72} 73 74/*メニューの中身*/ 75#nav-content { 76 overflow: auto; 77 position: fixed; 78 top: 0; 79 left: 0; 80 z-index: 9999; 81 width: 80%; 82 max-width: 90%;/*最大幅(お好みで調整を)*/ 83 height: 100%; 84 background: #fff; 85 transition: .3s ease-in-out; 86 -webkit-transform: translateX(-105%); 87 transform: translateX(-105%); 88} 89 90/*チェックがついたら表示させる*/ 91#nav-input:checked ~ #nav-close { 92 display: block; 93 opacity: .5; 94} 95 96#nav-input:checked ~ #nav-content { 97 -webkit-transform: translateX(0%); 98 transform: translateX(0%); 99 box-shadow: 6px 0 25px rgba(0,0,0,.15); 100} 101 102.header-logo-menu{ 103 display: flex; 104 display: -moz-flex; 105 display: -o-flex; 106 display: -webkit-flex; 107 display: -ms-flex; 108 flex-direction: row; 109 -moz-flex-direction: row; 110 -o-flex-direction: row; 111 -webkit-flex-direction: row; 112 -ms-flex-direction: row; 113} 114 115 116.logo-area{text-align:center;margin:auto;} 117</style></body></html> 118

試したこと

margin:0px;をつけてみたりしました。

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

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

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

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

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

kei344

2020/04/03 06:31

(質問文は編集できます)質問タイトルが「with:100vw」になっています。「width」です。
退会済みユーザー

退会済みユーザー

2020/04/03 06:36

直しました。ありがとうございます
guest

回答2

0

ベストアンサー

.header-logo-menu が flexになっているので#nav-drawerと並んでいるから少し右にずれます。

CSS

1#nav-drawer { 2 /*position: relative;*/ 3 position: absolute; 4} 5 6.header-logo-menu{ 7 display: flex; 8 display: -moz-flex; 9 display: -o-flex; 10 display: -webkit-flex; 11 display: -ms-flex; 12 flex-direction: row; 13 -moz-flex-direction: row; 14 -o-flex-direction: row; 15 -webkit-flex-direction: row; 16 -ms-flex-direction: row; 17 position: relative;/* ADD */ 18} 19```**動くサンプル:**[https://jsfiddle.net/8sjf15za/](https://jsfiddle.net/8sjf15za/) 20 21--- 22 23あと、CSSのコメントは`/* */`これだけです。 24 25```CSS 26/*アイコンのスペース*/ 27#nav-open { 28 display: inline-block; 29 width: 30px; 30 /* // height: 22px; */ 31height: 8vh; 32 vertical-align: middle; 33}

追記:

width:100%;にはデフォルトでpadding幅が含まれないので、box-sizing: border-box;をつけるか、width:100%;を削除するかどちらかです。(width:100%;を削除すると親要素内に収まるように計算されるので)

CSS

1header { 2 padding:10px; 3 margin-left:0px; 4 background: #fff; 5border:medium solid #94de8c; 6width:100%;/* これはそのままではpaddingを含まない */ 7box-sizing: border-box;/*こうするか、width:100%;を削除する */ 8} 9```**動くサンプル:**[https://jsfiddle.net/fL28mhbs/](https://jsfiddle.net/fL28mhbs/)

投稿2020/04/03 06:46

編集2020/04/03 06:55
kei344

総合スコア69606

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

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

kei344

2020/04/03 06:56 編集

あ、読み違えてた。⇒ 修正しました。
退会済みユーザー

退会済みユーザー

2020/04/03 07:22

ありがとうございます。 思い通りに行きました。
guest

0

左のハンバーガーメニューの幅を除いた、残りの部分の中で中央に表示しているためです。
あまり綺麗な方法ではありませんが、右にも左と同じ幅の空要素を置いてやればタイトルは全体の中央に表示されます。

html

1 <div class="header-logo-menu"> 2 3 <div id="nav-drawer"> 4 <input id="nav-input" type="checkbox" class="nav-unshown" /> 5 <label id="nav-open" for="nav-input"><span></span></label> 6 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 7 <div id="nav-content">ここに中身を入れる</div> 8 </div> 9 10 <div class="logo-area"><h2>logo</h2></div> 11 12 <div id="nav-spacer" style="display:inline-block; width:30px;"></div> <!-- 調整用の空要素 --> 13 14 </div>

投稿2020/04/03 06:44

ku__ra__ge

総合スコア4524

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

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

退会済みユーザー

退会済みユーザー

2020/04/03 07:26

そういうやり方もあるんですね! 色々な大きさのデバイスでも同じように表示させたいので、kei344 さんの案を使わせていただきました。 他のやつではこれも使ってみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問