Q&A
「ＣＳＳは反映されているけど思う通りになっていない」
「そもそも反映されてない」
どちらでしょうか。
いずれにしても実機で見なくてもイメージ確認はＰＣブラウザでもできます。
レス
イト構築するもデベロッパーツールで確認すると全くサイトになっていません。
グローバルナビゲーションから崩れているためパーツ事に修正したいと考えております。
ご教授宜しくお願い致します。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<link href="css/reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="css/style.css" rel="stylesheet" type="text/css" madia="screen"> 8<link href="css/topindex.css" rel="stylesheet" type="text/css" madia="screen"> 9<link rel="shortcut icon" href="/favicon.ico"> 10<meta name="viewport" content="width=device-width,initial-scale=1.0"> 11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"> 12<title>*****************</title> 13</head> 14<body> 15 <div class="wrapper01"> 16 <header> 17 <!-- header--> 18 <div class="headline"> 19 <a href="./"><img src="images/rogo.svg" alt="コーポレートマーク"></a> 20 <p class="syamei">********</p> 21 </div> 22 <nav class="main-nav"> 23 <ul class="nav-list"> 24 <li class="top-nav"><a href="#">HOME</a></li> 25 <li class="top-nav"><a href="#">会社概要</a> 26 <ul> 27 <li><a href="#">会社沿革</a></li> 28 <li><a href="#">会社理念</a></li> 29 <li><a href="#">事業案内</a></li> 30 </ul> 31 </li> 32 <li class="top-nav"><a href="#">お問い合わせ</a></li> 33 <li class="top-nav"><a href="#">よくある質問</a></li> 34 <li class="top-nav"><a href="#">採用</a></li> 35 </ul> 36 </nav> 37 </header
CSS
1@charset "UTF-8"; 2 3body{ 4 max-width: 1200px; 5 margin-left: auto; 6 margin-right:auto; 7} 8.wf-notosansjapanese{font-family: .wf-notosansjapanese,"-apple-system","BlinkMacSystemFont","Noto Sans JP","Meiryo","游ゴシック","ヒラギノ角ゴ ProN",sans-serif;} 9 10.headline { 11 display: flex; 12 margin-top: 30px; 13 margin-bottom: 0; 14 margin-left: 0; 15 justify-content: space-between; 16 align-items: baseline; 17 list-style-type:none; 18} 19.headline p{ 20 font-size:30px; 21 margin-top:0; 22 font-weight: bold; 23 text-align: right; 24 margin-bottom: 0; 25 vertical-align: middle; 26} 27.nav-list{ 28 padding: 25px 0 5px 0 25px; 29 margin-top: 3px; 30 margin-bottom: 15px; 31 font-size:16px; 32 display : flex; 33 display : -webkit-box; /* old Android */ 34 display : -webkit-flex; /* Safari etc. */ 35 display : -ms-flexbox; /* IE10 */ 36 display: -o-box; /* Opera */ 37 display: box; /* ベンダープレフィックスなし */ 38 justify-content:center; 39 list-style-type:none; 40 align-items:center; 41} 42.nav-list li a { 43 text-decoration: none; 44 color: #FFFFFF; 45 background-color: #0000FF; 46 display: block; 47 padding: 5px; 48} 49.nav-list li:hover a { 50 background-color: #000080; 51} 52.nav-list li:hover ul { 53 display: block; 54} 55.nav-list li ul { 56 margin: 0px; 57 padding: 0px; 58 list-style-type: none; 59 display: none; 60 width:238px; 61 position: absolute; 62 z-index:100; 63} 64.nav-list li:hover ul{display: block;} 65.nav-list li ul a { 66 display: block; 67 text-decoration: none; 68 color: #FFFFFF; 69 background-color: #0000FF; 70} 71.nav-list li ul li:hover a { 72 background-color: #008080; 73} 74.nav-list:after { 75 content: ""; 76 clear: both; 77 display: block; 78} 79.top-nav{ 80 width:25%; 81 font-size:20px; 82 text-align: center; 83 border-right: 2px solid; 84 border-color:#ffffff; 85} 86.top-nav a{ 87 display: inline-block; 88 text-decoration: solid; 89 height: 25px; 90} 91.syamei{/*TOP社名*/ 92 font-size:30px; 93 margin-top:0; 94 font-weight: bold; 95 text-align: right; 96 margin-bottom: 0; 97 vertical-align: middle; 98} 99 100/* ########### 500px以下 ########### */ 101@media screen and (max-width: 500px){ 102.headline p{ 103 font-size:15px; 104 margin-top:0; 105 font-weight: bold; 106 text-align: right; 107 margin-bottom: 0; 108 vertical-align: middle; 109} 110}
デベロッパーツールでスマホの画面にすると下記のようになりサイトとしては機能しなくなります。
PCページではcssは繁栄されています。デベロッパーツールを見る限りcssが反映されていないように感じます。
質問編集して追記してください。
可能なら、それぞれ画面キャプチャも。
実機確認も必要でしょうね。
ブレイクポイントも５００だけでは対応しきれるか分からないので、確認してみてください。
https://daib-log.com/responsive/
提示のコードを試してみましたが500pxを境に<p class="syamei">********</p>（.headline p）のフォントサイズ等が変わることを確認しました。
指示通りになっていると思います。
何がどのように「意図と違う」のかも提示してください。
（reset.cssは適当に用意。提示のCSSをstyle.cssと仮定。topindex.cssは提示が無いので無視）
PC画面1200ｐｘで指定している場合は表示が綺麗にでます。500pxはデベロッパーツールをスクショすればいいんでしょうか？
dit．さんその際グローバルナビゲーションの横幅がかなり狭くなり二行に渡る項目はでませんでしたでしょうか？そちらを修正したいのです。
デベロッパーツールで見るとグローバルナビゲーションが左寄せになり綺麗なレイアウトにならないのです。
その「綺麗なレイアウト」をご提示ください。
上記のスクリーンショットの幅が狭くなったものが理想です
もしくはハンバーガーメニューにしてすっきりさせたいのですが、ハンバーガーメニューの作る方がわかないのでどうしたものかと・・・
それだけなら、ブレイクポイントなしで%だけでなんとかなりそうに思うのですがどうでしょうか。
フォントサイズもremとか有用に思います
「上記のスクリーンショットの幅が狭くなったもの」をご提示ください。
ブレイクポイントなしに％で対応がイメージがわきません、一例をだしていただけると助かります。
追記しました
スクリーンショットの追加拝見。
ご提示のコードを試してみましたが、おおむね1つ目3つ目のスクリーンショットどおりになっています。
ですので、理想の「綺麗なレイアウト」になっていますので、問題が再現しませんでした。
お問い合わせが下に回り込んでいる状況ですよね？それをなおしたいのですがどうすればいいんでしょうか？
-横幅に対してメニューが多すぎる
-1単語が長い
という根本的な問題は多少調整したところでついてきます。
縮めたときに幾つか非表示にするか、全メニュー隠してボタン押下（ハンバーガーメニューなど）でサイドから出すなど設計し直しが必要です。
デベロッパーツールの画面でしょうか？
「お問い合わせが下に回り込んでいる状況」が理解できませんでした。「お問い合わせ」とはメニューの中の「お問い合わせ」でしょうか？ 「下」とは何の下ですか？
グローバルナビゲーションのリスト内です
はい、「お問い合わせ」はグローバルナビゲーションのリスト内にあります。回り込んではいません。
文字はオーバーフローしていますが、それが問題なのでしょうか？
はい、送り仮名が下になっていませんか？それを直したいのです。
「2021/01/20 12:57」の私のコメント見てください。
狭めたときに現状のレイアウトを維持しようとする限り、無理です。
タイトル変更するべきでは？
>スマホ対応のcssにならない
「なってる」から。
そうするとハンバーガーメニューで非表示させた方が綺麗に表示できそうですね。横並びはflexを解除して縦並びにすればいいんでしょうか？
どのように直したいのですか？ 繰り返しになりますが、「綺麗なレイアウト」をご提示ください。
要件変わってますね。
どうしますか？
「スマホ対応のCSSになってる」ので、いったん完了しますか？
それとも、質問内容をきちんと精査しますか？
先に書いたように「設計からやり直し」なので、小手先でどうこうという話になりませんよ？
現在のタイトルに答えるにしても
「思う通りが不明。ただ、狭めても現状のレイアウトを維持しようとするなら無理」という答えになります。
設計からやり直しということはHPを初めから作り直しですか？
さぁ、それは私が決めることではないので。
「思うレイアウトがスマホでは対応しきれない」のであれば、
最低でも「スマホ時にどういうレイアウトにするか」を決める必要があるでしょうね。
方針によっては現状のHTMLだけでは足りなくなるかもしれませんし、
別ファイルとまでは行かなくても、「スマホ用サイズに狭めたときだけ表示にするHTML」も置いておく必要もあるでしょうね。
方針によりけりです。
今のHPをスマホ用にレイアウトを変えながら修正したいんですが、グローバルナビゲーションをハンバーガーメニューに隠して画像を縮小して構成していきたいんですが可能ですか？
＞可能ですか
この問いには多くはこう返ってくると思ってください。
「そのように書けば、組めば、作れば 可能。あなたができるかは知らない」
組みばできるのですね、なら調べてみればまだなんとかなるということですね
伝わってなかった。
質問として「可能か？」には「可能です」と答えるしかないということです。
わかりました、ありがとうございます。
ハンバーガーメニューつくるの難しいですね。JavaScriptを駆使しないといけないのですね。
どうしたものか悩みます。
なので、レスポンシブもハンバーガーメニューも実装されているCSSフレームワークを使うのがベターです。
単にコードの組み合わせなので自作でできないものではないですが、そこにかける時間が勿体ない。
あとは要件にあわせてどうぞ。
「cssだけでハンバーガーメニュー」で検索するとJavaScript（jQuery）を使わない方法も出てきます。簡単かどうかは別の問題ですが。
どちらにしろ既存のサイトをHTMLの構造を変えずCSSのみでレスポンシブ化するのって結構大変です。
メニュー部分に限らずPC版とスマホ版の理想形は明確にしておきましょう。
グローバルナビゲーションの横幅を短くして、フォントサイズも小さくして横並びにする方法もありますよね？
ブレイクポイントで変更できればハンバーガーメニュー作らずにすみますよね？
はい、5列のまま文字を小さくしたり、2列や1列にして文字が収まる幅にしたり、PC用のメニューとスマホ用のメニューをそれぞれ作りdisplay:noneやdisplay:blockで切り替えたり他にも様々な方法があると思います。
どのような状態が理想なのか回答者陣は知りません。質問者さんが決める内容です。
あなたの回答
tips
プレビュー
