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

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

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

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

CSS

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

Q&A

解決済

1回答

589閲覧

サイトの両端に予期しないスペースができてしまう。【背景画像挿入時】

YukiNakata

総合スコア20

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/05/02 10:11

CSSで背景画像を挿入しましたが両端に空白でできてしまいます。

※おそらくmargineやpaddingの設定、もしくはbodyやdiv要素の位置だとおもうのですが、解決方法がわかりません。

今やっていること:
このサイトを模写しています。
link:https://isara.life/

解決したいこと:
サイトの背景画像の両端に出る空白を消したい。

やってみたこと:
下記質問に乗っていることをしましたが、なおりませんでした。
サイトの右にできる余白の解決方法がわかりません。

このようになってしまいます。↓(この下に実際のコードを貼っています)
イメージ説明

コード:

html:

<html lang="ja"> <head> <meta charset="utf-8"> <title>iSara</title> <link rel="stylesheet" href="iSara.css"> </head> <body> <header> <div class="title"> <div class="logo"> <img class="titile_logo" src="images\isaralogo.png" alt=""> </div> <div class="title_text"> <p>バンコクのノマドエンジニア育成講座</p> </div> <div class="contact_info"> <p> お問い合わせ/資料請求はこちら</p> </div> </div> </header> <!-- MAIN --> <div class="background_main"> </div> </body>

css:

header

1 2} 3 4div{ 5 font-size: 100%; 6} 7 8/* 上部ヘッダー大枠: */ 9div.title { 10 position: relative; 11 height: 60px; 12 width: 100%; 13 max-width: 1200px; 14 margin: auto; 15} 16 17.logo img { 18 height: 46.55px; 19 width: 128px; 20 float: left; 21 vertical-align: middle; 22} 23 24/* バンコクのノマドエンジニア育成講座(タイトル): */ 25.titile_text { 26 height: 200px; 27 width: auto; 28 float: left; 29 display: block; 30} 31 32.title_text p { 33 margin-bottom: 0; 34 font-size: 14px; 35 font-weight: 600; 36 position: relative; 37 bottom: -22px; 38 39} 40 41/* お問い合わせ/資料請求ボタン: */ 42.contact_info { 43 cursor: pointer; 44 position: absolute; 45 right: 0px; 46 top: 4px; 47 color: #fff; 48 padding: 0px 20px; 49 background-color: #da6b64; 50 border-radius: 30px; 51 max-width: 20%; 52 max-height: 50px; 53} 54 55.contact_info p { 56 font-size: 70%; 57} 58 59/* メインページ: */ 60.background_main { 61 height: 1000px; 62 background-image: url(images/main.jpg); 63 background-repeat: no-repeat; 64 background-size: 1400px; 65 margin: 0; 66 padding: 0; 67} 68 69コード

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

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

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

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

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

guest

回答1

0

ベストアンサー

提示されているコードが切れているので書いているかもしれませんが。

CSS

1body { 2 margin: 0; 3}

投稿2019/05/02 11:35

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問