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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

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

HTML

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

CSS

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

Q&A

解決済

2回答

1211閲覧

レスポンシブサイトの不具合で困っています。URLあり。

marton

総合スコア2

レスポンシブWebデザイン

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2021/05/30 01:56

現在、コーディング練習をしているところなのですが、
レスポンシブサイトにて横幅指定、中央揃えがうまくできません。
URLは
https://mystyle.xrea.jp/practis/
です。

メディアクエリにて767pxで横幅指定をしているのですが、610pxくらいでレスポンシブサイトに適応します。
またレスポンシブサイトではヘッダーメニューが中央揃えにならないので、是非ご回答いただければ幸いです。

2日ほどソースとにらみっこしていますが、なかなか解決できないのでお力いただけると助かります。
URLは https://mystyle.xrea.jp/practis/ です。

以上、よろしくお願いいたします。

※下記にソースコードを載せておきます。

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 <link rel="icon" href="favicon.ico"> 7 <link rel="stylesheet" href="./css/reset.css"> 8 <link rel="stylesheet" href="./css/style.css"> 9 <title>デイトラ | 無料体験</title> 10</head> 11<body> 12 <header> 13 <h1> 14 30DAYSトライアル 15 </h1> 16 <nav> 17 <ul> 18 <li><a href="#">デイトラとは</a></li> 19 <li><a href="#">コース一覧</a></li> 20 <li><a href="#">お問い合わせ</a></li> 21 </ul> 22 </nav> 23 </header> 24 25 <div class="header_img"> 26 <p class="header_upper"> 27 1日1題30日で<br> 28 プロのWebエンジニアになろう! 29 </p> 30 <p class="header_bottom"> 31 毎日設定された課題をこなすだけ!<br class="kaigyo">未経験から30日でプログラミングスキルが身につきます 32 </p> 33 </div> 34 <div class="container"> 35 36 <h2>デイトラとは</h2> 37 <div class="about"> 38 <div class="about_left"> 39 <img src="./img/about.png" alt="デイトラとは"> 40 </div> 41 <div class="about_right"> 42 <p> 43 デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br> 44 1日1題30日でプロのWebエンジニアを目指しましょう! 45 </p> 46 </div> 47 </div> 48 <div class="kuhaku"></div> 49 <h2>コース一覧</h2> 50 <div class="course"> 51 <div class="course_item"> 52 <img src="./img/web_first.png" alt="初級コース"> 53 <p class="course_setsumei"> 54 HTML / CSS / Bootstrap 55 </p> 56 </div> 57 <div class="course_item"> 58 <img src="./img/web_second.png" alt="中級コース"> 59 <p class="course_setsumei"> 60 HTML /CSS / JavaScript / JQuery 61 </p> 62 </div> 63 <div class="course_item"> 64 <img src="./img/web_third.png" alt="上級コース"> 65 <p class="course_setsumei"> 66 PHP / WordPress 67 </p> 68 </div> 69 </div> 70 71 <div class="kuhaku"></div> 72 73 74 <h2>お問い合わせ</h2> 75 <p>さあ今日から30日間を始めよう!</p> 76 77 <form action="#" method="post"> 78 <input type="email" name="email" placeholder="メールアドレス" class="email"> 79 <p> 80 <a href="#"><button type="submit" class="buttom">無料ではじめる</button></a> 81 </p> 82 </form> 83 84 85 <footer> 86 Copyright(C) 2020 東京フリーランス ALL Rights Reserved. 87 </footer> 88 89 </div> 90</body> 91</html>

CSS

1body { 2 text-align: center; 3 color: #082b48; 4 font-family: Verdana, Geneva, Tahoma, sans-serif; 5 line-height: 1.5; 6} 7 8img { 9 width:100%; 10 height: auto; 11 } 12 13header { 14 width: 90%; 15 max-width: 980px; 16 height: 76px; 17 display: flex; 18 margin: 0 auto; 19} 20 21h1 { 22 font-size: 24px; 23 font-weight: 900; 24 margin: auto 0; 25} 26 27nav { 28 margin-left: auto; 29} 30 31nav ul { 32 list-style: none; 33 margin: 0; 34 padding: 0; 35 display: flex; 36} 37 38nav li { 39 width: 134px; 40 text-align: center; 41 line-height: 76px; 42} 43 44nav a { 45 text-decoration: none; 46 font-size: 15px; 47 font-weight: 600; 48 color: #082b48; 49} 50 51a:hover { 52 opacity: 0.7; 53 cursor: pointer; 54} 55 56.header_img { 57 background-image: url("../img/main-vsual-nontitle.png"); 58 background-size: cover; 59 padding: 80px; 60} 61 62.header_upper { 63 margin-top: 35px; 64 margin-bottom: 25px; 65 font-size: 45px; 66 font-weight: bold; 67} 68 69.header_bottom { 70 margin-top: 50px; 71 font-size: 16px; 72 font-weight: bold; 73 width: 350px; 74 margin: 0 auto; 75} 76 77.kaigyo { 78 display: none; 79} 80 81.container { 82 width: 90%; 83 max-width: 980px; 84 margin: 0 auto; 85} 86 87h2 { 88 margin: 50px; 89 font-size: 30px; 90 font-weight: bold; 91} 92 93.about { 94 display: flex; 95 justify-content: space-between; 96} 97 98.about_left { 99 width: 48%; 100} 101 102.about_right { 103 width: 48%; 104 text-align: left; 105} 106 107.kuhaku { 108 height: 35px; 109} 110 111.course { 112 display: flex; 113 justify-content: space-between; 114} 115 116.course_item { 117 width: 30%; 118} 119 120.course_setsumei { 121 text-align: left; 122} 123 124.email { 125 width: 600px; 126 height: 50px; 127 border-radius: 30px; 128 font-size: 18px; 129 padding-left: 10px; 130 margin-bottom: 25px; 131} 132 133.buttom { 134 background-color: #EC6D64; 135 width: 42%; 136 height: 80px; 137 font-size: 25px; 138 font-weight: bold; 139 color: #fff; 140 border-radius: 10px; 141} 142 143.buttom:hover { 144 cursor: pointer; 145} 146 147footer { 148 border-top: 2px solid rgb(212, 212, 212); 149 margin-top: 130px; 150 margin-bottom: 30px; 151 padding-top: 15px; 152 float: right; 153 font-size: 13px; 154} 155 156/* スマホ */ 157 158@media (max-width:767px) { 159 160 header { 161 display: initial; 162 } 163 164 nav { 165 margin-left: none; 166 margin: 0 auto; 167 } 168 169 .header_img { 170 padding: 120px 0; 171 } 172 173 .header_bottom { 174 width: auto; 175 } 176 177 .kaigyo { 178 display: block; 179 } 180 181 .about { 182 margin: 0 auto; 183 display: initial; 184 justify-content: initial; 185 } 186 187 .about_left { 188 width: 90%; 189 } 190 191 .about_right { 192 width: 90%; 193 text-align: left; 194 } 195 196 .course { 197 display: initial; 198 justify-content: initial; 199 } 200 201 .course_item { 202 width: 100%; 203 } 204 205 .course_setsumei { 206 text-align: left; 207 margin-bottom: 20px; 208 } 209 210 .email { 211 width: 90%; 212 } 213 214 footer { 215 float: none; 216 } 217 218 219}

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

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

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

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

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

guest

回答2

0

ベストアンサー

デイトラの課題ということで、直接的な回答ではなく考え方、調べ方を書きます。
(魚を恵んでもらう方法ばかりを教えて、肝心の魚の釣り方を教えないのがデイトラの欠点だと思います)

メディアクエリにて767pxで横幅指定をしているのですが、610pxくらいでレスポンシブサイトに適応します。

現段階(2021.05.30 14:30)で見る限り、メディアクエリは767pxを境界できちんと有効になっています。問題ありません。
後述の検証ツールでメディアクエリを設定している要素のスタイルをチェックすれば、どの時点でメディアクエリが有効になるか目視で分かります。

またレスポンシブサイトではヘッダーメニューが中央揃えにならないので、是非ご回答いただければ幸いです。

中央寄せの方法については、以下のサイトが非常に参考になるので全て読んでから適切な方法で実装してください。
「中央寄せ css」で検索すれば一番上にきます(少なくとも私の環境では)
https://www.granfairs.com/blog/staff/centering-by-css
どれが適切か判断がつかなければ、とりあえず7番目の方法で実装すれば良いでしょう。(もっとも汎用的です)

他の方もおっしゃるように、検証ツールを使いこなさないとWebページ開発は覚束ないです。
各要素に適用されているスタイルを調査したり、レスポンシブデザインの確認にも重宝します。

検証ツールは非常に盛沢山の機能が備わっていますが、最低限覚えてほしいことが記載されているページを紹介します。

とりあえず簡単な使い方の紹介
https://homupedia.com/editor-devtools-features.html

詳細な機能の説明が網羅されたサイト(ちょっと難しい)
https://murashun.jp/article/performance/chrome-devtools.html

以上の説明は全てGoogle Chromeでの機能ですが、windowsでもmacでもWebデザインの開発にはchromeを使用することをお勧めします。ネットでの情報が最も多く、検証ツール自体が使いやすいです。

投稿2021/05/30 05:48

編集2021/05/30 05:49
hope_mucci

総合スコア4447

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

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

marton

2021/06/01 12:32

解決しました。貴重なご意見ありがとうございます。
guest

0

開発者ツールで要素を選択してCSSの効き具合を確かめたり、書き込んで試すなどはされたのでしょうか?
参考:
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
※Chrome以外のブラウザでも同様の機能あります、ググってみてください。

開発者ツールでいじってみて、こんな感じになりましたがこういう風にしたいということで合ってますか?
イメージ説明
ご自分で答えにたどり着いてほしいのでCSSは付記しません

投稿2021/05/30 05:09

Ta-tun

総合スコア26

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

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

marton

2021/06/01 12:32

解決しました。貴重なご意見ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問