WixStudioでVeloを使う Step 43 「『A』『B』『C』のリスト」
はじめに
前回の記事で扱った箇条書きの記号「・」を「※」に変えた。今回はその続き。箇条書きには「・」で列挙する箇条書き(順序なしリスト)と番号付きの箇条書き(順序付きリスト)がある。今回は後者に注目する。これについて不便を感じるている人はあまり見ない。でも、知ってたら変わるかもしれない。例えば数字の連番ではなくABCだったり、連番は連番でも漢数字だったり。せっかくなので触れておく。
準備
前回の記事の続きとして記事を展開する。環境もそのまま使う。複雑な環境は不要で、新しくサイトを作成して、コードも有効にしVeloを有効にしておけばいい。ただし、前回の記事で説明した内容については省く。
段落要素を配置し、番号付きリストにする
まずは、ページに段落要素を配置する。
デザインのパネルから番号付きリストを選択すれば、段落要素の内容が番号付きリストになる。
番号付きリストを配置
内容も適当に書き換えておく。内容にはこだわらない。が、番号がついているので順序に意味があるリストにした。
番号付きリストだから順序を意識した内容*
CSSクラス(カスタムクラス)を設定する
現在、番号付きリストは数字による連番が振られている。今回はアルファベットにしてみたい。
とりあえずカスタムクラスはorder-type-alphabetとした。
カスタムクラスはorder-type-alphabet
実装
今回も実装はCSSで行う。コードパネルからglobal.cssを選択する。
global.css
前回の記事の続きなので、既にコードが書かれている。これに今回は追記していく。
コード
.note-mark ul {
list-style-type: '※';
}
/* ↓↓↓↓↓ 今回追記するのはここから下 ↓↓↓↓↓ */
.order-type-alphabet ol {
list-style-type: upper-alpha;
}
実装は以上。これでリストの番号がアルファベットに変わる。
この記述はorder-type-alphabetがカスタムクラスに指定されている要素に含まれている番号付きリストに対するデザインを定義している。番号付きリストをWEBで表現する際にはolタグという記述によって実現されるので、これを対象にデザインを定義している。
どのようなデザインを定義内容list-style-type: upper-alpha;は、順序を番号ではなく大文字アルファベットで表現するように設定することができる。
動作確認
この動作はプレビューをしなくてもエディタ上で確認ができる。
ABC..で表現される順序リスト
補足
これで終わったら面白くない。
順序を表す手段は他にも用意されていう。要は「ABC...」以外も設定が出来るということ。例えば小文字ならlist-style-type: lower-alpha;。
abc..で表現される順序リスト
まだまだある。コードをいくつか追加しておく。
.note-mark ul {
list-style-type: '※';
}
/* ↓↓↓↓↓ 今回追記するのはここから下 ↓↓↓↓↓ */
.order-type-alphabet ol {
list-style-type: upper-alpha;
}
/* ↓↓↓↓↓ 更に、追記したコードはここから下 ↓↓↓↓↓ */
.order-type-kansuji ol {
list-style-type: cjk-decimal;
}
.order-type-eto ol {
list-style-type: cjk-earthly-branch;
}
.order-type-ko_otsu_hei ol {
list-style-type: cjk-heavenly-stem;
}
.order-type-hiragana ol {
list-style-type: hiragana;
}
.order-type-hiragana_iroha ol {
list-style-type: hiragana-iroha;
}
まず1つ目に追加したのは漢数字。カスタムクラスはorder-type-kansujiにした。
.order-type-kansuji ol {
list-style-type: cjk-decimal;
}
漢数字で順序を表す
2つ目に追加したのは干支。干支があったことには驚いた。カスタムクラスはorder-type-etoにした。
.order-type-eto ol {
list-style-type: cjk-earthly-branch;
}
干支で順序を表す
3つ目に追加したのは「甲乙丙..」。干支に続いて驚いた。意外と用意されているもんなんですね。カスタムクラスはorder-type-ko_otsu_heiにした。
.order-type-ko_otsu_hei ol {
list-style-type: cjk-heavenly-stem;
}
甲乙丙で順序を表す
4つ目に追加したのは「あいうえお..」。例には挙げていないけどカタカナ(list-style-type: katakana)も用意されていた。カスタムクラスはorder-type-hiraganaにした。
.order-type-hiragana ol {
list-style-type: hiragana;
}
あいうえおで順序を表す
5つ目に追加したのは「いろは..」。こちらもカタカナ(list-style-type: katakana-iroha)も用意されていた。カスタムクラスはorder-type-hiragana_irohaにした。
.order-type-hiragana_iroha ol {
list-style-type: hiragana-iroha;
}
いろはで順序を表す
他にも興味深いものは幾つもあったけど、ここでは紹介しきれないのでリンクを共有。
まとめ
今回は番号付きリストを扱った。前回と同様に知ってたらいいかも的な知識の紹介。無くても困らないしWixStudioの標準として提供されていないので無理して実現することではないと思う。でも、簡単な記述で実現出来ることだし、コピペで済む程度のことであれば便利なツールとして持っておいた方が良い。
WixStudioはノーコードツールとして魅力的だけど、やっぱりコードの知識を持ってローコードツールとして使うと魅力がグンッと上がる気がする。
Discussion