カッコイイホームページを作りたいならCSSを極めよう!

印象的な文字でオシャレに

ホームページのフォントはOSに標準搭載されているものを使用するのが基本ですが、それだと他のホームページと差別化を図るのは難しいでしょう。そこで利用されているのがWebフォントです。Webフォントでは、ネットワーク上に置かれたフォントデータをページ表示時にダウンロードして使用するため、OS標準のフォント以外にも様々なフォントが利用でき、一味違った印象をユーザーに与えることができます。使用するには「@font-face」でフォントファイルを指定し、「font-family」プロパティの値にフォント名を記述します。
文字に関するプロパティは様々あるので、それらをうまく利用すればオシャレなホームページが実現可能です。たとえば「text-shadow」プロパティでは文字に影をつけられ、立体感を演出できます。

CSSで動きのあるページを実現する

ホームページに動きをつけるにはJavaScriptを使う方法がありますが、簡単なアニメーションであればCSSで実現可能です。そのために使用するのが「animation」プロパティです。このプロパティはアニメーションに関する値をまとめて指定できるショートハンドプロパティですが、「animation-duration」などで個別に指定することもできます。「animation」で実現できるものとしては、ファイルやページのロード中に表示されるローディングアニメーションなどがあります。
また、このような「a:hover { color:red; }」で、要素にホバーしたときに色を変化させることはよくあるでしょう。通常この変化はパッと切り替わってしまいます。しかし「transition」プロパティを併用すれば、変化する時間を調整することもできます。