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

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

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

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

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

1120閲覧

liタグでスペースを消せるようにしたい

KIT0KIT0

総合スコア5

HTML5

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

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/10/02 13:27

編集2019/10/02 15:15

前提・実現したいこと

jQueryでクラスを抽出しソートするページを作ろうとしています。
まずこちらのページのJSとCSS、HTMLをそのまま使用して実装しようとしました。

発生している問題・エラーメッセージ

jQueryの動作に問題はないものの、こちらのページのCODEPENに表示されるようなliになりませんでした。
どうしてもGreenやREDの前に空白が生まれてしまいます。見栄えが悪いため、なんとか改善したいです。

該当のソースコード

HTML

1<div class="wrapper"> 2 <p class="message">↓のボタンをクリックしてください↓</p> 3 <ul class="sortNav"> 4 <li class="btnGreen">Green</li> 5 <li class="btnRed">Red</li> 6 <li class="btnBlue">Blue</li> 7 <li class="btnAll">All</li> 8 </ul> 9 <div class="container"> 10 <div class="green">sample</div> 11 <div class="blue">sample</div> 12 <div class="red">sample</div> 13 <div class="green">sample</div> 14 <div class="blue">sample</div> 15 <div class="red">sample</div> 16 <div class="green">sample</div> 17 <div class="blue">sample</div> 18 <div class="red">sample</div> 19 <div class="green">sample</div> 20 <div class="blue">sample</div> 21 <div class="red">sample</div> 22 <div class="green">sample</div> 23 <div class="blue">sample</div> 24 <div class="red">sample</div> 25 </div> 26</div>

CSS

1.wrapper { 2 width:600px; 3 margin: 30px auto; 4} 5.message { 6 margin-bottom: 10px; 7} 8.sortNav { 9 overflow: hidden; 10 margin-bottom: 30px; 11} 12.sortNav li { 13 list-style:none; 14 float: left; 15 margin-left: 10px; 16 color: #fff; 17 font-weight: bold; 18 padding: 5px 10px; 19 cursor: pointer; 20 border-radius: 15px; 21} 22.green,.blue,.red { 23 width: 50px; 24 height: 50px; 25 line-height: 50px; 26 verticel-align: middle; 27 text-align: center; 28 margin: 10px; 29 font-size: 10px; 30 color: #fff; 31 float: left; 32} 33.green, .btnGreen { 34 background-color: #238C00; 35} 36.blue, .btnBlue { 37 background-color: #00f; 38} 39.red, .btnRed { 40 background-color: #f00; 41} 42.btnAll { 43 background-color: #999; 44}

JS

1$(function(){ 2 $('.sortNav li').each(function(){ 3 $(this).click(function(){ 4 var btnName = $(this).attr("class").substring(3).toLowerCase(); 5 var className = '.'; 6 className += btnName; 7 if(btnName == 'all') { 8 $('.container > div').fadeIn(200); 9 } else { 10 $('.container div:not(className)').hide(); 11 $(className).fadeIn(200); 12 } 13 }); 14 }); 15});

【追記】現在の状況

イメージ説明

このようなliの前に本来あったであろう【・】と思われる部分のスペースが消えません。

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

質問の意図にあっているかは不安なのですが、

.sortNav { overflow: hidden; margin-bottom: 30px; padding:0px; }

とするといかがですか

追記:
以下だといかがでしょうか

<div class="wrapper"> <p class="message">↓のボタンをクリックしてください↓</p> <div class="sortNav"> <div class="btnGreen">Green</div> <div class="btnRed">Red</div> <div class="btnBlue">Blue</div> <div class="btnAll">All</div> </div> <div class="container"> <div class="green">sample</div> <div class="blue">sample</div> <div class="red">sample</div> <div class="green">sample</div> <div class="blue">sample</div> <div class="red">sample</div> <div class="green">sample</div> <div class="blue">sample</div> <div class="red">sample</div> <div class="green">sample</div> <div class="blue">sample</div> <div class="red">sample</div> <div class="green">sample</div> <div class="blue">sample</div> <div class="red">sample</div> </div> </div> <style> .wrapper { width:600px; margin: 30px auto; } .message { margin-bottom: 10px; } .sortNav { overflow: hidden; margin-bottom: 30px; } .sortNav div { list-style:none; float: left; margin-left: 10px; color: #fff; font-weight: bold; padding: 5px 10px; cursor: pointer; border-radius: 15px; } .green,.blue,.red { width: 50px; height: 50px; line-height: 50px; verticel-align: middle; text-align: center; margin: 10px; font-size: 10px; color: #fff; float: left; } .green, .btnGreen { background-color: #238C00; } .blue, .btnBlue { background-color: #00f; } .red, .btnRed { background-color: #f00; } .btnAll { background-color: #999; } </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> $(function(){ $('.sortNav div').each(function(){ $(this).click(function(){ var btnName = $(this).attr("class").substring(3).toLowerCase(); var className = '.'; className += btnName; if(btnName == 'all') { $('.container > div').fadeIn(200); } else { $('.container div:not(className)').hide(); $(className).fadeIn(200); } }); }); }); </script>

投稿2019/10/02 13:34

編集2019/10/02 15:27
kokemomo.sour

総合スコア330

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

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

KIT0KIT0

2019/10/02 15:18

変化なく、スペース部分は消えませんでした…。 質問の意図をわかりやすくするために画像を追加しました。お時間があればぜひお願いします。
kokemomo.sour

2019/10/02 15:28

私の環境ですと正常に表示されており、ブラウザ依存の問題かもしれません。(詳しく調査した訳ではないおですがIEは怪しいです。。) いっそのことli要素をdiv要素に変えてはいかがでしょうか。 編集したコード全文を回答に追記しました。
KIT0KIT0

2019/10/03 01:32

ご指摘のようにli要素をdiv要素に書き換えることによってなんとか解決できました!ありがとうございます。これで見栄えがましになりました! 根本的な原因はわからないものの、IEではなくChromeの使用なので、使用しているテーマに原因を感じています。またli要素の方の解決もできるように頑張ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問