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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

953閲覧

レスポンシブの際、通常のボタンから画像ボタンに変更したいが指定のサイズを境に二つとも消えてしまいます。

junjun0415p

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/04 17:01

編集2019/07/05 05:13

前提・実現したいこと

レスポンシブでタブレット、スマートフォンに対応する画面のヘッダーのボタンを画像ボタンに変えたいです。

発生している問題・エラーメッセージ

1000px以下のレスポンシブの対応する画面サイズになると通常のボタンが消え、切り替えたい画像のボタンも消えてしまいます。

該当のソースコード

HTML

1<header> 2 <div class="container"> 3 <div class="title"> 4 <div class="header-left"> 5 <img class="logo" src="isaralogo.png" alt="iSara"> 6 <p>バンコクのノマドエンジニア育成講座</p> 7 </div> 8 <div class="header-right"> 9 <div class="contactpc"> 10 <p>お問い合わせ / 資料請求はこちら</p> 11 </div> 12 <div class="contactsp" id="contactsp"> 13 14 <img src="form.png"> 15 <a href="#contactform">資料請求</a> 16 </div> 17 </div> 18 </div> 19 </div> 20 </header>

css

1* { 2 box-sizing: border-box; 3 text-rendering: optimizeLegibility; 4 -webkit-font-smoothing: antialiased; 5} 6 7a { 8 text-decoration: none; 9} 10 11img { 12 width: auto; 13 height: auto; 14 max-width: 100%; 15 max-height: 100%; 16} 17 18.container { 19 max-width: 1170px; 20 width: 100%; 21 padding: 0 15px; 22 margin: 0 auto; 23 text-align: center; 24} 25 26body { 27 margin: 0; 28 font-family: "Hiragino Kaku Gothic ProN"; 29 letter-spacing: 1.5px; 30} 31 32header { 33 z-index: 10; 34 background-color: #fff; 35 width: 100%; 36 height: 65px; 37 position: fixed; 38 top: 0; 39} 40 41.header-left { 42 float: left; 43} 44 45.header-right { 46 float: right; 47 margin-top: 15px; 48} 49 50.title { 51 width: 1170px; 52 max-width: calc(100% -20%); 53 margin: 0 auto; 54 position: relative; 55 padding: 20px 0; 56 height: 75px; 57} 58 59.logo { 60 display: inline-block; 61 width: 128px; 62 margin-top: -6px; 63 float: left; 64} 65 66.header-left p { 67 display: inline-block; 68 position: relative; 69 bottom: -10px; 70 font-size: 14px; 71 font-weight: 600; 72 margin-top: 5px; 73} 74 75.contactpc { 76 background-color: #da6b64; 77 border-radius: 25px; 78 position: absolute; 79 right: 0px; 80 top: 16px; 81 padding: 11px 40px; 82 color: white; 83 cursor: pointer; 84 font-size: 14px; 85 margin: 0; 86} 87 88.contactpc:hover { 89 background-color: #d84940; 90} 91 92.contactpc p { 93 margin: 0; 94 letter-spacing: 0; 95} 96 97.contactsp { 98 display: none; 99 text-align: center; 100 position: absolute; 101 right: 0px; 102 top: 0px; 103 padding: 9px 11px; 104 background-color: #da6b64; 105} 106 107.contactsp img { 108 width: 20px; 109 margin: auto; 110 display: block; 111 112 background-color: #da6b64; 113} 114 115.contactsp a { 116 text-decoration: none; 117 color: #fff;; 118 font-size: 12px; 119 margin: auto; 120} 121 122.contactsp a:hover { 123 text-decoration: underline; 124}

javascript

1@media(max-width: 1000px){ 2 .txtl { 3 font-size: 20px; 4 } 5 6 .txtm { 7 font-size: 16px; 8 } 9 10 .txts { 11 font-size: 12px; 12 } 13 14 .txtxs { 15 font-size: 10px; 16 } 17 18 .contactpc { 19 display: none; 20 } 21 22 .contactsp { 23 24 box-sizing: border-box; 25 display: block; 26 } 27 .contactsp img{ 28 width: 20px; 29 margin: auto; 30 } 31} 32

試したこと

1000pxを境にLAPTOPをdisplay:none; タブレット対応のCSSをdisplay:block; にしました
全体のbox-sizingをborder-boxにしました
両方ともに背景色、大きさともに指定しました

補足情報(FW/ツールのバージョンなど)

HTMLの上層部はこのように記述しました

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>iSara[イサラ]|バンコクのノマドエンジニア育成講座</title> 8 <meta name="description" content="iSara"> 9 <link rel="stylesheet" href="isara-1.css"> 10 <link rel="stylesheet" href="isara-responsive.css"> 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 12 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 13 integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 14 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 15 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 17</head>

使用しているエディタはVSCODEでchromeを使用しレスポンシブなどの確認をしています

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

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

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

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

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

m.ts10806

2019/07/05 01:24

コードブロックは任意数設置できるので、ファイル毎にわけてもらえたらと
junjun0415p

2019/07/05 03:09

ご指摘ありがとうございます! コードブロックを追加させていただきました。
m.ts10806

2019/07/05 03:12

「補足情報」のほうもコードブロックお願いできますか? というかこのコードがどういう意味合いで補足として置かれているのでしょうか
mepon

2019/07/05 03:28

質問にボタンとあるけど、HTML内にボタン要素が見当たらないのですが・・・ 提示のコードで検証すると、1000px以下で <p>お問い合わせ / 資料請求はこちら</p>→非表示 <img src="form.png"> <a href="#contactform">資料請求</a>→表示 この動きで合ってると思いますが、違うんですか?
junjun0415p

2019/07/05 05:17

mts10806さんへ ご指摘ありがとうございます! 初めてteratailに投稿させていただきました。 今回の問題の原因の可能性があるかもしれないと思い補足情報に記載させていただきました!
junjun0415p

2019/07/05 05:22

meponさんへ ご指摘ありがとうございます! <a>をボタンとして使用していました 仰せの通り1000px以下の画面サイズで <p>お問い合わせ / 資料請求はこちら</p>→display:none; <img src="form.png"> <a href="#contactform">資料請求</a>→display:block; としたのですが、 <p>お問い合わせ / 資料請求はこちら</p>→非表示 のものはきちんと作動していて非表示になるのですが <img src="form.png"> <a href="#contactform">資料請求</a>→表示 のものが表示されなくて困っております、、、
guest

回答1

0

ベストアンサー

検証しました。
原因:

CSS

1.title { 2 width: 1170px; //←これ 3 max-width: calc(100% -20%); 4 margin: 0 auto; 5 position: relative; 6 padding: 20px 0; 7 height: 75px; 8}

.titleでwidth:1170pxとしてますが
レスポンシブ用CSSで定義されていないclassのために、1000px以下でもそのまま適用されてます。
消えたというより画面外にあるの方が正しいですね。

titleのwidthを調節すれば出てくると思うので調整してみてください。

投稿2019/07/05 06:06

mepon

総合スコア480

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

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

junjun0415p

2019/07/05 06:18

width: 1170px; max-width: calc(100% -20%); を消してリロードしてみた結果無事表示されるようになりました!! 感動のあまり声が出てしまいました、、、ありがとうございます><!!!
junjun0415p

2019/07/05 06:23

width: 1170px; max-width: calc(100% -20%); を消してリロードしてみた結果無事表示されるようになりました!! 感動のあまり声が出てしまいました、、、ありがとうございます><!!!
mepon

2019/07/05 06:39

解決したようで良かったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問