このサイトのカテゴリのチェックボックスを横並びで綺麗な配置する方法を教えてください。
<dt>のジャンルはそのままで、
<dd>の要素だけを横並びにしたいです。
チェックボックスのテキストは3文字や、10文字などを10個くらい入れる予定です。
それが視認しやすく綺麗に横並びで配置できたら嬉しいです。
https://codepen.io/kojiWebCode/pen/QWJzmLV
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.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>
No.3
- 回答日時:
No2です。
連投失礼。
考えてみたら、dd要素をインラインで並べれば良いだけですね。
面倒なことはせずとも、
.search-list__filter-type dd { display: inline-block; }
だけで、すむ話でした。
失礼いたしました。
複数行になった際に、□の位置を揃えることに関しては同様です。
No.2
- 回答日時:
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の□の位置は文字数依存なので、ずれることになります。
これを一定位置にしたければ、項目の幅を固定にしておけば良いでしょう。
文字数が多い項目は、幅をその倍数に設定するなどで対応可能です。
ご参考までに。
No.1
- 回答日時:
こんばんは
方法はいろいろありそうですが、以下は一つのアイデアとして・・
親要素のdivに display: flex; でレイアウトするのが簡単だと思います。
それだけだと、dt要素も横並びになってしまうので、dtは position: absolute; にしてフローレイアウトから外して、親divに対して別途レイアウトしておけば宜しいでしょう。
「絶対に1行内で横並び」と言うのであればそのままでも良いですが、項目数が多い場合などで、1項目の幅が2文字程度になると、項目内で改行されるので見にくくなります。
全体で、改行を許可して(flex-wrap: wrap;)項目数が多い場合には、複数行に横並びになるようにしておいた方が見やすいのではないかと思います。
>チェックボックスのテキストは3文字や、10文字などを10個くらい入れる予定~
文字数の差がかなりあるので、複数行になった場合に、そのまま並べるとチェックボックスの位置が必ずしもそろわない可能性があります。
1項目の幅を固定(あるいはその倍数など)に指定しておくなどすれば、チェックボックスの位置を揃えることもできるでしょう。
※ グリッドでレイアウトしても同様のことは可能と思います。
まさにその辺で困ってました!
解決策のご助言ありがとうございます!やってみます!
縦のがチェックボックスの視認性は良いけどスクロールしないと絞り込んだか、わからないので困ってました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
10代と話して驚いたこと
先日10代の知り合いと話した際、フロッピーディスクの実物を見たことがない、と言われて驚きました。今後もこういうことが増えてくるのかと思うと不思議な気持ちです。
-
これ何て呼びますか
あなたのお住いの地域で、これ、何て呼びますか?
-
これ何て呼びますか Part2
あなたのお住いの地域で、これ、何て呼びますか?
-
【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
【お題】 ・買ったばかりの自転車を分解してひと言
-
うちのカレーにはこれが入ってる!って食材ありますか?
カレーって同じルーから作っても、家庭によって入っているものや味が微妙に違っていて面白いですよね! 「我が家のカレーにはこれが入ってるよ!」 という食材や調味料はありますか?
-
HTMLについて教えてください。 WEBサイトの運営を行っているのですが、前任者が飛んでしまい引継ぎ
HTML・CSS
-
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
VBA レジストリの値の読み方について教えてください
Visual Basic(VBA)
-
-
4
時間短縮のために、テキストファイルの入出力をメモリを使って出来ないですか?
Visual Basic(VBA)
-
5
Webサイトのビデオプレーヤーについて
オープンソース
-
6
VBA初心者です。次のVBAコードで、17行目を削除したいのですがうまく動きません 改善策を教えてく
Visual Basic(VBA)
-
7
エクセル タブの下のメニューを選択 実行するコード
Visual Basic(VBA)
-
8
至急助けてください!!!あと2時間しかないです! ボタンを押したら0ランプが点灯し、コンマ5秒後に1
その他(プログラミング・Web制作)
-
9
IEを使わないでhtmlテキストを取得したい(VB.Net)
Visual Basic(VBA)
-
10
コードを書いて下さい( ; ; )写真有り
HTML・CSS
-
11
VBA初心者 Ctrl+での操作、ボタンに登録での操作
Visual Basic(VBA)
-
12
mallocについて
C言語・C++・C#
-
13
index.phpに入るには、どうすればいいですか?
PHP
-
14
goo は、放置?
HTML・CSS
-
15
Vba 実数および実数タイプの変数について教えてください
Visual Basic(VBA)
-
16
正規表現 URL抽出「 [\\/\\b]{0} 」 の意味教えてください。
その他(プログラミング・Web制作)
-
17
小学1年生の子です。塾に行かせるのは難しいので、自宅で学べたらと思うのですが、子供にプログラミングを
その他(プログラミング・Web制作)
-
18
先日ウェブデザイン技能検定三級を受けたのですが、公式の解答では答えが②となっているのですがその理由が
HTML・CSS
-
19
WEBサイトの作成で、imgタグには現在もwidthとheightの指定が推奨ですか?
HTML・CSS
-
20
ImageMagickでgif画像の一部が切れないようにしたい
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/12】 急に朝起こしてきた母親に言われた一言とは?
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・好きな「お肉」は?
- ・あなたは何にトキメキますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
smallにtext-allignが効かない
-
質問1.
-
含む含まないという概念自体の...
-
【ヒトの神秘】美男美女から何...
-
「諸要素」とはどういう意味で...
-
2個のFormを横並びにしたい
-
html タグの閉じスラッシュ前の...
-
H1タグを画像にしたい
-
ホームページビルダー19SPで...
-
マージソートの計算量について-...
-
tdに対してmin-heightの定義、...
-
ある要素の中身を全部グレーア...
-
htmlのimg要素のtitle属性のよ...
-
NからZへの全単射を具体的に構...
-
ホームページの下にあるcopy ri...
-
改行ほどは行かないけど、若干...
-
角丸画像の背景色を透明にした...
-
textareaの幅を画面と合わせたい
-
スタイルシートで文字色を指定...
-
このサイトのカテゴリのチェッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
現行の日本国憲法の古い所を教...
-
NからZへの全単射を具体的に構...
-
CSSで改行後の行間調整
-
HTMLページ上でiframeを最前面...
-
改行ほどは行かないけど、若干...
-
H1タグを画像にしたい
-
角丸画像の背景色を透明にした...
-
CSS:overflow要素の印刷について
-
CSSのa:hoverが急に一部だけ効...
-
テキストボックスの中にリンク...
-
textareaの幅を画面と合わせたい
-
CSSのセレクタに指定するbodyと...
-
HTMLでTextareaを横に2つ並べ...
-
このサイトのカテゴリのチェッ...
-
input type="hidden"で取得した...
おすすめ情報