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

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

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

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

CSS

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

Q&A

解決済

1回答

9458閲覧

HTML要素間の隙間を埋めたい

omyu

総合スコア22

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/06 13:28

編集2019/03/06 13:39

sectionタグ間の空白の隙間を埋めたいです。自分で気づく範囲でmarginを0にしてみたりしましたが、解決できませんでした。.topの背景画像はこちらでてきとうに貼ったものなのでこの質問とは関係ありません。
イメージ説明

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="stylesheet.css"> 9</head> 10<body> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <img src="images/isaralogo.png" alt="isara" class="header-logo"> 15 <p class="h1">バンコクのノマドエンジニア育成講座</p> 16 </div> 17 <div class="header-right"> 18 <a href="#">お問い合わせ / 資料請求はこちら</a> 19 </div> 20 </div> 21 </header> 22 <div id="wrap"> 23 <section class="top"> 24 <div class="top-content"> 25 <div class="text1"> 26 <p>プログラミングで</p> 27 <p>人生の安定を手にいれよう</p> 28 </div> 29 <img src="images/isaralogolarge.png" alt="isara"> 30 <div class="text2"> 31 <p>バンコクのノマドエンジニア育成講座</p> 32 <p>iSara[イサラ]</p> 33 </div> 34 </div> 35 </section> 36 <section class="second"> 37 <div class="second-content"> 38 <div class="second-text1"> 39 40 </div> 41 <p></p> 42 <div class="second-image"> 43 <a href=""></a> 44 </div> 45 <div class="second-text2"> 46 47 </div> 48 <div class="second-sns"> 49 50 </div> 51 </div> 52 </section> 53 </div> 54</body> 55</html>

CSS

1@charset "utf-8"; 2 3* { 4 box-sizing: border-box; 5 text-decoration: none; 6} 7body { 8 margin:0; 9} 10header { 11 height:75px; 12 width:100%; 13 background-color:white; 14 position:fixed; 15 top:0px; 16 17} 18 19.container { 20 width:1170px; 21 height:75px; 22 margin:0 auto; 23} 24.header-left { 25 float:left; 26 width:400px; 27 height:75px; 28} 29.header-logo { 30 margin-top:17px; 31 width:120px; 32 float:left; 33} 34.header-left .h1 { 35 margin: 37px 0 0 0; 36 font-size: 14px; 37 color: #333333; 38 font-weight:600; 39 letter-spacing: 2px; 40} 41.header-right { 42 float:right; 43 width:320px; 44 height:45px; 45 margin-top:15px; 46 background-color: #da6b64; 47 border-radius:25px; 48} 49.header-right a { 50 line-height: 45px; 51 font-weight:300; 52 font-size: 14px; 53 text-align:center; 54 color:white; 55 letter-spacing: 2px; 56 display:block; 57} 58.header-right:hover { 59 background-color:#dc143c; 60} 61#wrap { 62 margin-top:75px; 63} 64.top { 65 width:100%; 66 height:500px; 67 background-image:url(images/screen.png); 68 background-size:cover; 69 margin-bottom:0; 70} 71.top-content { 72 width:1170px; 73 margin:0 auto; 74 text-align:center; 75 padding-top:75px; 76 77} 78.text1 { 79 font-weight:600; 80 font-size:28px; 81 line-height:30px; 82 letter-spacing: 2px; 83 padding-bottom:0; 84} 85.top img { 86 width:310px; 87 height:100px; 88 margin-top:0; 89 padding-top:0; 90} 91.text2 { 92 font-size:20px; 93 font-weight:600; 94 line-height:2px; 95 letter-spacing: 2px; 96 opacity:0.8; 97 margin-bottom:0; 98} 99.second { 100 background-color:#ebb94d; 101 width:100%; 102 height:600px; 103 margin:0; 104}

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

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

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

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

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

guest

回答1

0

ベストアンサー

スタイルをリセットすることで対応できると思います。

css

1* { 2 margin: 0; 3}

上記を追加してみてください。

投稿2019/03/06 14:46

cerfweb

総合スコア1899

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

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

omyu

2019/03/06 23:42

解決できました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問