スタイルシートマニア

ホームページカスタマイズ Tips

CSSで見出しをデザイン（擬似クラス:first-letter）

ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。

#h2-headline02 {
      color: #600;
      border-bottom: 1px solid #600;
}

#h2-headline02:first-letter {
      font-size: 2em;
}

<h2 id="h2-headline02">CSSで見出しをデザイン（擬似クラス:first-letter）</h2>

リンク要素は、擬似クラスで訪問済みと未訪問のテキストの色を変更したり、リンク領域のマウスオーバー時のアクションなど色々な表現が可能です。例えばリンクテキストの下線を消してまったり、マウスオーバー時に色を変えるなどの方法などは基本中の基本と言えるでしょう。

では、このサイトで使っているリンクの設定を紹介しましょう。

リンクが付いているテキストリンク

a:link {
      color: #333;
}

訪問済みのテキストリンク

a:visited {
      color: #333;
}

マウスオーバー時のアクション

a:hover {
      color: #999;
}

という設定で動かしています。