eyemovic inc.

Culture blog会社の活動・働き方

2012.01.19

Cascading Style Sheets3

ようやく鎖骨がくっついてきたトクナガです。
今回は、CSS3に触れてみようと思います。

よく使うものですと、「角丸」「グラデーション」「疑似クラス」
「背景画像のサイズ変更」「ドロップシャドー」等があります。

下記のようなものも簡単にCSSのみで再現することが可能です。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

次に疑似クラスとは、
たとえば、リストタグでひとつひとつ区切り線を入れてるが、
最後だけスタイルをあてないといった使い方が出来ます。

最後だけでなく、指定する要素が何番目の子要素あたるかを指定すれば、
交互に色を付けたりも出来ます。

  • サンプルテキスト。
  • サンプルテキスト。
  • サンプルテキスト。
  • サンプルテキスト。
  • サンプルテキスト。
  • サンプルテキスト。

その他にもCSSのみで、アニメーションが出来たり、
メディアクエリを使って、画面サイズによるCSSの切り替えとか、
さまざまなことが簡単に実装できるようになります。

ですが、今はまだIEの旧バージョンも要件定義に入っていたりするので、
実務的に、本格的実装は難しく、Javascriptで代用して作成したりしております。

すでにCSS3プロパティ生成ジェネレーターが色々ありますので、
一度触って見るだけでも楽しいと思います。

http://css3.mikeplate.com/
http://www.css3maker.com/

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。