架空の映画のネタバレレビュー

このサイトのカテゴリのチェックボックスを横並びで綺麗な配置する方法を教えてください。
<dt>のジャンルはそのままで、
<dd>の要素だけを横並びにしたいです。
チェックボックスのテキストは3文字や、10文字などを10個くらい入れる予定です。
それが視認しやすく綺麗に横並びで配置できたら嬉しいです。

https://codepen.io/kojiWebCode/pen/QWJzmLV

A 回答 (4件)

彩いろどり さん


 ・・・・視認しやすく綺麗に横並びで配置できたら嬉しい・・・・・・

こういう事がしたいのではないですか。↓
--一部色付けしました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7 …

<style>
@charset "UTF-8";
.search-list {
padding: 50px;
}

.search-list__filter-types {
margin-top: 30px;
display: flex; flex-wrap: wrap;
}

.search-list__filter-name {
font-size: 20px;
font-weight: 700;
}

.search-list__table {
margin-top: 40px;
width: 100%;
table-layout: fixed;
}
.search-list__table th, .search-list__table td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.search-list__table th {
font-weight: 700;
font-size: 18px;
}
.search-list__table th.sort {
cursor: pointer;
}
.search-list__table th.sort.desc::after {
content: "▼";
margin-left: 10px;
font-size: 16px;
}
.search-list__table th.sort.asc::after {
content: "▲";
margin-left: 10px;
font-size: 16px;
}

dt { width: 100%;
}
dd { background-color: #dfd; margin: 10px 0 0 2%; width: 31%;
}
</style>
</head>
<body>
<div class="search-list" id="js-search-list">
<!-- フィルタリング -->
<dl class="search-list__filter-types">
<!-- <div class="search-list__filter-type"> 削除 -->
<dt class="search-list__filter-name">ジャンル</dt>
<dd class="search-list__filter-data">
<label><input type="checkbox" class="check-box" data-filter="小説">小説</label>
</dd>
<dd class="search-list__filter-data">
<label><input type="checkbox" class="check-box" data-filter="専門書">専門書</label>
</dd>
<dd class="search-list__filter-data">
<label><input type="checkbox" class="check-box" data-filter="漫画">漫画</label>
</dd>
<dd class="search-list__filter-data">
<label><input type="checkbox" class="check-box" data-filter="その他1">その他1</label>
</dd>
<dd class="search-list__filter-data">
<label><input type="checkbox" class="check-box" data-filter="その他2">その他その他2</label>
</dd>
<!-- </div> -->
</dl>

<!-- テーブル -->
<table class="search-list__table">
<thead>
<tr>
<th class="sort" data-sort="title">タイトル</th>
<th class="sort" data-sort="genre">ジャンル</th>
<th class="sort" data-sort="price">価格</th>
<th class="sort" data-sort="release">発売年</th>
</tr>
</thead>

<tbody class="list">
<tr>
<td class="title">天空の彼方へ</td>
<td class="genre">小説</td>
<td class="price" data-price="780">¥780</td>
<td class="release">2018年</td>
</tr>
<tr>
<td class="title">HTML&CSS入門</td>
<td class="genre">専門書</td>
<td class="price" data-price="2980">¥2,980</td>
<td class="release">2018年</td>
</tr>
<tr>
<td class="title">時空の旅人</td>
<td class="genre">漫画</td>
<td class="price" data-price="480">¥480</td>
<td class="release">2021年</td>
</tr>
<tr>
<td class="title">JavaScript入門</td>
<td class="genre">専門書</td>
<td class="price" data-price="4980">¥4,980</td>
<td class="release">2019年</td>
</tr>
<tr>
<td class="title">星屑の詩人</td>
<td class="genre">小説</td>
<td class="price" data-price="1080">¥1,080</td>
<td class="release">2020年</td>
</tr>
</tbody>
</table>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/list.js/2 …

<script>
const options = {
valueNames: [
'title',
'genre',
'release',
//'price'
{ name: 'price', attr: 'data-price' },
],
};

// list.jsのインスタンス生成
const searchList = new List('js-search-list', options);

// チェックボックスの変更を監視
const checkboxes = document.getElementsByClassName('check-box');
for (const checkbox of checkboxes) {
checkbox.addEventListener('change', applyFilters);
}

function applyFilters() {
// 選択されたフィルタの値を取得
const filter = [];
for (const checkbox of checkboxes) {
if (checkbox.checked) {
const value = checkbox.getAttribute('data-filter');
filter.push(value);
}
}

// フィルタを適用してリストを更新
searchList.filter(function (item) {
const itemGenres = item.values().genre;
const filterMatched = filter.length === 0 || filter.some(filterItem => itemGenres.includes(filterItem));
return filterMatched;
});
}
</script>
</body>
</html>
「このサイトのカテゴリのチェックボックスを」の回答画像4
    • good
    • 0
この回答へのお礼

ありがとう

まさに!その通りです!
わかりやすい図まで付けてくださりありがとうございますー!!!

お礼日時:2024/09/07 22:44

No2です。



連投失礼。

考えてみたら、dd要素をインラインで並べれば良いだけですね。
面倒なことはせずとも、
 .search-list__filter-type dd { display: inline-block; }
だけで、すむ話でした。
失礼いたしました。

複数行になった際に、□の位置を揃えることに関しては同様です。
    • good
    • 0
この回答へのお礼

ありがとうございます!
インライン要素でも出来たんですね!
教えてくださりありがとうございます!!!
勉強になります!!!

お礼日時:2024/09/07 22:44

No1です。



項目数が増えた場合(またはブラウザ幅が小さい場合など)には、複数行になってよいものとするなら、dt要素もflexレイアウトのままで可能です。
幅を100%にしておけば1行分の要素幅になるので、結果的に改行されます。

各項目の文字数に応じて、左方に詰めて表示する形式なら以下のような感じでできると思います。

.search-list__filter-type { display: flex; flex-wrap: wrap; }
.search-list__filter-type dt { width: 100%; }
.search-list__filter-type dd {
box-sizing: border-box;
margin: 0; padding-left: 1em;
/* width: 6em; */
}

※ No1にも書きましたが、複数行になった際に、上記だとinputの□の位置は文字数依存なので、ずれることになります。
これを一定位置にしたければ、項目の幅を固定にしておけば良いでしょう。
文字数が多い項目は、幅をその倍数に設定するなどで対応可能です。

ご参考までに。
    • good
    • 0

こんばんは



方法はいろいろありそうですが、以下は一つのアイデアとして・・

親要素のdivに display: flex; でレイアウトするのが簡単だと思います。
それだけだと、dt要素も横並びになってしまうので、dtは position: absolute; にしてフローレイアウトから外して、親divに対して別途レイアウトしておけば宜しいでしょう。

「絶対に1行内で横並び」と言うのであればそのままでも良いですが、項目数が多い場合などで、1項目の幅が2文字程度になると、項目内で改行されるので見にくくなります。
全体で、改行を許可して(flex-wrap: wrap;)項目数が多い場合には、複数行に横並びになるようにしておいた方が見やすいのではないかと思います。

>チェックボックスのテキストは3文字や、10文字などを10個くらい入れる予定~
文字数の差がかなりあるので、複数行になった場合に、そのまま並べるとチェックボックスの位置が必ずしもそろわない可能性があります。
1項目の幅を固定(あるいはその倍数など)に指定しておくなどすれば、チェックボックスの位置を揃えることもできるでしょう。

※ グリッドでレイアウトしても同様のことは可能と思います。
    • good
    • 0
この回答へのお礼

助かりました

まさにその辺で困ってました!
解決策のご助言ありがとうございます!やってみます!
縦のがチェックボックスの視認性は良いけどスクロールしないと絞り込んだか、わからないので困ってました!

お礼日時:2024/09/07 00:26

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


おすすめ情報

このQ&Aを見た人がよく見るQ&A