[CSS]olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。 | Maku_zin Ver2.1.1
どうも下山です。 忙しくなるとこのブログの存在を忘れるのが特技です。 いえ、特技と言うほどのものではありません。 今回はol、段落番号に括弧をつけてやろうとやっきになってアーデモナイコーデモナイってやった挙句のまとめです。 html sassSee the Pen LpGzzy by mitsuki sagayama (@sagayama) on CodePen. sassそのままだと見慣れない方もいると思うからcssにコンパイルすると↓ ol li { list-style-type:none; counter-increment:cnt; } ol li:before { content:"(" counter(cnt) ")"; margin-right:0.5em; }それでは見慣れないプロパティもありますので解説していきます。 counter-incrementって？counte
![[CSS]olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。 | Maku_zin Ver2.1.1](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2e1b90f4e81d4ab5fa95a28be5f40e77fb42b2b/height=288;version=1;width=512/https%3A%2F%2Fmakurazaki.org%2Fsystem%2Fwp-content%2Fuploads%2F2022%2F01%2Flogo2.png)
CompassのCSS3モジュールを使う | Web制作者のためのSassの教科書 - 公式サポートサイト
.boxA { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
