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

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

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

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

jQuery

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

CSS

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

Q&A

0回答

234閲覧

サイト作成ソフトsiriusで外部CSSファイルが読み込めない

manatttttttt

総合スコア15

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2019/01/31 10:05

編集2022/01/12 10:55

サイト作成ソフトsiriusを使っています。
並び替え機能のjsを入れて、動きはするのですがCSSが効いてないようなのです。
横に4列綺麗に並んでほしいのですが、縦に並んでしまって困っています。
勉強不足で申し訳ないですがどなたかご教授頂けないでしょうか。

js↓

<link rel="stylesheet" href="./shuffle.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var lists = $('.list li'); $(document).on('change', '.serchBox select', function() { lists.show(); for (var i = 0; i < $('.serchBox select').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox select').eq(i).attr('name'); // 絞り込みの対象を取得 var target = $('.serchBox select').eq(i).val();
if(target != '') { for (var j = 0; j < lists.length; j++) { // 絞り込み対象でない場合は非表示 if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) { lists.eq(j).hide(); } }; } }; });

});
</script>

html↓

<div class="serchBox"> <select name="type"> <option value="">種類を選択</option> <option value="mammals">哺乳類</option> <option value="reptiles">爬虫類</option> <option value="birds">鳥類</option> <option value="other">その他</option> </select> <select name="live"> <option value="">生活を選択</option> <option value="water">水中</option> <option value="land">陸上</option> <option value="water-and-land">水中と陸上</option> <option value="sky">空</option> </select> <select name="color"> <option value="">色を選択</option> <option value="black">黒系</option> <option value="white">白系</option> <option value="green">緑系</option> <option value="brown">茶系</option> </select> <select name="size"> <option value="">大きさを選択</option> <option value="small">小さい</option> <option value="middle">中くらい</option> <option value="large">大きい</option> </select> <select name="name"> <option value="">名前を選択</option> <option value="dog">イヌ</option> <option value="cat">ネコ</option> <option value="monkey">サル</option> <option value="dolphin">イルカ</option> <option value="jellyfish">クラゲ</option> <option value="penguin">ペンギン</option> <option value="turtle">カメ</option> <option value="redstart">ジョウビタキ</option> <option value="myna">九官鳥</option> <option value="butterfly">蝶</option> <option value="crocodile">ワニ</option> </select> </div> <ul class="list"> <li> <img src="01.jpg" width="240" height="155"> <p class="name">名前:<span class="dolphin">イルカ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="02.jpg" width="240" height="155"> <p class="name">名前:<span class="jellyfish">クラゲ</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> ・ ・ ・ <li> <img src="14.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> </ul>

cssはVisual Studio Codeを使ってファイルにして呼び込みました

css↓
@charset "utf-8";

body {
margin: 0;
padding: 0;
}
.back {
position: fixed;
bottom: 10px;
right: 10px;
}
ul {
margin: 0;
padding-left: 0;
}
li {
list-style: none;
}
p {
margin: 0;
}
#page {
width: 1040px;
margin: 0 auto;
}

.searchList {
margin-bottom: 20px;
}
.searchList li {
display: inline-block;
}
.list {
overflow: hidden;
}
.list li {
float: left;
width: 240px;
margin: 10px;
}

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問