このサイトのカテゴリのチェックボックスを横並びで綺麗な配置する方法を教えてください。 <dt>のジャ

締切済

質問者：彩いろどり
質問日時：2024/09/06 21:57
回答数：4件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： gura_
回答日時：2024/09/07 16:53

彩いろどりさん

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

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

<!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">

<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="その他１">その他１</label>
</dd>
<dd class="search-list__filter-data">
<label><input type="checkbox" class="check-box" data-filter="その他２">その他その他２</label>
</dd>

</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>

- 0
- 件

通報する

この回答へのお礼

ありがとう

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

通報する

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

No.3

回答者： fujillin
回答日時：2024/09/07 14:40

No2です。

連投失礼。

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

複数行になった際に、□の位置を揃えることに関しては同様です。

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

参考程度に

No.2

回答者： fujillin
回答日時：2024/09/07 11:47

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の□の位置は文字数依存なので、ずれることになります。
これを一定位置にしたければ、項目の幅を固定にしておけば良いでしょう。
文字数が多い項目は、幅をその倍数に設定するなどで対応可能です。

ご参考までに。

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2024/09/06 23:23

こんばんは

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

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

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

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

※ グリッドでレイアウトしても同様のことは可能と思います。