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

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

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

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

Q&A

解決済

2回答

604閲覧

ブラウザ収縮時に発生する改行をコントロールしたい。

ShinYam

総合スコア23

CSS

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

0グッド

0クリップ

投稿2019/05/05 07:53

下記のようにAirbnbを参考にしてページを設計しています。
iconwraper部分の、p class="explain"が、ブラウザの収縮に合わせて改行されないようにしたいのですが、
どの様な手法を取ったら解決出来るのか理屈をご教授いただけないでしょうか?
ブラウザを収縮していくと、途中で真ん中のアイコンが左右アイコンの一段下にズレたりしてしまいます。
単純にこういったコードを書けばいいといった例示では、再現性が低いため、いったい何が問題で、どういう考え方で修正を行えば問題が解決出来るのか、理屈を説明出来る方の意見を頂けますと大変助かります。
よろしくお願いします。

HTML

1コード 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8";> 6 <title>Airbnbcopy</title> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <!-- Required meta tags --> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 <link rel="stylesheet" href="css/index.css" /> 14 15 </head> 16 17 <body> 18 <header> 19 <div class="header-container"> 20 <div class="menu-box"> 21 <div class="logo"></div> 22 <div class="search"></div> 23 </div> 24 25 <nav> 26 <ul> 27   <li><a href="#">ホストをはじめる</a></li> 28 <li><a href="#">ヘルプ</a></li> 29 <li><a href="#">登録する</a></li> 30 <li><a href="#">ログイン</a></li> 31 </ul> 32   </nav> 33 </div> 34 </header> 35 36 <main> 37 <div><!-- nth-child(1) --> 38 <section id="message"> 39 <h2>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</h2><!--<h2>~<h6>のヘッディングコンテンツを使う際は、<article>、<aside>、<section>のいずれかが親であり、親の最初の子である必要があります。--> 40 <p id="del"><span></span><span></span></p> 41 <script> 42 //#delをクリックでメッセージ削除 43 const del = document.getElementById('del'); 44 const hidden = document.getElementById('message'); 45 del.addEventListener('click', function() { 46 hidden.style.display = 'none'; 47 }); 48 </script> 49 </section> 50 </div> 51 52 <div class="middle"> 53 <h1>旅を贈ろう。</h1> 54 <h3>Air bnbギフトカードで、世界をぐんと身近に</h3> 55 <input type="submit" value="ギフトカードを登録"> 56 </div> 57 58 </main> 59 60 <div class="message-container"> 61 <h2>いつも完璧な贈り物</h2> 62 <div class="iconwraper"> 63 <div class="inner1"> 64 <i class="far fa-envelope fa-3x mailicon"></i> 65 <p>簡単に使える</p> 66 <p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 67 </div> 68 69 70 <div class="inner2"> 71 <i class="fas fa-stopwatch fa-3x mailicon"></i> 72 <p>有効期限なし</p> 73 <p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 74 </div> 75 76 <div class="inner3"> 77 <i class="fas fa-globe-europe fa-3x mailicon"></i> 78 <p>忘れられない旅</p> 79 <p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 80 </div> 81 </div> 82 83 <div class="present"> 84 <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt=""> 85 <h2>ギフトカードを貰ったら...</h2> 86 <h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3> 87 <input type="submit" value="ギフトカードを登録する"> 88 <p>Air bnbギフトカードの仕組みは?</p> 89 </div> 90 91 <!-- Optional JavaScript --> 92 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 93 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 94 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 95 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 96</body> 97</html> 98 99

CSS

1コード 2 3@charset "UTF-8"; 4 5/* RESET CSS */ 6html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, small, ul, li, article, aside, section, footer, header, nav , input { 7 margin: 0; 8 padding: 0; 9 border: 0; 10 font: inherit; 11 vertical-align: baseline; 12 list-style-type: none; 13} 14 15header .header-container { 16 height : 80px; 17 width : 100%; 18 background-color: white; 19 position : relative; 20} 21 22header .menu-box { 23 height : 80px; 24 width : 40%; 25 background-color: white; 26} 27 28nav { 29 width: 60%; 30 position: absolute; 31 top: 0; 32 right: 0; 33 padding-top: 25px; 34} 35 36ul { 37 width: 100% 38 height: 80px; 39 display: flex; 40 justify-content: flex-end; 41 align-items: center; 42} 43 44ul li { 45 padding-left: 5px; 46 padding-right: 30px; 47 font-weight: bold; 48} 49 50a { 51 color: black; 52 text-decoration: none; 53} 54 55 56a:hover { 57 color: black; 58 text-decoration: none; 59 border-bottom: 2px solid black; 60 padding-bottom: 32px; 61} 62 63main { 64 background-image : url("../pic.jpg"); 65 background-size: cover; 66 height : 600px; 67 width: 100%; 68 color: white; 69 position: relative; 70} 71 72main div:nth-child(1) { 73 width: 100%; 74 height: 40px; 75 background: #C2E4E7; 76} 77 78main div:nth-child(1) h2 { 79 color : black; 80 text-align: center; 81 padding-top: 10px; 82 font-size : 15px; 83} 84 85 86 87main .middle { 88 position: absolute; 89 padding-left: 20%; 90 padding-top: 15%; 91} 92 93 94main .middle h1 { 95 font-size: 60px; 96} 97 98main .middle h3 { 99 padding-top: 10px; 100 padding-bottom: 30px; 101} 102 103main .middle input { 104 padding: 10px 22px; 105 border-radius: 5px; 106 background-color: white; 107 font-weight: bold; 108} 109 110.message-container { 111 height : 350px; 112 width : 100%; 113} 114 115 116.message-container h2 { 117 font-size: 30px; 118 text-align: center; 119 padding: 30px; 120 font-weight: bold; 121} 122 123.iconwraper { 124 position: relative; 125 padding-left: 200px; 126 padding-right: 200px; 127 padding-bottom: 30px; 128} 129 130.mailicon { 131 color : green; 132 padding-bottom: 20px; 133} 134 135.mailicon2 { 136 color : grey; 137 padding-bottom: 20px; 138} 139 140.inner1,.inner2,.inner3 { 141 height : auto; 142 text-align: center; 143 width : 33%; 144 display: inline-block; 145} 146 147.message-container p { 148 font-size :18px; 149 font-weight: bold; 150 padding-right: 15px; 151 padding-left: 15px; 152} 153 154.message-container .explain { 155 font-size: 18px; 156 font-weight: none; 157 opacity: 0.5; 158 padding-top: 5%; 159} 160 161.present { 162 background-color: #007a87; 163 height: 420px; 164 padding-top : 40px; 165 text-align: center; 166} 167 168.present h2{ 169 color: white; 170 padding-bottom: 15px; 171} 172 173.present h3{ 174 color: white; 175 font-size: 20px; 176 opacity: 0.8; 177} 178 179.present input { 180 background-color: red; 181 padding : 10px 28px; 182 border-radius: 5px; 183 color : white; 184 font-weight: bold; 185 margin-top : 30px; 186} 187 188.present p { 189 color : white; 190 opacity :0.7; 191 font-weight: normal; 192 font-size: 15px; 193 margin-top: 10px; 194} 195 196

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

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

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

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

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

guest

回答2

0

ベストアンサー

iconwraper部分の、p class="explain"が、ブラウザの収縮に合わせて改行されないようにしたいのですが、どの様な手法を取ったら解決出来るのか理屈をご教授いただけないでしょうか?

ブラウザを収縮していくと、途中で真ん中のアイコンが左右アイコンの一段下にズレたりしてしまいます。

掲載されたコードを丸コピして表示させてみましたが、「忘れられない旅」のカラムが単純にカラム落ちして2行目に落ちてしまっているだけのように見受けられますが、そのことを指していますか? 質問文で言及している「p class="explain"が、ブラウザの収縮に合わせて改行されないようにしたい」 ということには関係の無い話なのでその前提で説明しますがご了承ください。

###カラム落ちの原因
.inner1,.inner2,.inner3inline-blockで横並びにしていることが原因。
要素がdisplay:inline-blockになると、テキストレベルのものとして扱われるため、文字列と同様に「行に沿って配置」されます。そのため自動的に横並びとなるのですが、その際、HTMLソースコード内の改行文字(※brではなく不可視文字のLFとかCR+LFとかの改行)がブラウザ上で半角スペース分の空白領域としてボックスの間に挟まってしまうという難点があります。

今回の横並びにしているボックスに色をつけたものがこちらです。キャプチャ
ボックスの間に見える5px程度の余白が、HTML上の各divの閉じタグに後ろにある改行文字によって生じた隙間です。
なので、inline-blockでびっちり隙間なく横並びにしたい場合は、ソースコード上から要素間の改行を削除する必要があります。
改行を取る方法としては、物理的に改行を削除してソースを1行にしてしまうか、または閉じタグと開始タグの間の改行をコメントで挟んで非表示にする、というテクニックを使うのが手っ取り早いです。

###真ん中アイコンの下ズレの原因
inline-blockで横並びしていることにより、vertical-align:baselineとなっていることが原因。
行に沿って配置された各ボックスの縦方向位置が初期値の「baseline」となっているため、ほぼ下揃えと同じ状態になっているのが原因です。vertical-align: topに変更すれば上揃えにできます。

###横並びレイアウトのおすすめ方法
今回のようなボックスの横並びレイアウトは、今ならdisplay:flexで実装するのがおすすめです。
display:inline-blockdisplay:inlineで横並びにするのは、1行テキストが行に沿ってたくさん並んでいて、折返し位置も成り行きで構わないようなタイプのパーツ(たとえばタグクラウドとか)で使ったほうが無理がないかな、と思います。

投稿2019/05/05 08:35

aKusano

総合スコア3763

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

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

ShinYam

2019/05/05 10:15

回答ありがとうございます! inline-blockで横並びにすると、デフォルトでvertical-align:baselineの設定となるわけですね。 知りませんでした。 おっしゃるとおり、.inner1,.inner2,.inner3 に対してvertical-align:topとしたらズレなくなりました! flexboxについては、.inner1,.inner2,.inner3 に対してdisplay: flexとjustify-content: center;を指定してみましたが、何故か縦並びレイアウトにしかならず、inlineblockを使用しておりました。
aKusano

2019/05/05 11:20

flexboxは、display:flexを設定した直下の子要素をflexアイテムとして横並び等でレイアウトする仕組みなので、横並びしたい要素自体にdisplay:flexしても意味がありません。今回のソースコードであれば、.iconwraper {display: flex;} としないとダメですね。
aKusano

2019/05/05 11:25

flexboxレイアウトの基本的概念として、「flexコンテナ」と「flexアイテム」というものがありまして、display:flexを設定した要素が「flexコンテナ」となり、その直下の子要素をflexアイテムとしてflexboxレイアウトのコントロール下に置く、という仕組みで動いております。flexboxの関連プロパティは「flexコンテナ」に設定するものと、「flexアイテム」に設定するものに二分されており、作りたいレイアウトに合わせて適宜組み合わせて使用するようになっています。 既存サイトの模写でレイアウトのコントロールに迷ったら、一旦初心者向けの解説書を熟読するなど、基礎基本に立ち戻って仕様の理解を深めるようにすると上達が早いと思いますよ。 ここで一つずつ質問するのも良いですが、今質問されているような内容は、ちゃんとした入門書なら大体全部解説してあることなので。
ShinYam

2019/05/05 11:59

わかりました!コンテナとアイテムに分けるようにします。 基礎的な事がわかっていないようで、恥ずかしい限りで、お手数おかけしました。 丁寧な回答をいただき、ありがとうございました。
guest

0

すごいざっくりですが以下のような形でいかがでしょうか、、
(写経はあまり良くない方法だと思います、、学校の黒板を書き写のと一緒なので、、)

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Dotinstall Pane</title> <link rel="shortcut icon" href="dotinstall 素材/avicon.ico"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <style> @charset "utf-8"; /* CSS Document */ body{ font-size: 15px; color:#333; font-family: Verdana, Geneva, "sans-serif"; margin: 0; } .container{ width: 820px; margin: 0 auto; padding: 60px 0; } .orange-bg{ color:#FFF; background: url("https://images.pexels.com/photos/2225213/pexels-photo-2225213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); background-size:cover; } .section-title{ text-align: center; font-weight:normal; font-size:24px; margin-bottom: 60px; margin-top: 0; } /*header*/ header h1{ margin-top: 0; font-weight:normal; font-size:36px; margin-bottom: 8px; } header p{ margin-top: 0; margin-bottom: 50px; } header .container{ position: relative; } header img{ position:absolute; bottom: 0; right:0; } .btn{ display:inline-block; width:290px; background: #fff; color:#DE864E; text-align: center; opacity: 0.9; border-radius: 5px; text-decoration: none; padding: 8px 0; } .btn:hover{ opacity:1.0; } .features h1::after{ content: attr(data-subtitle); display:block; font-size:16px; color:#AAAAAA; padding-top: 10px; } .feature h1{ font-style:normal; font-size:18px; } .feature .desc{ width:360px; } .feature:nth-of-type(odd) .desc{ float:right; /*padding-left: 40px;*/ } .feature:nth-of-type(even) .desc{ float:left; /*padding-right: 40px;*/ } /*section.feature{ display: flex; }*/ </style> <header class="orange-bg"> <div class="container"> <h1>Dotinstall Pane</h1> <p>どっとインストールを見ながら<br/> コーディングできるAtomパッケージ</p> <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a> <img src="https://images.pexels.com/photos/2225213/pexels-photo-2225213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="480" height="270" alt="Dotinstall Pane"> </div> </header> <section class="features"> <div class="container"> <h1 data-subtitle="-Features-" class="section-title">Dotinstall Paneの特徴</h1> <section class="feature">  <img src="https://images.pexels.com/photos/2225213/pexels-photo-2225213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="420px" height="270px" alt="特徴1"> <div class="desc"> <h1>スゴイ特徴</h1> <p>いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。</p> </div> </section> <section class="feature">  <img src="https://images.pexels.com/photos/2225213/pexels-photo-2225213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="420px" height="270px" alt="特徴2"> <div class="desc"> <h1>スゴイ特徴</h1> <p>いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。</p> </div> </section> <section class="feature">  <img src="https://images.pexels.com/photos/2225213/pexels-photo-2225213.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="420px" height="270px" alt="特徴3"> <div class="desc"> <h1>スゴイ特徴</h1> <p>いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。いろいろありますよ。</p> </div> </section> </div> </section> </body> </html>

イメージ説明

イメージ説明

イメージ説明

イメージ説明

投稿2019/05/05 10:01

wataame

総合スコア302

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

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

ShinYam

2019/05/05 10:21

回答ありがとうございます! すみません、どうも書いていただいたHTML CSSが、完成のものと別のようです。 (それはそれでレイアウトの参考になりました!)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問