HTML見出しにCSSのみで本の目次のような連番を振る方法
見出し要素に連番を振る方法 例えばHTML見出しのh2には、「1、2、3…」と連番を振っていき、h3見出しには「1.1、1.2、1.3…」もしくは「2.1、2.2、2.3…（h2の連番が2だった場合）」といったように番号を振るにはCSSで以下のように書きます。 /************************************ ** h2-h6の見出し要素に連番を振る ************************************/ .entry-content h2{ counter-increment: counter-h2; counter-reset: counter-h3; } .entry-content h2:before{ content: counter(counter-h2); margin-right: 0.6em; } .entry-content
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
