htmlタグに詳しい方 CSSの内容を下記に示します。 パソコンで表示しても一切問題はありませんが、 スマホから表示すると、メニューはツリー?

htmlタグに詳しい方 CSSの内容を下記に示します。 パソコンで表示しても一切問題はありませんが、 スマホから表示すると、メニューはツリー? アコーディオンのように 表示されますが、 5つ表示されるメニューの内、5つ目以外の1~4はメニューが押せません。 5は普通にリンクされたページへ行けます。 その後、何度かチャレンジすると、スマホでタップできる範囲が極端に小さく スマホの画面端あたりにちょっとだけ押せる範囲があるようです。 改善できませんか? /*画面幅800px以下の設定 ------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width:800px){ /*header(小さな端末用:上部ブロック) ---------------------------------------------------------------------------*/ /*headerブロック*/ header.sh { background-color: rgba(68,141,179,0.5); /*背景色68,141,179は、リンクカラーをrgb値にしたもの。0.5は色が50%出た状態。*/ } /*ロゴ画像ブロック*/ header.sh .logo { width: 80px; /*ロゴ画像の幅*/ } /*メインメニュー ---------------------------------------------------------------------------*/ /*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。 透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/ @keyframes menubar { 0% {opacity: 0;} 100% {opacity: 1;} } /*スマホ用メニューブロック*/ #menubar-s { display: block; position: fixed; z-index: 3; top: 0px; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.8); /*背景色*/ animation-name: menubar; /*上のkeyframesの名前*/ animation-duration: 0.5s; /*アニメーションの実行時間。0.5秒。*/ animation-fill-mode: both; /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/ border-top: 1px solid #fff; /*上の線の幅、線種、色*/ } /*navブロックのみの追加指定*/ #menubar-s nav { border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/ overflow: auto; } /*メニュー1個あたりの設定*/ #menubar-s nav li a { display: block;text-decoration: none;width: 100%; border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/ font-size: 16px; /*文字サイズ*/ height: 100px; /*高さ*/ height: 60px; /*高さ*/ color: #fff; /*文字色*/ } /*最後のnavメニューの下線を消す*/ #menubar-s nav li:last-child a { border-bottom: none; } /*テキスト*/ #menubar-s nav li a span { display: block; padding-top: 15px; /*上に空ける余白。上下のバランスをとります。*/ padding-left: 80px; /*左に空ける余白*/ } /*menu1*/ .menu1 a { background-position: 20px 0px; } /*menu2*/ .menu2 a { background-position: 20px -60px; } /*menu3*/ .menu3 a { background-position: 20px -120px; } /*menu4*/ .menu4 a { background-position: 20px -180px; } /*menu5*/ .menu5 a { background-position: 20px -240px; } /*PC用メニューを非表示にする*/ #menubar {display: none;} /*3本バーアイコン設定 ---------------------------------------------------------------------------*/ /*3本バーブロック*/ #menubar_hdr { display: block; position: fixed;z-index: 50; top: 10px; /*上から10pxの場所に配置*/ right: 10px; /*右から10pxの場所に配置*/ } /*アイコン共通設定*/ #menubar_hdr.close, #menubar_hdr.open { width: 50px; /*幅*/ height: 50px; /*高さ*/ border-radius: 50%; /*円形にする*/ } /*三本バーアイコン*/ #menubar_hdr.close { background: #448db3 url(../images/icon_menu.png) no-repeat center top/50px; /*背景色、背景画像の読み込み、画像の上半分(3本マーク)を表示。幅は50px。*/ } /*閉じるアイコン*/ #menubar_hdr.open { background: #448db3 url(../images/icon_menu.png) no-repeat center bottom/50px; /*背景色、背景画像の読み込み、画像の下半分(×マーク)を表示。幅は50px。*/ top: 5px; /*配置場所の再指定*/ } /*facebookやtwitterなどのアイコンブロック ---------------------------------------------------------------------------*/ /*アイコンを囲むブロック全体の設定*/ header .icon { clear: left; border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/ } /*アイコン画像の設定*/ header .icon img { width: 50px; } /*mainブロック ---------------------------------------------------------------------------*/ /*mainブロック*/ #main { padding-left: 3%; padding-right: 3%; } /*h2タグ*/ #main h2 { font-size: 20px; /*文字サイズ*/ letter-spacing: normal; /*文字間隔を標準に戻す*/ } /*h2タグにclass="title"をつけたタイプ。大見出し。*/ #main h2.ti

HTML、CSS | JavaScript20閲覧

ベストアンサー

0

このCSSだけではまるでわかりません。 HTMLを示してください。 あと、CSSに書かれている大量の装飾的な要素とそのコメントを削除して、コア部分に絞ってください。 クラス名が的確なら、意図することはわかります。