サイト作ってみたらCSS3の便利さが分かった

CSS3

今日は友だちの家でハッカソンしてきて、http://u1fukui.com/ のページ作ってきました！
ようやく脱Apacheのテストページ！


格好いいサイトを作りたいなーと、前からサイト作るのには興味があったんですけど
実際に作ることはほとんど無かったので、大分手こずりました(;´Д`)


それで、最近丁度興味があって調べていたCSS3を使ういい機会だなーと思い使ってみたら
思いのほか便利だったので軽く紹介していこうと思います。

ウェブフォントで格好いい文字を使う

なんと言っても１番便利だなーと思った機能はこれでした！


今まではユーザのPCに入ってるフォントしか使えなかったのですが、
フォントファイルをURLで指定することによって、どのPCからも同じフォントで表示されるようになる機能です。


サイトを作る時にやっぱりデフォルトの文字だけだと素人っぽさがあるし、
だからと言って何かのフォントを使った画像を作るのも面倒くさいので、ほんとこの機能は助かります。
http://u1fukui.com/ では、画像は１つも使ってなく全てウェブフォントを利用してます。

詳しい使い方

CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

ウェブフォント提供サービス

影をつける

ウェブフォントには負けますが、これも手軽に格好よくできるので感動しました。
作ったページで言うと、タイトルの「u1fukui.com」のところですね。
今回使ったのはテキストに影をつける機能ですけど、ボックスに影をつけることも出来ます。

参考

CSS3のtext-shadowを使ったテキスト装飾のサンプル集 | かちびと.net

おわり

他にもグラデーションとか角丸とか簡単に使えるようになってたのですが、
今回作ったページにはうまく取り入れることができませんでした(´・ω・｀)


というかCSS3より、もっと基礎的なHTMLやCSS部分に苦労したのでそっち勉強しようと思います。
段組とか相当苦労した。。floatとかpositionとかさっぱり┐(´д｀)┌


近いうちにサイトをもっと形になるように頑張ります。
何か気になる所とかありましたら指摘お願いします( m _ _)m

参考

タブナビゲーションの参考にしたページ
http://jsdo.it/event/topics/2011/07/css3showcase


先週買った参考書

CSS3デザイン　プロフェッショナルガイド

CSS3デザイン　プロフェッショナルガイド