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

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

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

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

CSS

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

Q&A

解決済

2回答

779閲覧

画像テキストの横ならびを3段作成したところ画像下に余白ができ、余白を消す手段を探しています

naki888

総合スコア12

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/15 23:42

現在下記サイトをみて、プログラミングに打ち直す練習をしているのですが、そのサイトの画像とテキストセットの3段が形成されるところをコード化しようとしたところ一段目の画像の下に余白ができ、2段目のテキストのバックグラウンドが余白分へこみ不格好になってしまいます。直接テキストのマージンやパディングにpxを打ち込んで修正しようとしているのですがうまくいきません。サイトを確認しても、やり方が異なっているようで正解を確かめることができず行き詰っております。下記に自分で作成中のhtml,cssも張り付けさせていただきます。ご指導いただければ幸いです。何卒よろしくお願いいたします。

参考サイト:https://note.com/krowl/n/n0b339b21bb50

自作html--------------------------------------------------------------

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample page</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--header--> <div style="position:absolute; top:15px; left:150px;"> <img src="images/logo.png" alt="logo" align="left"> </div> <div style="position:absolute; top:15px; right:400px;"> TEL 00-0000-0000<br> (受付時間 平日 9:00~17:00) </div> <div class="ask"> <p>お問い合わせ</p> </div> <!--main--> <div class="example"> <img src="images/main_image01.jpg"> <p>キャッチコピー</p> </div> <div class="under-example" > <p>テキストテキストテキスト</p> </div> <br> <nav> <ul id="main_nav"> <li><a href="#div01">1.テキストテキ<br>ストテキスト</a></li> <li><a href="#div02">2.テキストテキ<br>ストテキスト</a></li> <li><a href="#div03">3.テキストテキ<br>ストテキスト</a></li> </ul> <div class="box"> <div class="box-img"> <img src="images/photo01.jpg"> </div> <div class="text1"> <h4>1.テキストテキストテキスト</h4><br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="cb"></div> </div> <div class="box2-img"> <img src="images/photo02.jpg"> </div> <div class="box2"> <div class="text2"> <h4>2.テキストテキストテキスト</h4><br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="cb2"></div> </div> </div> <div class="box3-img"> <img src="images/photo03.jpg"> </div> <div class="box3"> <div class="text3"> <h4>3.テキストテキストテキスト</h4> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="cb3"></div> </div> <!--form--> <div> TEL 00-0000-0000<br> (受付時間 平日 9:00~17:00) </div> <div> お問い合わせ </div> <!--bottom--> <div> @samplesamplesample </div> </body> </html>

自作css------------------------------------------------------------------

.ask {
position:relative;

}

.ask p{
position:relative;
top: 0px;
left:70%;
margin:0;
color: white;
background: red;
padding:20px 20px;
displeay:block;
width: 102px;
height:24px;

}

.example{position: relative;}

.example p{
position: absolute;
color: grey;
font-weight: bold;
font-size: 2em;
font-family:Quicksand, sans-serif;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
margine:0;
padding:0;
}

.example img{
width: 100%;
margin:0;
padding:0;}

.under-example {
position: relative;
mid-width: 600px;
padding-left: calc((100% - 600px)/2);
padding-right: calc((100% - 600px)/2);
margin:0;
padding:0;

}

.under-example p{
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
color: white;
background: grey;
font-size: 2em;
font-family:Quicksand, sans-serif;
display: block;
width: 100%;
height:auto;
text-align: center;
}
.under-example:after {
content: "";
display: block;
width: 0px;
height: 0px;
bottom: -43px;
border-top: 20px solid grey;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
left: 0;
right: 0;
margin: auto;
position: absolute;
vertical-align: middle;

}

nav {
height: 396px;
width: 100%;
margin: 0 auto;
}

#main_nav {
width: 67.5%;

<!--menu display width-->
min-width: 687px; height: 396px; overflow: hidden; margin: 0 auto; padding: 88px 0; list-style:none;

}

#main_nav li {
float: left;
height: 225px;
width: 225px;
border: 2px solid #000;
border-radius: 50%;
position: relative;

}

#main_nav li:after {
content: "";
display: block;
position: absolute;
bottom: 22px;
right: 0;
left: 0;
width: 21px;
height: 21px;
margin: auto;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
transform: rotate(45deg);
}

#main_nav li:last-of-type {
float: none;
margin: 0 auto;

<!--center -->

}
#main_nav li:nth-of-type(2) {
float: right;

<!--modify 2nd -->

}
#main_nav a {
color: #000;
font-size: 1.5rem;
position: absolute;
width: 100%;
text-align: center;
padding: 83px 0 100px;
text-decoration:none;
}

.text1{
background-color:#aaa;
height: 400px;

}

.text2{
background-color:#aaa;
height: 400px;}

.text3{
background-color:#aaa;
height: 400px;

}

.box-img{
float:left;
width: 50%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
margine:0;
padding:0;

}

.cb{
clear:both;
}

.box2-img{
float:right;
width: 50%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
vertical-align:top;

}

.cb2{
clear:both;
}

.box3-img{
float:left;
width: 50%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
vertical-align:top;

}

.cb3{
clear:both;
}

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

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

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

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

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

hatena19

2020/03/16 00:11

コードはマークダウンのコードブロック内にいれてください。 ```html HTMLコードをここに記述 ``` ```css CSSコードをここに記述 ``` あるいはコード部分を選択してから、ツールバーの<code>ボタンをクリックしてもいいです。
naki888

2020/03/16 19:59

承知いたしました。次回からコードブロックに入力するようにいたします。失礼いたしました。
x_x

2020/03/17 07:49

質問は編集できるので、今回の質問も修正願います。
guest

回答2

0

ベストアンサー

※修正依頼にもコメントしましたが、コードはマークダウンのコードブロック内にいれてください。


float:left; float:right; を使って横並びにしてますが、これをやめて、
CSS Flexbox か CSS Grid で横ならびレイアウトの実装に変更されることをお勧めします。

CSS Flexbox のコード例

html

1<div class="box"> 2 <div class="box-img"> 3 <img src="https://placehold.jp/400x400.png"> 4 </div> 5 <div class="text"> 6 <h4>1.テキストテキストテキスト</h4><br> 7 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 8 </div> 9</div> 10<div class="box"> 11 <div class="box-img"> 12 <img src="https://placehold.jp/400x400.png"> 13 </div> 14 <div class="text"> 15 <h4>2.テキストテキストテキスト</h4><br> 16 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 17 </div> 18</div> 19 20<div class="box"> 21 <div class="box-img"> 22 <img src="https://placehold.jp/400x400.png"> 23 </div> 24 <div class="text"> 25 <h4>3.テキストテキストテキスト</h4> 26 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 27 </div> 28</div>

css

1.box { 2 display: flex; 3 align-items: stretch; 4 height: 400px; 5} 6.box:nth-child(2n) { 7 flex-direction: row-reverse; 8} 9.text{ 10 width: 50%; 11 background-color:#aaa; 12} 13 14.box-img{ 15 width: 50%; 16 margine:0; 17 padding:0; 18} 19 20.box-img img{ 21 background-repeat: no-repeat; 22 object-fit: cover; 23 width: 100%; 24 height: 400px; 25}

Codepenサンプル

投稿2020/03/16 01:03

編集2020/03/16 01:44
hatena19

総合スコア33620

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

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

naki888

2020/03/16 19:57

大変参考になります。flexを使って再編集してみたいと思います。ありがとうございます。
naki888

2020/03/17 18:14

美しく描けました。ありがとうございました。
guest

0

imgタグに対しdisplay:block;を当ててみるとどうでしょう

投稿2020/03/16 00:58

akkman

総合スコア254

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問