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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

2回答

27598閲覧

セレクトボックスを<ul><li>で実現したい

hananoko_runrun

総合スコア21

CSS3

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

4クリップ

投稿2016/09/06 06:44

###前提・実現したいこと

現在、下記のような、カテゴリをセレクトすると写真が絞り込みされるような
フォトギャラリーを作っております。

作りたいイメージ

セレクトボックスを<select><option>タグで作ろうと思ったのですが、
select自体のデフォルトの線や矢印を消すことはできても下記の赤線の部分
optionの一覧の周りの線やoptionを消すことはできませんでした。

option

そのため、セレクトボックスを<select><option>タグではなく<ul><li>で実現したい
のですが、そのための方法や、参考サイトなどをご教授いただけたら嬉しいです。

どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

はじめまして!
以下の内容で良さそうであれば、いろいろいじってみてくださいm(_ _)m

セレクトされたアイテムにクラス"selected"を付与して選択されたものとそうでないものを区別しています。

イメージ説明

HTML

1<div class="display_selectedItem"></div> 2<ul class="select_box"> 3 <li class="selected">選んでね</li> 4 <li>りんご</li> 5 <li>バナナ</li> 6 <li>桃</li> 7 <li>オレンジ</li> 8</ul>

Javascript

1 $(function(){ 2 var selectedItem = $("ul.select_box li.selected").text() 3 var selectBox = $("ul.select_box") 4 var selectItems = $("ul.select_box li") 5 var display = $(".display_selectedItem") 6 7 display.text(selectedItem) 8 selectBox.hide(); 9 $("li.selected").css("background","#f8f8f8"); 10 11 display.on("click",function(){ 12 selectBox.show(); 13 }) 14 15 selectItems.on("click",function(){ 16 selectItems.removeClass("selected").css("background","#fff"); 17 $(this).addClass("selected").css("background","#f8f8f8"); 18 selectedItem = $("li.selected").text() 19 selectBox.hide(); 20 display.text(selectedItem) 21 }) 22 })

css

1.display_selectedItem { 2 width: 200px; 3 box-sizing: border-box; 4 border: 2px solid #c5c5c5; 5 border-radius: 10px; 6 padding: 5px 10px; 7} 8.select_box { 9 width: 200px; 10 border: 1px solid #c5c5c5; 11} 12.select_box li { 13 cursor: default; 14 box-sizing: border-box; 15 padding: 2px 10px; 16}

投稿2016/09/07 01:38

編集2016/09/07 01:39
MaShiRo_H

総合スコア328

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

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

hananoko_runrun

2016/09/07 02:11

>MaShiRo_H様 素晴らしいコードをありがとうございます! webデザイナーですが、お恥ずかしながら私はjavascriptがめっきりなので本当に助かりました。 MaShiRo_H様はプロフィールを拝見させていただきましたが、Webデザインはじめたてほやほやとのことでしたが、本当に恐れ入りました!!! 私もjavascript頑張らないとなと改めて反省です汗 また是非お力をお貸しください。 どうぞよろしくお願いいたします。
MaShiRo_H

2016/09/07 02:17

こちらこそご丁寧にありがとうございます*^^* ネット上にhow-toが転がってなくてもいろいろこねくりまわしているとそれっぽいものって意外とできるもので、パズルを解くように、いかに頭を柔軟にさせるかが勝負な気がしますᕙ( ・ᗨ・ )ᕗ 私もまだまだ至らない点が多々あるので、お互い頑張りましょう!
hananoko_runrun

2016/09/07 02:25

こちらこそ、返信いただき恐縮です>< 私は、こねくり回すだけのベースもなくってでして。。。 一度挫折してからjavascriptは苦手意識があり、再チャレンジできていませんでした汗 でも仕事上やはり、どうしてもネットのhowtoだけでは済まないことが多く、、、 私もMaShiRo_H様を見習って、少しづつでも頑張ろうと思います!ʕ•ᴥ•ʔ ありがとうございますっ!
hananoko_runrun

2016/09/07 04:47

>MaShiRo_H様 もしまだこちらを見られておりましたら、大変恐縮なのですが、お力をお貸しいただきたく。。。 本当に少しだけいじって、マウスオーバーした時に、 ・リストの一覧が表示 ・マウスが乗っているリストに色がつく というところは再現できたのですが、マウスアウトした時に 一覧が非表示になるという部分の再現ができませんでした。 実現したいことは、リストから新しいカテゴリが選ばれなくても リストがマウスアウトで非表示になるようにしたいです。 <script type="text/javascript"> $(function(){ var selectedItem = $("ul.select_box li.selected").text() var selectBox = $("ul.select_box") var selectItems = $("ul.select_box li") var display = $(".display_selectedItem") display.text(selectedItem) selectBox.hide(); $("li.selected").css("background","rgba(176,157,96,.4)"); display.on("mouseover",function(){ selectBox.show(); }) selectItems.on("mouseover",function(){ selectItems.removeClass("selected").css("background","rgba(255,255,255,.8)"); $(this).addClass("selected").css("background","rgba(176,157,96,.4)"); }) selectItems.on("click",function(){ selectItems.removeClass("selected").css("background","rgba(255,255,255,.8)"); $(this).addClass("selected").css("background","rgba(176,157,96,.4)"); selectedItem = $("li.selected").text() selectBox.hide(); display.text(selectedItem) }) }) </script> 現在のコードは上記の通りになっています。 おこがましくて申し訳ないのですが、もしよろしければまたお力をお貸しくださいませ。 どうぞよろしくお願いいたします。
guest

0

ご質問ありがとうございますm(_ _)m

Javascript

1$(".select_box").mouseleave(function(){ 2 $(this).hide() 3});

上記でご希望の動きになりませんか?
よろしければご確認ください^^/

ちなみに、mouseover()/mouseout()は余計な動きが入りチラチラしやすいので、
メニュー等に使う際はmouseenter()/mouseleave()をお勧めします^^

参考:
jQuery .mouseenter() / .mouseleave() と .mouseover() / .mouseout() の違い

投稿2016/09/07 05:13

MaShiRo_H

総合スコア328

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

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

hananoko_runrun

2016/09/07 05:34

>MaShiRo_H様 お忙しい中の度々のご回答本当に感謝いたしますm(_ _)m すでにベストアンサーをつけてしまった後だったのに、ご確認いただいて 本当に感謝です! こちらのコードでやりたいことがすべて実現できました。 そして、.mouseenter() / .mouseleave() と .mouseover() / .mouseout() の違いについても、全く知らなかったので、勉強になりました! 本当にありがとうございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問