CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
Q&A
解決済
1回答
1554閲覧
総合スコア11
0グッド
0クリップ
投稿2014/11/01 16:06
0
よくニュースサイトやブログのサイドバーなどにあるランキングの画像左上に 1から10までの順位を入れたいのですが、これは画像ファイルを用意しないとできないのでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
質問へのコメント
回答1件
ベストアンサー
CSSでcounter-incrementとcontentを使うことでナンバリングすることができます。
以下例です。
lang1.news-list li { 2 position: relative; 3 counter-increment: popular_rank; 4} 5.news-list li:before { 6 position: absolute; 7 content: counter(popular_rank); 8 font-size: 12px; 9 border-radius: 10%; 10 background: red; 11 color: #fff; 12 padding:0px 5px; 13 top: 5px; 14 left:0px; 15 font-weight: normal; 16}
lang
1.news-list li { 2 position: relative; 3 counter-increment: popular_rank; 4} 5.news-list li:before { 6 position: absolute; 7 content: counter(popular_rank); 8 font-size: 12px; 9 border-radius: 10%; 10 background: red; 11 color: #fff; 12 padding:0px 5px; 13 top: 5px; 14 left:0px; 15 font-weight: normal; 16}
詳しくはCSS ナンバリング で検索するとよいと思いますよ。
投稿2014/11/01 22:24
総合スコア7
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
15分調べてもわからないことはteratailで質問しよう!
ただいまの回答率85.50%
質問をまとめることで思考を整理して素早く解決
テンプレート機能で簡単に質問をまとめる
ブログの画像の中に数字を入れたい
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。