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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

Q&A

解決済

2回答

759閲覧

リスト先頭に画像配置がしたい

cn4433

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2022/01/06 01:18

  • 問題点

ハンバーガーメニュークリック時に表示されるリスト先頭に画像を配置したい(画像参照)のですが、配置すると下線がなくなって高さも揃いません

  • 試したこと

liをdiv要素で囲み、クラス指定。
クラスに画像をCSSで挿入
※画像挿入方法はhtmlでも問題はありません

イメージ説明

HTML

1<header> 2 <div class="hamburger-menu"> 3 <input type="checkbox" id="menu-btn-check"> 4 <label for="menu-btn-check" class="menu-btn"><span></span></label> 5 <!--ここからメニュー--> 6 <div class="menu-content"> 7 <ul> 8 <div class="hair"> 9 <li> 10 <a href="#">ヘア</a> 11 </li> 12 </div> 13 <li> 14 <a href="#">ヘアケア</a> 15 </li> 16 <li> 17 <a href="#">ライフスタイル</a> 18 </li> 19 <li> 20 <a href="#">トピックス</a> 21 </li> 22 </ul> 23 </div> 24 <!--ここまでメニュー--> 25 </div> 26</header>

CSS

1.menu-btn { 2 position: fixed; 3 top: 10px; 4 right: 10px; 5 display: flex; 6 height: 60px; 7 width: 60px; 8 justify-content: center; 9 align-items: center; 10 z-index: 90; 11 background-color: #666; 12} 13.menu-btn span, 14.menu-btn span:before, 15.menu-btn span:after { 16 content: ""; 17 display: block; 18 height: 3px; 19 width: 25px; 20 border-radius: 3px; 21 background-color: #fff; 22 position: absolute; 23} 24.menu-btn span:before { 25 bottom: 8px; 26} 27.menu-btn span:after { 28 top: 8px; 29} 30 31/* クリックでバツ */ 32#menu-btn-check:checked ~ .menu-btn span { 33 background-color: rgba( 34 255, 35 255, 36 255, 37 0 38 ); /*メニューオープン時は真ん中の線を透明にする*/ 39} 40#menu-btn-check:checked ~ .menu-btn span::before { 41 bottom: 0; 42 transform: rotate(45deg); 43} 44#menu-btn-check:checked ~ .menu-btn span::after { 45 top: 0; 46 transform: rotate(-45deg); 47} 48 49#menu-btn-check { 50 display: none; 51} 52 53/* メニュー中身 */ 54.menu-content { 55 width: 100%; 56 height: 100%; 57 position: fixed; 58 top: 0; 59 left: 0; 60 z-index: 80; 61 background-color: #ddd; 62} 63.menu-content ul { 64 padding: 70px 10px 0; 65} 66.menu-content ul li { 67 border-bottom: solid 1px #666; 68 list-style: none; 69} 70.menu-content ul li a { 71 display: block; 72 width: 100%; 73 font-size: 15px; 74 box-sizing: border-box; 75 color: #666; 76 text-decoration: none; 77 padding: 9px 15px 10px 0; 78 position: relative; 79} 80.menu-content ul li a::before { 81 content: ""; 82 width: 7px; 83 height: 7px; 84 border-top: solid 2px #666; 85 border-right: solid 2px #666; 86 transform: rotate(45deg); 87 position: absolute; 88 right: 11px; 89 top: 16px; 90} 91 92/* ボタン押したらメニュー出る */ 93.menu-content { 94 width: 100%; 95 height: 100%; 96 position: fixed; 97 top: 0; 98 left: 100%; /*leftの値を変更してメニューを画面外へ*/ 99 z-index: 80; 100 background-color: #ddd; 101 transition: all 0.5s; /*アニメーション設定*/ 102} 103 104#menu-btn-check:checked ~ .menu-content { 105 left: 0; /*メニューを画面内へ*/ 106} 107 108/* リスト横アイコン */ 109.hair { 110 background: url(http://mugen-group.co.jp/wp-content/uploads/2022/01/matey_icon01.svg) 111 no-repeat 0 0; 112 background-size: auto 20px; 113 padding-left: 30px; 114} 115

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

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

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

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

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

guest

回答2

0

まずHTMLでul直下にdivがあるのは違反だと思うのでやめたほうがいいです。

HTML

1 <ul> 2 <li class="hair"> 3 <a href="#">ヘア</a> 4 </li>

そしてCSSは

CSS

1.hair { 2 background-image: url(http://mugen-group.co.jp/wp-content/uploads/2022/01/matey_icon01.svg); 3 background-repeat: no-repeat; 4 background-size: auto 20px; 5 background-position: 0 7px; 6 padding-left: 30px; 7}

位置はcenter指定もいいですけどこのように数値で微調整可能です。

投稿2022/01/06 02:59

itagagaki

総合スコア8402

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

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

0

ベストアンサー

.menu-content ul liのborder-bottomを消して.hairを以下にするとどうでしょうか?

CSS

1.hair { 2 background: url(http://mugen-group.co.jp/wp-content/uploads/2022/01/matey_icon01.svg) no-repeat 0 0; 3 background-size: auto 20px; 4 padding-left: 30px; 5 background-position-y: center; 6 border-bottom: solid 1px #666; 7}

投稿2022/01/06 02:44

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問