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

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

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

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

CSS

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

Q&A

解決済

1回答

2239閲覧

レスポンシブデザインでの画像配置

kdng

総合スコア5

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/09/27 06:24

編集2017/09/28 01:53

レスポンシブデザインのサイトを作成中です。

ウィンドウ幅を767px以下にした場合、
ヘッダーの左端に青い画像を、右端にテキスト(電話番号や営業時間の部分)とその左隣に赤い画像を配置しています。

テキストと赤い画像は一定の間隔を保ったまま、常にウィンドウの右端に表示したいです。

しかし、
・ウィンドウ幅を変えると画像とテキストの間隔が変動する。
・ウィンドウ幅を小さくすると(389px以下)、テキストが画面からはみ出てしまう。
(赤い画像が「メールでのお問合せ」を右に押しやってしまう)
・赤い画像とテキストが、縦方向に中央揃えになっていない。

の3つ問題があります。

以下にコードを記載します。

HTML

1<body> 2 <header> 3 <div class="header-logo"> 4 <a href=""><img src="http://kado-select.com/images/test/header-logo.png"></a> 5 <h1>説明文</h1> 6 </div> 7 <div class="header-address pcbl"> 8 <img src="http://kado-select.com/images/test/header-miyako.png" alt="ロゴ"> 9 <p class="btn-action-01"><a href="mailto:mail@.com">メールでのお問い合わせはこちら</a></p> 10 <p class="header-tel-contact-txt">お電話でのお問い合わせはこちら</p> 11 <p class="header-hours-txt">[営業時間]<br class="pcin">月〜金9:00〜17:00</p> 12 <p class=" header-tel-number-txt">0000-00-0000</p> 13 </div> 14 <div class="header-address spbl"> 15 <img src="http://kado-select.com/images/test/header-miyako.png" alt="ロゴ" style="width:6rem;float:left;"> 16 <p class="header-tel-number-txt">0000-00-0000</p> 17 <p class="header-hours-txt">[営業時間]月〜金9:00〜17:00</p> 18 <p class="btn-action-01"><a href="mailto:mail@.com">メールでのお問い合わせ</a></p> 19 </div> 20 </header> 21</body>

CSS

1html, body, div, h1, p, img, header{ 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-size: 100%; 6 vertical-align: baseline; 7} 8body { 9 line-height: 1; 10 font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "游ゴシック", YuGothic, sans-serif; 11 width: 100%; 12} 13*, 14*:after { 15 -webkit-box-sizing: border-box; 16 -moz-box-sizing: border-box; 17 box-sizing: border-box; 18} 19img { 20 display: inline-block; 21 vertical-align: middle; 22 max-width: 100%; 23} 24html{ 25 font-size: 16px; 26} 27.warapper{ 28 width:100%; 29} 30header{ 31 width: 1000px; 32 margin: 10px auto 20px; 33 display: flex; 34 justify-content:space-between; 35 align-items: center; 36} 37.header-logo{ 38 display: flex; 39 justify-content:space-between; 40 align-items: center; 41 margin-left: 1rem; 42} 43header h1{ 44 margin-left: 35px; 45 font-weight: normal; 46 font-size: 0.8rem; 47 line-height: 1.5; 48} 49.header-address{ 50 width: 490px; 51 text-align: right; 52 position: relative; 53 margin-top: -5px; 54 display: inline-block; 55} 56.pcbl img{ 57 float:left; 58 clear:both; 59 margin-left: 5rem; 60} 61.pcbl{ 62 display: block !important; 63} 64.pcin{ 65 display: inline !important; 66} 67.spbl{ 68 display: none !important; 69} 70 71.btn-action-01{ 72 display: inline-block; 73} 74.btn-action-01 a { 75 background: #a48831 none repeat scroll 0 0; 76 color: #fff; 77 display: block; 78 text-align: center; 79 text-decoration: none; 80 border-radius: 5px; 81 padding:5px 30px 5px 20px; 82 font-size: 0.9rem; 83 position: relative; 84} 85.btn-action-01 a::after { 86 -moz-border-bottom-colors: none; 87 -moz-border-left-colors: none; 88 -moz-border-right-colors: none; 89 -moz-border-top-colors: none; 90 border-color: transparent transparent transparent #fff; 91 border-image: none; 92 border-style: solid; 93 border-width: 5px; 94 content: ""; 95 display: block; 96 right: 15px; 97 margin-top: -5px; 98 top: 50%; 99 width: 0; 100 position: absolute; 101} 102.header-tel-contact-txt{ 103 font-size: 0.9rem; 104 margin-top: 0.5rem; 105} 106.header-hours-txt{ 107 text-align: left; 108 font-size: 0.875rem; 109 line-height: 1rem; 110 display: inline-block; 111 margin-right: 10px; 112} 113.header-tel-number-txt{ 114 font-size: 1.5rem; 115 font-weight: bold; 116 color: #a48831; 117 display: inline-block; 118} 119 120@media only screen and (max-width: 767px) { 121html{ 122 font-size: 13px; 123} 124header{ 125 width: 100%; 126 padding-left: 5%; 127 padding-right: 5%; 128 margin-bottom: 1rem; 129} 130header h1 { 131 display: none; 132} 133.header-address{ 134 position: static; 135 text-align: right; 136 max-width: 70%; 137} 138.header-logo{ 139 margin-left: 0.5rem; 140} 141.header-logo img{ 142 width: 3rem; 143} 144.header-hours-txt{ 145 text-align: right; 146 font-size: 0.7rem; 147 margin-bottom: 0.5rem; 148 display: block; 149} 150.header-tel-number-txt{ 151 position: static; 152 margin-bottom: 0.5rem; 153 font-size: 1.2rem; 154 margin-top: 1rem; 155 display: block; 156} 157.header-tel-number-txt a{ 158 text-decoration: none; 159 color: #a48831; 160} 161.pcbl{ 162 display: none !important; 163} 164.pcin{ 165 display: none !important; 166} 167.spbl{ 168 display: block !important; 169 white-space: nowrap; 170} 171/* --- ボタン-- */ 172.btn-action-01 a{ 173 border-radius: 0; 174 background-color: #fff; 175 border: 2px solid #a48831; 176 color: #a48831; 177 padding: 0.2rem 0.5rem; 178 padding-right: 1rem; 179 font-weight: 600; 180} 181.btn-action-01 a::after { 182-moz-border-bottom-colors: none; 183-moz-border-left-colors: none; 184-moz-border-right-colors: none; 185-moz-border-top-colors: none; 186border-color: transparent transparent transparent #a48831; 187border-image: none; 188border-style: solid; 189border-width: 5px; 190content: ""; 191display: block; 192right: 0; 193margin-top: -5px; 194top: 50%; 195width: 0;position: absolute; 196} 197} 198@media only screen and (max-width: 320px) { 199html{ 200 font-size: 11px; 201} 202} 203```````````````````````````````````````````````````````````````````````````` 204 205大変お手数ですが、解決方法をご教示ください。 206宜しくお願いいたします。

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

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

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

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

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

kei344

2017/09/27 06:32

URLだけでなく書かれている状況が再現するコード(HTML/CSS)を提示されたほうが回答を得やすいと思います。
t_obara

2017/09/27 07:46

上記に賛成です、この過程でコードを最小限にしていけば、どのコード・設定が問題で意図しない動作となるかをご自身で把握しやすくなるメリットもあります。さらにブラウザの開発ツールなどを利用するとよりわかりやすくなるかと思います。
kei344

2017/09/27 08:40

提示のHTMLでは「赤い画像」がどれであるか、そのサイズがどうなっているのかがわかりません。
alg

2017/09/27 09:48

レスポンシブルデザイン → レスポンシブデザイン かと。 レスポンシブル(responsible):責任のある、など。レスポンシブ(responsive):すぐ応答する、敏感な、など。
kdng

2017/09/28 01:53

algさん、ご指摘ありがとうございます。お恥ずかしい限りです。
guest

回答1

0

ベストアンサー

こういうことかな。

CSS

1.header-address.spbl { 2 width: auto; 3 position: relative; 4} 5.header-address.spbl > img { 6 position: absolute; 7 right: 100%; 8 top: 50%; 9 transform: translateY(-50%); 10} 11```[https://jsfiddle.net/5Lg7h9bs/3/](https://jsfiddle.net/5Lg7h9bs/3/)

投稿2017/09/27 09:14

kei344

総合スコア69364

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

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

kdng

2017/09/28 01:49

まさしくこれです!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問