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

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

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

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

CSS

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

Q&A

解決済

1回答

827閲覧

css 画面の一部の横幅が画面一杯に広がりません

sawayakaunagi

総合スコア17

HTML5

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

CSS

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

0グッド

0クリップ

投稿2021/08/17 13:46

編集2021/08/23 01:24

イメージ説明
写真のBicycleから下の右側がなぜか空白になってしまいます。なぜでしょうか?

html

1コード 2 <!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <title>Profile</title> 7 <link rel="stylesheet" href="../css/level1.css"> 8 </head> 9<body> 10 <div class="header"> 11 <div class="header-contents"> 12 <p class="header-left">Profile</p> 13 <div class="header-right"> 14 <a href="#" class="btn-About" href="#index">About</a> 15 <a href="#" class="btn Bicycle" href="#index2">Bicycle </a> 16 </div> 17 </div> 18 </div> 19 </div> 20 <div class="main"> 21 <div class="main-contents"> 22 <div class="main-photo"> 23 <img src="https://code-step.com/demo/html/profile/img/mainvisual.jpg" alt="bike-image" class="main-image"> 24 </div> 25 <h3 id="index">About</h3> 26 <div class="main-icon"> 27 <img src="https://code-step.com/demo/html/profile/img/about.jpg" alt="icon-image"> 28 <h4>KAKERU MIYAICHI</h4><br><p>テキストmain</p> 29 </div> 30 <div class="option"> 31 <div class="main-intro"> 32 <p id="index2" class="bicycle">Bicycle</p> 33 <div class="intro-image"> 34 <img src="https://code-step.com/demo/html/profile/img/bicycle1.jpg" alt="intro-image"> 35 <p>タイトルタイトル</p> 36 <p>テキスト</p> 37 </div> 38 <div class="intro-image"> 39 <img src="https://code-step.com/demo/html/profile/img/bicycle2.jpg" alt="intro-image"> 40 <p>タイトルタイトル</p> 41 <p>テキスト</p> 42 </div> 43 <div class="intro-image"> 44 <img src="https://code-step.com/demo/html/profile/img/bicycle3.jpg" alt="intro-image"> 45 <p>タイトルタイトル</p> 46 <p>テキスト</p> 47 </div> 48 </div> 49 </div> 50</div> 51 </div> 52 <div class="last"> 53<div class="footer-last"> 54 <p>© 2020 Profile</p> 55</div> 56 </div> 57</body> 58</html> 59

css

1コード 2.header-contents p btn{ 3 float: left; 4} 5.header-left{ 6 padding: 4px 24px; 7 background-color: black; 8 color: white; 9 font-size: 24px; 10 float: left; 11} 12.header-right{ 13 font-size: 16px; 14 padding: 32px 16px 0 0; 15 display: inline-block; 16 float:right; 17 color: black; 18} 19.header-right a{ 20 color: black; 21 text-decoration: none; 22 padding: 24px 8px 0 0; 23} 24.main-photo img{ 25 display: block; 26 width:100%; 27} 28.main-contents h3{ 29 text-align: center; 30 font-size: 32px; 31 padding: 8px 0 8px 0; 32 text-decoration:underline; 33 text-decoration-thickness: 3px 34 } 35 .main-icon{ 36 37 } 38.main-icon img{ 39 height:80px; 40 width: 80px; 41 border-radius: 50%; 42 float: left; 43 margin-left: 80px; 44} 45.main-icon h4{ 46 margin:40px 0 0 184px; 47} 48.main-icon p{ 49 margin: 0 0 0 184px 50} 51.last{ 52 width: 100%; 53} 54.bicycle{ 55 font-size: 32px; 56 text-align: center; 57 border-bottom: 3px solid black ; 58 font-weight: bold; 59 margin-bottom: 24px; 60} 61.intro-image{ 62 float: left; 63 width : calc(100% / 3) ; 64 padding: 16px 24px; 65box-sizing: border-box; 66} 67.intro-image img{ 68 height: 200px; 69 width:100%; 70} 71.main-intro{ 72 height: 64px; 73 box-sizing: border-box; 74} 75.footer-last{ 76 position: relative; 77 top: 496px; 78 text-align: center; 79 padding-bottom: 32px; 80 font-size: 16px; 81} 82.option{ 83 position:absolute 84}

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2021/08/17 14:15

mainクラスの中の構造はどうなっていますか? divタグが多いのが気になりまして。
itagagaki

2021/08/17 15:30

提示されているコードでは再現できません。 コードを抜粋して提示するのはいいのですが、それで現象が再現されるかを確認してください。
guest

回答1

0

ベストアンサー

.option{
position:absolute
}

position: absolute;は通常のレイアウトフローから外して配置することを意味します。
何か意図があってそうするのならいいのですが、そのために必要な、position: relative;が設定された先祖要素が無いですね。

とりあえず上記の設定をやめたら本来の(通常の)レイアウトになると思います。

投稿2021/08/23 05:54

itagagaki

総合スコア8402

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問