[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）
あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。 じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。 olとは？まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き！</li> </ol> こんな感じで数字付き！といった具合に。 ブログやサイトのUIを作
![[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ec25bc5d348bff15cecd1f10494d9e4a89909e3/height=288;version=1;width=512/https%3A%2F%2Fprasm.blog%2Fwp-content%2Fuploads%2F2013%2F12%2Fcss-ol-list.jpg)
画像なしで表現するリストマークのサンプルいろいろ ｜ Tips Note by TAM
行頭記号やリストマークなどの装飾を、画像なしで実現する方法で普段よく使うものをリストアップしてみました。 今回は、 先頭に何かしら装飾をつける 2行目以降の先頭を1行目と揃える 以上の2点をリストアップの条件にしました。 サンプルはこちらです。 sample1 装飾文字を直接記述（全角のみ対応） サンプルはこちら まずはシンプルに、直接HTML上で行頭に「※」を挿入する方法。 2行目以降の先頭が1行目と揃うように、text-indentで「※」の1字分下げてやります。 そのままだと行の先頭が1字分左に寄ってしまうので、その分左マージンを取って調整します。 p { text-indent: -1em; margin-left: 1em; } ※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト sample2 装飾文字を直接記述（全角・半角どち
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
