[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」
この記事は約8分ぐらいで読めます
自分のブログに設置する用とか仕事ではちょこちょことやったことあるんですけど、初めて配布用にプラグインを作ってみました★
ol要素の通し番号の種類
olにつける通し番号のバリエーションには、HTML側からだとtype属性で普通の数字、ローマ数字(小文字or大文字)、アルファベット(小文字or大文字)が指定できます。詳しくは以下のHTML5.jpのページで。
ol 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP
そして次にCSSの方からは何が出来るかですけど、これは結構種類がありますね。
スタイルシートリファレンスから参照しますと黒丸、白丸、黒四角等の定番の他、0つきの数字、漢数字、果てはヘブライ語、グルジア語なんてのもあるようです。
①、②がない？
でもなんで①とか②がないんだろ。前から思ってたんですけど通し番号って普通①、②で表現する事多くないですかね。海外の方ではあんまりポピュラーじゃないのかもだけど…漢数字より使うだろって思っちゃいます。
リストの通し番号をjQueryプラグインで作ってみよう！
jQueryプラグインで作ろう！とまず思ったのでやってみることにしました。以下その後出来るまでの経緯です。
最初に考えたのはCSSのカウンタ
contentプロパティ内に設置できるカウンタは、counter-incrementプロパティで設定した変数的なものを使ってその要素が出てくるごとにカウントアップさせた数字を表示できます。このプロパティ、最初知った時は目からウロコでしたねー。CSSらしくない機能だったので…。
CSSのカウンタはjQuery内では(どうやら)使えない
調べ方が足りなかったかもしれないですけど…。
カウンタはcontentプロパティ内のみでしか使えず、contentプロパティは:before,:after擬似要素内でしか使えない。そしてjQueryのセレクタには擬似要素が使えないみたいなんですね。これによって:beforeでやる、と言う方法は詰んだ…。使えるよーとか情報あったら教えて頂けると助かります＞＜
jQuery側でカウントアップする
そういうわけで仕方なくjQuery側でやることに。わからないところはpoyosicomの@poyosiさんがかなりアドバイスしてくれました。あざす！★
span要素をprependするのだろうくらいのことはわかっていたので、それをどうやってカウントアップするかを教わる。
元となるスタイルの作成(ついでに角丸や四角も作る)
orderedList.js
まずCSSを書く
①の見た目をまずCSSで整え、それをjQueryのcss()で再現します。ついでにバリエーションとして角丸の四角や2重ボーダーの四角も作る。
○内の数字のフォントは「Trebuchet MS」を使っています。ちなみにトレビュシェットと読むらしいです。もっと似合うフォントをwebフォントで探しても良かったんですけど、JSを置いてハイ完成、という形にしたかったので今回は別の読み込みファイルを使わず、どのOSにも入っている標準フォントから最もしっくりきたものを選んでみました。かなり微調整しているのでフォントが変わると良い位置に収まってくれないかもしれません。
jQueryの書式に書き換え
css()を使ってCSSに書いたものをjQuery内に書き換えます。なんでわざわざjQuery内に書き換えるかは、単に勉強の為もあるんですけど、上記に同じく要は一行コピペで使えるものにしたかったからです。このやり方がまどろっこしいと言う人は自分で書くでしょうし、コピペする人はカスタマイズしないと思うので、使うのが一番簡単な形を作っておきました。物足りなくなったら分解してカスタマイズしてみてくださいね。まあCSSの方で!importantをつけて上書きもできます。○の中の色とか変えても良いですし。
CSSのスタイルをjQuery側から指定するのは元々嫌なんですけどねｗ 効率良く動かすならこのコードはspanを挿入するとこだけ拾うなりして、前述のCSSの指定をそのまま使えば良いと思います！
で、実行結果は以下の様になります。
一応2ケタまで対応。
ダウンロード
円形、角丸、二重線の四角をそれぞれorderedListCircled.js、orderedListRounded.js、orderedListSquared.jsとして用意しています。好きなものをダウンロードして使ってください。一応同時に同じページ内でも使えます。
設置の仕方
上記のリンクからダウンロードしてファイルをアップロードしたら、ヘッダ内に以下のようにスクリプトを設置(jQueryがない人は一緒にコピペ)、あとは使いたい序列リストに円形はclass=”olCircled”、角丸はclass=”olRounded”、四角はclass=”squared”を追加するだけです。
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/orderedListCircled.js"></script>
対応ブラウザ
殆どのモダンブラウザで正しく表示されるでしょう。IEは多分9以上ですｗ CSS3のborder-radiusを使ってますしね。四角でもわりと悪くなかったです。どうしても対応させたい方は[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめを読んでみてください。こちらも設置とコピペのみで導入できるように書いてあるつもりです。
ライセンス
ライセンスはMITです。MITが分からない人は過去記事[ライセンス]結局何を使っていいの？利用者視点でのよくわかる著作権！で復習してみてください★
終わりに
とまあこんな感じです。webcre8はテキストの箇条書きなどで結構こういうのを使うんですが、いつもデフォルトの数字かimgでアイコンを作っていたりしたので、バリエーションと簡略化のために作ってみました。まあもちろんこれはめんどくさい人＆わからない人用なので、自分はこれに更にradial-gradient等を使ってもっときれいにしてCSSとして使うと思います。jQueryのcss()ではグラデーションを再現できなかったので…(これも出来るのであればやり方知りたいところです＞＜)。
もし自作のフレームワークなんかを作るときはこういう指定も是非入れようと考えてます。特にwebサイトの利用規約とか、どうせ読まないでしょばりに読みづらいサイトとか多いので。
別に作らなくて良かったかも…
作った後にCSS3の事を調べてて@hiraさんのCSS HappyLife ZEROで以下の記事に行きあたったんですけど、
list-style-type｜プロパティ｜CSS HappyLife ZERO
ここを見てみるとCSS3ではlist-style-typeを自分で設定できる@counter-styleというものがあるようです。提案されたの結構昔みたいだしもう使えるのかなさすがに…。
CSS Lists and Counters Module Level 3
どうでもいいですけど例に「干支」とか「碁」とかあってくだらなくて面白いです
まあCSSで書いていることによって細かい見た目の変更もできますし、ドンマイって感じで一つｗ とりあえず言えることは作ってて楽しかったです★
需要があれば
使う人がいそうであればこれの、色とかサイズ、フォント、形状などを選択できるバージョンなんかも作ってみたいなーと思うんですけど、容量が増えて使いづらくなるだけな気もしますからちょっとわかんないですｗ でもとりあえず今の状態は使うのすごく簡単だったんで同じようなことがやりたい人はちょっと使ってみてくださいー！