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

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

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

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

CSS

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

Q&A

解決済

1回答

365閲覧

headerのレイアウトを整えたい!!

PigPeach88

総合スコア13

HTML5

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

CSS

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

0グッド

0クリップ

投稿2019/01/05 10:28

編集2019/01/05 13:22

###前提・実現したいこと

####①画像幅=画面幅にしたい。
####②画面幅が広すぎるので、ハードに順応した画面幅にしたい。
####③文字を少し上に上げたい。

発生している問題・エラーメッセージ

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>フィレンチェ</title> 6<link href="css/reset.css" rel="stylesheet" type="text/css"> 7<link href="css/firence.css" rel="stylesheet" type="text/css"> 8<link rel="stylesheet" href="firence.css" type="text/css"> 9<link href="css/aspect.css" rel="stylesheet" type="text/css"> 10<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet"> 11</head> 12 13<body> 14 <header> 15 <h1>フィレンチェ</h1> 16 <br><h2>食と美の街</h2> 17 <section class="about"> 18   19 <h3>高2の秋のイタリア 20 <br>またこの赤レンガの街に 21 <br>ゆっくりと訪れてみたい</h3> 22 </section> 23 24</header> 25 26<section class="venchi"> 27 <h3 class=front>Venchi(ヴェンチ)</h3> 28 <img src="image/venchi.png" class="shop" alt="ヴェンチ"> 29 <h3><p class="gelato">  30 フィレンチェのイタ 31 <br>リア人も認める高級ジ 32 <br>ェラート屋さん。レジ 33 <br>の壁はチョコレートの 34 <br>ような鮮やかで滑らか 35 <br>な茶色そこに長い滝 36 <br>が流れ、まるでチョコ 37 <br>レートの滝のよう。 38 </p> 39 </h3> 40</section> 41 42<section class="chocolate"> 43<img src="image/チョコ.png" class="ice" alt="チョコ"> 44 45<h3> 46<p class="doble">  47 Venchiで買ったのはこちら。 48 <br>同じ味にみえますが味はダブル 49 <br>苦めのチョコと甘めのチョコ。 50</p> 51</h3> 52</section> 53 54<section class="panino"> 55 56<h3>パニーニ 57 58<img src="image/パニーニ.png" class="pan" alt="パニーニ"> 59<p>とあるバール(軽食屋)で買った。<br> 60これで5ユーロ(当時のレートで<br>600円)でした。</p></h3> 61 62</section> 63 64<section class="painting"> 65 66<h3>ウォールペインティング 67<br><p> フィレンチェのドゥオーモ付属<br> 68美術館にダンテ・アリギエーリの<br> 69デスマスクがあります。これから<br> 70着想を得た教養の上でのウォール<br> 71ペインティングと考えられます。</p></h3> 72 73<img src="image/落書き.png" class="draw" alt="落書き"> 74<img src="image/ダンテ.png" class="mask" alt="ダンテ"> 75 76</section> 77 78<section class="pinokio"> 79 80<p> 81<img src="image/キノピオ.png" alt="ピノキオ"> 82 83<h3>ピノキオの街 84 85<br><br> 86木でできたピノキオ 87<br> 88のグッズを売るお店が 89<br>いくつもあります。こ 90<br>の木でできた三輪車の 91<br>艶がいい!イタリアで 92<br>一番好きな写真です。 93</h3></p> 94 95 96</section> 97 98 99<section class="sinyoria"> 100 <p class="palco"> 101 <h3>シニョーリア広場 102 <img src="image/亀.png" alt="亀"> 103 <img src="image/グリコ.png" alt="グリコ"> 104 <br>これは期間限定の展示です。元々ここにはダビデ像(画像右端)な 105 <br>ど、石膏像がそこら中にあります。日本では知られていない石膏が 106 <br>いっぱいあります。 107 <img src="image/石膏像.png" class="big" alt="石膏像"> 108 <img src="image/反り返り.png" alt="反り返り"> 109 <img src="image/お告げ.png" class="telling" alt="お告げ"> 110 <img src="image/付属美術館.png" alt="付属美術館"> 111 </P> 112 </h3> 113</section> 114 115<footer> <p>名前</p> 116</footer> 117 118</body> 119 120</html>

CSS

1@charset "UTF-8"; 2/* CSS Document */ 3.wf-sawarabimincho { font-family: "Sawarabi Mincho"; } 4 5 6 7 8html{ 9 10} 11 12 13body{ 14 background: #8eb4d9 url(../image/heven.png) 85% ; 15 background-repeat: repeat-y; 16 margin:0; 17 width: 100%; 18 19 20 font-family: Sawarabi Mincho ; 21 line-height: 64px; 22 padding: 0; 23 font-size: 16px; 24 color: #ffffff; 25 26 27} 28h1{ 29 text-align: right; 30 font-size: 120px; 31 padding: 300px 0 0 500px ; 32} 33header{background: url(../image/top.png) no-repeat 10% ; 34} 35footer{ 36 width: 100%; 37 hight: 8561px; 38 margin: auto; 39 background-coior:#ffffff; 40 text-align: center; 41} 42 43 44 45h2{ 46 text-align: right; 47 font-size: 72px; 48} 49h3{ /*margin-top: 145px;*/ 50 font-size: 32px; 51 /*margin-align:left;*/ 52} 53 54.about{ 55 text-align: right; 56 margin-bottom:358px; 57} 58 59.section{ 60 font-size: 48px; 61} 62 63.shop{ 64 width:712px; 65 height: 712px; 66 margin-bottom: 1700; 67 margin-left: 900; 68 margin-top: 120px; 69} 70 71 72 73.gelato{ 74 margin-bottom: 900px; 75 margin-left: 950px; 76 /*margin-bottom: 114px;*/ 77} 78 79.ice{ 80 margin-left: 600px; 81 82} 83 84.doble{ 85 margin-top: 115px; 86} 87 88.pan{ 89 margin-right: 12.5%; 90 margin-left: 12.5%; 91 margin-left: 435px; 92 93} 94 95.painting{ 96 margin-bottom: 94px; 97 98} 99.draw{ 100 margin-right: 12.5%; 101 margin-left: 12.5%; 102 position: relative; 103 104} 105.mask{ 106 margin-right: 12.5%; 107 margin-left: 12.5%; 108 position: absolute; 109 110} 111.pinokio{ 112 margin-bottom: 130px; 113} 114.sinyoria{ 115 margin-bottom: 151px; 116} 117 118.big{ 119 width:100%; 120 margin-right: 12.5%; 121 122 123 124}

下の背景が一部見えてしまっています。上の背景が top.png です。

また、横のスクロールバーをみて分かるようにハードウェア(MacbookPro 13inch)にぴったりのサイズになりません。左右にpaddingは使っていません。


フォトショでのデザイン

試したこと

下の背景(heven.png)を広すぎる画面幅に合わせた。
100%→85%に変更するとちょうど良かったが、上の背景を同じように画面幅に合わせることはできず、根本的な解決にならなかった。

CSS

1 2body{ 3 background: #8eb4d9 url(../image/heven.png) 85% ; 4 background-repeat: repeat-y; 5 margin:0; 6 width: 100%; 7 8 9 font-family: Sawarabi Mincho ; 10 line-height: 64px; 11 padding: 0; 12 font-size: 16px; 13 color: #ffffff; 14 15 16}

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

Google Chromeで表示
DwCC2019で作業

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

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

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

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

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

yoshinavi

2019/01/05 11:20 編集

「top.png」は<header>の背景ですか?<header>のCSSも提示してください。
kei344

2019/01/05 12:00

問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。
guest

回答1

0

ベストアンサー

動くサンプル(全画面):https://jsfiddle.net/L7z6p1fc/show/
動くサンプル(1/4画面):https://jsfiddle.net/L7z6p1fc/

②画面幅が広すぎるので、ハードに順応した画面幅にしたい。

レイアウトの組み方が問題なので、「ここをこう改善」くらいではちょっと私には直せません。
今幅が広すぎるのはmarginが要素を押し広げているからだと思います。
例えば下記部分は親要素の全体幅100%からさらに全体の12.5%右に押しています。
(このmarginを取ればあなたのブラウザでは横幅が修正されるかもしれません)

CSS

1.big { 2 width: 100%; 3 margin-right: 12.5%; 4}

【[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック | コリス】
https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

widthやheight,margin,paddingをピクセル指定していますが、ブラウザの横幅が変われば折り返し位置がおかしくなったり、はみ出たりしませんか?
ピクセル指定することが妥当な箇所という物もあるのですが、全体のレイアウト部分ではあまりしません。
(max-width/max-heightや要素間のスペースなどで使ったりはします)

【【初心者向け】レスポンシブなサイトを作るときに気をつけたい3つのポイント - Qiita】
https://qiita.com/rorensu2236/items/17d8b2c4b3da6cc0ed2a

【PCサイトをレスポンシブ化する時の考え方と注意点 | HPcode】
https://haniwaman.com/pc-to-responsive/

レイアウトは色々記事があると思いますが、下記記事が比較的まとまっています。

【段組みのCSS。】
https://lopan.jp/layout2/

【よこ並びのCSS。】
http://lopan.jp/layout/

状態の確認にはデベロッパーツールが必須です使い方を覚えてみてください。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/


######構文エラー編

CSS

1h1{ 2 text-align: right; 3 font-size: 120px; 4 padding: 300px 0 0 500px/* */; /* ← 全角の空白が */ 5}

CSS

1footer{ 2 width: 100%; 3 /*hight: 8561px;*/ 4 height: 8561px; /* つづり間違い */ 5 margin: auto; 6 /*background-coior:#ffffff;*/ 7 background-color:#ffffff; /* つづり間違い */ 8 text-align: center; 9}

CSS

1.shop{ 2 width:712px; 3 height: 712px; 4 margin-bottom: 1700;/* エラーではないが単位が無いので無視される。 */ 5 margin-left: 900;/* エラーではないが単位が無いので無視される。 */ 6 margin-top: 120px; 7}

HTML

1<p><!-- >← p要素はh3などの「見出しコンテンツ」を含められない< --> 2<img src="image/キノピオ.png" alt="ピノキオ"> 3 4<h3>ピノキオの街 5 6<br><br> 7木でできたピノキオ 8<br> 9のグッズを売るお店が 10<br>いくつもあります。こ 11<br>の木でできた三輪車の 12<br>艶がいい!イタリアで 13<br>一番好きな写真です。 14</h3></p><!-- >← p要素はh3などの「見出しコンテンツ」を含められない< -->

<p>: 段落要素 | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/p

許可されている内容 記述コンテンツ

HTML

1 <p class="palco"><!-- >← p要素はh3などの「見出しコンテンツ」を含められない< --> 2 <h3>シニョーリア広場 3 <img src="image/亀.png" alt="亀"> 4 <img src="image/グリコ.png" alt="グリコ"> 5 <br>これは期間限定の展示です。元々ここにはダビデ像(画像右端)な 6 <br>ど、石膏像がそこら中にあります。日本では知られていない石膏が 7 <br>いっぱいあります。 8 <img src="image/石膏像.png" class="big" alt="石膏像"> 9 <img src="image/反り返り.png" alt="反り返り"> 10 <img src="image/お告げ.png" class="telling" alt="お告げ"> 11 <img src="image/付属美術館.png" alt="付属美術館"> 12 </P><!-- >← そもそもタグの対応がおかしい。<P><SPAN></P></SPAN>というような書き方は許容されない< --> 13 </h3>

投稿2019/01/05 14:30

kei344

総合スコア69364

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

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

PigPeach88

2019/01/06 04:22

今のブラウザで見た感じではお陰さまで整えられました。これからデスクトップでも確認したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問