の番号だけ装飾するには？CSSカウンタを使ってみた
順序リストの表示に利用するol要素。 デフォルトではごくシンプルな番号つきリストですが、デザイナーさんからこんな風に番号部分だけ色を変えるなどの装飾がされたデザインを渡されたらどのようにCSSを作りますか？ …簡単そうに見えて、意外と悩むのではないでしょうか？ 今回の記事では、こんなシーンで使えるCSSのTipsをご紹介します。 最初からついている数字は使わない 結論から言うと、list-style-typeによって付与される数字は使いません。 ここだけを装飾する方法はないので、せっかくですが指定自体を無くすことになります。 ol{ list-style-type: none; } ここから活躍するのが当記事の主役、CSS2から登場した「カウンタ機能」です。 これを使って1,2,3,4…といった連番を疑似要素:beforeにつけなおす方法をとった上で、自由に装飾できるようにしてみましょう。
目指せ！爆速コーディング！～ブックマークするだけ編～ | 制作のこと | ブログ | 徳島のホームページ制作会社 | 有限会社データプロ
こんにちは。 牛乳大量消費メニューが最近の流行りという事でときどき牛乳を買うようになったのですが、 まぁこれがとてもおいしいんですね。 ジュース代わりにガブガブ飲んでた学生時代を思い出しました。 それはさておき、今回はコーディング中によく利用するサイトをご紹介します。 基本的にコピペだけで使えるサイトばかりなので、気になったらブックマークしてみてください！ CSS関連 contentプロパティの味方「Text Escaping for CSS」 https://labs.unformedbuilding.com/text-escaping-for-css/ 疑似要素といえばcontentプロパティ。 テキストも表示できる優れものですが、日本語を入力していると文字化けが起こってしまう事も。 文字化けが起こらないようにこのサイトでテキストを16進数に変換しておきましょう。 複雑なグラデーション
DevTools+PerfectPixelで爆速コーディング
ネコメシでは週に１回、持ち回り制で勉強会を開催しています。各々が気になっているトピックについてスライドを作って、30分～1時間くらいの発表を行います。 先日の勉強会にて、コーディング作業高速化について発表したので、その内容を公開します。拙速が大事ということで、スライド貼っ付けただけで、説明もなにもなしですが…。 スライドに説明文を追記しました (2019-07-18 22:04) スライド https://speakerdeck.com/tsmd/devtools-plus-perfectpixeldebao-su-kodeingu 内容 Chrome DevTools と PerfectPixel という Chrome 拡張機能を使って、爆速で HTML/CSS のコーディングをするご提案です。 コーディングを２倍速にしよう！ という思い付きで検討した手法です。計測していませんが、ほんと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
