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

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

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

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

CSS

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

Q&A

解決済

1回答

1226閲覧

header-rightのスマホサイズをwidth100パーにしたい。

hikari_poppo

総合スコア17

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/11/11 00:03

header-rightのスマホサイズをwidth100パーにしたい。

ウェブサイトをHTML,cssを使って作っています。
スマホサイズの幅だけ、ポスター画像、一番上のheader-rightがwidth100%にできません。

該当のソースコード

HTML

1<body> 2 <header> 3 <div class="container"> 4 <div class="header-left"><!-- menu-section --> 5 <div class="menu-toggle"> 6 <div class="menu-toggle"> 7 <div class="one"></div> 8 <div class="two"></div> 9 <div class="three"></div> 10 </div> 11 </div> 12 13 14 <div class="header-right"> 15 <a href="http://pikacho.jp" target="_blank">My Blog</a> 16 <a href="https://twitter.com" target="_blank">Twitter</a> 17 <a href="https://github.com/pikacho007" target="_blank">Github</a> 18 19 </div> 20 </div> 21 </header> 22 <!-- header --> 23 <div class="top-wrapper"> 24 <div class="container"> 25 <h1>HELLO.</h1> 26 <h1>WELCOME TO MY PORTFOLIO.</h1> 27 </div> 28 </div> 29 <!-- top-wrapper --> 30 <div class="introduction"> 31 <div class="container"> 32 <div class="heading"> 33 <img src="img/my_face.jpg"> 34 <h2>Who I am</h2> 35 <p>鹿島学園高等学校卒後、<br>約1年間ヒューマンアカデミーでお世話になる。</p> 36 <h3>Love</h3> 37 <p>うさぎ、英語、ゲーム、海外ドラマ鑑賞、海外映画鑑賞、静かなカフェに行く。<br>特に本屋さんの横についているカフェが好き。</p> 38 </div> 39 </div> 40 </div> 41 <!-- introduction --> 42 <div class="lesson-wrapper"> 43 <div class="container"> 44 <div class="heading"> 45 <h2>What I Can Do!</h2> 46 </div> 47 <div class="lessons"> 48 <div class="lesson"> 49 <div class="lessons-icon"> 50 <img src="https://prog-8.com/images/html/advanced/html.png"> 51 <p>HTML & CSS</p> 52 </div> 53 </div> 54 <div class="lesson"> 55 <div class="lessons-icon"> 56 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 57 <p>JavaScript</p> 58 </div> 59 </div> 60 <div class="lesson"> 61 <div class="lessons-icon"> 62 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 63 <p>Illustrator</p> 64 </div> 65 <p class="text-contents"></p> 66 </div> 67 <div class="lesson"> 68 <div class="lessons-icon"> 69 <img src="https://prog-8.com/images/html/advanced/php.png"> 70 <p>Photoshop</p> 71 </div> 72 </div> 73 <div class="clear"></div> 74 </div> 75 </div> 76 </div> 77 <!-- lesson-wrapper --> 78 <div class="works"> 79 <div class="container"> 80 <h2>What I Made</h2> 81 <div class="portfolio"> 82 <h3><a href="#">My Portfolio</a></h3> 83 <p>現在のサイトです。<br> 84 今までに作った作品を載せているサイトです。<br> 85 このサイトはHTML,CSS,JSを使って作成しました。</p> 86 </div><!-- portfolio --> 87 <div class="icons"> 88 <h3>Logo</h3> 89 <img src="img/instagram_logo_by_myself.jpg"> 90 <img src="img/pokemon_ball.png"> 91 <img src="img/smartphone.png"> 92 <p>Photoshop,Illustratorの操作の練習をしたくて、<br> 93 youtubeで作り方の動画を見ながら作って見ました。</p> 94 </div><!-- icons --> 95 <div class="poster"> 96 <h3>佐倉市ポスター</h3> 97 <img src="img/P1010421.JPG"> 98 <img src="img/ポスター書き出し.png"> 99 <p>最寄駅に貼ってあった京都のポスターが綺麗だったので、<br> 100 京都の嵐山の竹林をイメージして作って見ました。<br> 101 なぜ京都をイメージして作ったかというと、<br> 102 旅行で京都に行けなかったのが悔しくて、<br> 103 旅行に行けなかった分、少しでも京都を感じたかったので作りました。 104 </p> 105 </div><!-- poster --> 106 107 <!-- 名刺はまだ作りかけなのでこのままにしておく 108 109 <div class="cards"> 110 <h3><a href="#">名刺</a></h3> 111 <img src=""> 112 <p> 113 </p> 114 </div> 115 <!cards --> 116 117 118 <div class="website"> 119 <h3><a href="#">komorikomasha</a></h3> 120 <a href="#"><img src="img/website.png"></a> 121 <p>本を見ながら、ヒューマンアカデミー集団クラスではじめて作ったウェブサイトです。HTML,CSS,jQueryを使って制作しました。</p> 122 <a href="https://amzn.to/2pIoctS" target="_blank">この本を使いました。amazonに飛びます。</a> 123 </div><!-- website --> 124 <div class="FiveSeconds"> 125 <h3><a href="#">5秒ぴったりゲーム</a></h3> 126 <img src="img/FiveSeconds.png"> 127 <p>ドットインストールのJavaScript講座を見て作りました。<br> 128 ほとんどはドットインストールのお手本を真似て作りましたが、<br> 129 デザインのアレンジは私が少し手を付け加えました。</p> 130 </div><!-- FiveSeconds --> 131 <div class="Omikuji"> 132 <h3><a href="#">おみくじ</a></h3> 133 134

CSS

1* { 2 box-sizing: border-box; 3} 4 5body { 6 margin: 0; 7 font-family: "Hiragino Kaku Gothic ProN", sans-serif; 8} 9 10a { 11 text-decoration: none; 12} 13 14.clear { 15 clear: left; 16} 17 18.header-left p .fas.fa-bars { 19 font-size: 1.8em; 20 padding-top: 4px; 21} 22 23header p { 24 color: white; 25 font-family: "Hiragino Kaku Gothic ProN", sans-serif; 26} 27 28.container { 29 max-width: 1170px; 30 width: 100%; 31 padding: 0 15px; 32 margin: 0 auto; 33} 34 35.container h1 { 36 color: white; 37} 38 39.top-wrapper { 40 padding: 180px 0 100px 0; 41 background-image: url("img/top.jpg"); 42 /* 43 ↑こっちは自分で選んだ画像。 44 ↓プロゲートの時に使っていた画像。 45 background-image: url(https://prog-8.com/images/html/advanced/top.png); 46 */ 47 background-size: cover; 48 color: white; 49 text-align: center; 50} 51 52.top-wrapper h1 { 53 opacity: 0.7; 54 font-size: 45px; 55 letter-spacing: 5px; 56} 57 58.top-wrapper p { 59 opacity: 0.7; 60} 61 62.btn { 63 padding: 8px 24px; 64 color: white; 65 display: inline-block; 66 opacity: 0.8; 67 border-radius: 4px; 68 text-align: center; 69} 70 71.btn:hover { 72 opacity: 1; 73} 74 75.fa { 76 margin-right: 5px; 77} 78 79header { 80 height: 65px; 81 width: 100%; 82 background-color: rgba(34, 49, 52, 0.9); 83 position :fixed; 84 top: 0; 85 z-index: 10; 86} 87 88.header-left { 89 float: left; 90} 91 92.header-right { 93 float: right; 94 margin-right: -25px; 95 96} 97 98.header-right a { 99 line-height: 65px; 100 padding: 0 25px; 101 color: white; 102 display: block; 103 float: left; 104 transition: all 0.5s; 105} 106 107.header-right a:hover { 108 background-color: rgba(255, 255, 255, 0.3); 109} 110 111.introduction { 112 text-align: center; 113 padding-top: 30px; 114 padding-bottom: 30px; 115} 116 117.introduction img { 118 width: 250px; 119 height: 250px; 120} 121 122.introduction h2 { 123 padding-top: 35px; 124} 125 126.introduction h3 { 127 padding-top: 35px; 128} 129 130.lesson-wrapper { 131 padding-bottom: 80px; 132 padding-left: 5%; 133 padding-right: 5%; 134 background-color: #f7f7f7; 135 text-align: center; 136} 137 138.heading { 139 padding-top: 80px; 140 padding-bottom: 50px; 141 color: #5f5d60; 142} 143 144.heading h2 { 145 font-weight: normal; 146} 147 148.lesson { 149 float: left; 150 width: 25%; 151} 152 153.lessons-icon { 154 position: relative; 155} 156 157.lessons-icon p { 158 position: absolute; 159 top: 44%; 160 width: 100%; 161 color: white; 162} 163 164.works { 165 text-align: center; 166} 167 168.works h2 { 169 padding-top: 100px; 170} 171 172.contact { 173 text-align: center; 174} 175 176.contact h2 { 177 padding-top: 100px; 178} 179 180.contact img { 181 padding-top: 30px; 182} 183 184#page-top { 185 position: fixed; 186 bottom: 20px; 187 right: 20px; 188 font-size: 80%; 189} 190 191#page-top a { 192 color: gray; 193 padding: 0 25px; 194 border-radius: 10px; 195} 196 197#page-top a:hover { 198 text-decoration: none; 199} 200 201.my-small { 202 font-size: 2.5em; 203} 204 205i.fa-angle-up { 206 padding: 1px; 207} 208 209.portfolio h3 { 210 color: black; 211 padding-top: 60px; 212} 213 214 215.icons h3 { 216 color: black; 217 padding-top: 60px; 218} 219 220.icons img { 221 width: 100px; 222 height: 100px; 223} 224 225.poster img { 226 width: 480px; 227 text-align: center; 228} 229 230.poster h3 { 231 padding-top: 60px; 232} 233 234.website h3 { 235 color: black; 236 padding-top: 60px; 237} 238 239.website p { 240 padding-top: 10px; 241 242} 243 244.website img { 245 width: 480px; 246 text-align: center; 247} 248 249.FiveSeconds img { 250 text-align: center; 251} 252 253.FiveSeconds h3 { 254 padding-top: 60px; 255} 256 257.Omikuji h3 { 258 padding-top: 60px; 259} 260 261footer img { 262 width: 125px; 263} 264 265footer p { 266 color: #b3aeb5; 267 font-size: 12px; 268 text-align: center; 269 border-top: 1px solid #f7f7f7; 270 padding-top: 30px; 271} 272 273footer { 274 padding-top: 30px; 275 padding-bottom: 20px; 276} 277

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

画像がこっちでなければ載せられないので...
header-rightは100%になっているようです。ちなみに環境はiPhoneSEのsafariです。写真
ポスター画像は

HTML

1<img style="width:100%;" src="...">

のようにすれば100%になります。
(...の部分は変えてください)
((本来はCSSの方がいいんですが...))

追記

HTML

1<img class="w100" src="...">

CSS

1.w100 { 2width: 100%; 3}

投稿2018/11/11 01:50

編集2018/11/11 10:28
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問