ラベル リスト の投稿を表示しています。 すべての投稿を表示
ラベル リスト の投稿を表示しています。 すべての投稿を表示

2021年3月23日火曜日

ページ読み込み時に、リストの項目をランダムに入れ替える。

ページ読み込み時や再読み込みした時に、リストの項目をランダムに入れ替える。

デモページを表示

CSS

補足
  • flexbox の order プロパティで順番を入れ替えるので、リストに flexbox のプロパティを設定している。
  • order プロパティは、読み込み時や再読み込み時に jQuery で設定している。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足
  • 最初に重複しない整数の乱数を配列に用意し、その値をリスト項目の order プロパティに設定している。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足
  • 処理対象の ul 要素に shuffle クラスをつける。
ラベル: , ,

2021年3月16日火曜日

リスト項目の絞り込み表示

カテゴリー名リストから選んだカテゴリーと同じカテゴリーのリスト項目のみを絞り込み表示する。

デモページを表示

CSS

補足
  • 絞り込みの対象となるリストの項目は、あらかじめ非表示にしておく。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足
  • このサンプルでは、１ページ内に「カテゴリー名のリスト」と「絞り込みの対象となるリスト」がひとつずつあることを想定している。
  • jQuery の trigger() を使って、最初に表示するカテゴリーを指定している。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

関連投稿

ラベル: , ,

2020年11月5日木曜日

番号付きリストの番号部を装飾

番号付きリストの番号部を疑似要素に置き換え、装飾しやすくする。

デモページを表示

CSS

補足
  • 3行目： list-style-type: none; で標準のマーカーを非表示にし、12行目：擬似要素で番号部を表示する。
  • リストの番号は counter-reset、counter-increment、content で生成している。
  • 共通定義（class="deco"）で、装飾のない通常の番号付きリストのスタイルになる。
  • 個別定義（class="ranking"）で、番号部の位置や大きさ、装飾などを設定している。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足
  • 3行目：共通定義（class="deco"）だけの場合は、通常の番号付きリストのスタイル。
  • 11行目：共通定義（class="deco"）＋個別定義（class="ranking"）で、番号部が装飾された状態になる。
ラベル: , , ,

2020年10月30日金曜日

リスト要素の項目を横並びにする（ウィンドウ幅に応じて折り返し方を変える）

リスト要素の項目を横並びにする で、ウィンドウ幅に応じて折り返し方を変える方法。

具体的には、ウィンドウ幅が狭い場合は折り返さない。ウィンドウ幅がある程度広い場合は折り返したい場合、下記のように指定する。

デモページを表示

CSS

補足
  • ４行目：折り返さない場合の li 要素の幅（列数）を指定。
  • ８行目以降：ウィンドウ幅が 640px 以上のときの、折り返しと寄せる方向、表示列数を指定。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足
  • １行目：ウィンドウ幅が 640px 未満のとき、折り返さないので data-flex-wrap="nowrap" を設定。

関連投稿

ラベル: , ,

リスト要素の項目を横並びにする（ウィンドウ幅に応じて項目の幅を変える方法）

リスト要素の項目を横並びにする で、ウィンドウ幅に応じて項目の幅（列数）を変える方法。

具体的には、スマートフォンでは２列、タブレットでは３列、パソコンでは５列表示にする場合、以下のように指定する。

デモページを表示

CSS

補足
  • CSS の個別定義で、ウィンドウ幅ごとに、メディアクエリを使って li 要素の幅（列数）を指定する。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

関連投稿

ラベル: , ,

リスト要素の項目を横並びにする

CSS Flexbox を使用して、リスト要素の項目を横並びにする方法です。

カスタムデータ属性で、折り返す（左寄せ｜中央寄せ｜右寄せ）・折り返さないの指定ができるようにしています。

折り返さない場合、ブラウザが対応していれば、スクロール時に項目単位で止まります（スクロールスナップ）。

デモページを表示

CSS

補足
  • 個別定義として、li 要素の幅を指定する（指定が無い時は３列表示）。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足
  • ul 要素に "data-flex-wrap" を追加し、折り返し方法を指定する。
  • このサンプルでは li 要素の中にボタンを入れているが、画像やテキストでも良い。
data-flex-wrap折り返し方法
left折り返す：左寄せ
center折り返す：中央寄せ
right折り返す：右寄せ
nowrap折り返さない
ラベル: , , ,
登録: 投稿 (Atom)