Drop Cap Definition
見出しの頭文字が拡大して、小さな用語の定義が余白に表示される。
PRACTICAL WEB TIPS
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中:使用対象: text
見出しの頭文字が拡大して、小さな用語の定義が余白に表示される。
見出しの3語が異なる方向から色面に押し出され、ホバー時に一斉に強調される。
3つの語句が階段状にずれながら浮上。短い見出しリンクに向くタイポグラフィ。
2色の下線が反対方向から交差して現れるリンク。記事やトップナビ向け。
本文の専門用語にフォーカスすると、行間に短い対訳が滑り込む。多言語・技術系記事用の小さな注釈です。
見出しにホバーすると、文字間隔と同期した目盛りが展開するタイポグラフィー用の演出です。
記事本文の注釈リンクにカーソルを乗せると、欄外の短い補足説明を引き出せます。
太い見出しの下に小さな復唱テキストが現れ、背景ラインが移動する演出。
文字の内部だけをインクが左から満たすように変色。見出しや強調リンクに利用。
見出しの上に重ねた小さな注釈がホバーで持ち上がり、章題を際立たせる。
本文内の専門用語をホバーすると短い用語解説カードを表示する、記事向けの軽量ホバー。
編集前の語句を取り消し線で示し、ホバーで訂正後の見出しが置き換わるエディトリアル演出。
日英併記のリンクをホバーすると補助訳が整列して現れ、主言語の下線と連動する表現。
記事本文の文献番号に触れると、狭い余白から出典の短い要約が横に開く。本文の流れを崩さない。
見出しの複製レイヤーが少しずれて現れ、活字の太さが変わったように見せるタイポグラフィホバー。
記事見出しにカーソルを乗せると、左右の括弧が開き、文脈を補う短いキャプションが下から現れる。
見出しの背後に巨大なセクション番号が浮かび上がる、編集的なページ見出しのホバー。
3つの単語の下線が順送りで入れ替わり、文中の重点を段階的に強調するテキストリンク。