ちなみに、ふつうに自分で用意したpng画像+Webフォントでol要素をスタイリングするという記事、書いたことありました。ol要素をcss+Webフォント+背景画像でカッコ良くしてみる2012年の記事かー。今回、ol要素のリストマークをFontAwesomeのアイコンを使って、さらにWebフォントのちょっとオシャレな数字を使いたいな...、と思ったのですが。ありがとうございます!!実装まずはhead部分でFontAwesome5と任意のWebフォントを読み込み。バージョンは現時点(2018/2/13)のものです。rel='stylesheet'></head>テキストのみランキングっぽくしたくて、FontAwesomeのトロフィー画像を使ってます。疑似要素をサポートしているブラウザなら大丈夫なはず...、いちおうIE9以上では動作確認しました。テキストシャドウはIE10以上じゃないと見えませんが。class="rnk1"><li>いち</li><li>に</li><li>さん</li></ol>リスト自体は、シンプルにこんな感じ。*/}細かい数値あたりはフォント変えたりしたら違うと思うので、適宜調整くださいませ。22行目で数字部分の要素にwidthを指定してるのは、背景画像の幅と合わせると数字のセンタリングがきれいにいくかな、と思ったからです。ここにハマりました...。このあたりは前述の参考サイトさんがとってもわかりやすいですのでご参照ください!画像+テキスト実際私はどう使いたいかというと、ブログの人気記事ランキングみたいな感じにしたかったんですね。サムネイル画像も含めて、こんなふうにしたかったんです。href="#">さん</a></p></li></ol>olリストに画像も含めて入れています。*/}Webフォントの位置や大きさが違うだけで、とくには上のと変わりません。使いどころわかってなかった...。Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だったインターネットの表示がおかしいなー。初心者でも、“デキる奴”と思わせるプレゼンテーションの基本とコツこれからExcelのマクロを勉強したいという方に!簡単な練習問題作りました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。週間人気記事ExcelVBAでカレンダーコントロールを自作するExcelで1行・1列おきの合計を求めるSUM関数の書き方これからExcelのマクロを勉強したいという方に!簡単な練習問題作りました。-2019/09/27運営者*you非IT系の会社で社内業務アプリ開発したりWeb担してたり。ExcelとかAccessの本を書いてます。