2010 Apr 27

前記事のつづきになります(´・ω・`)

HTML5の説明だけで長くなったので一度切って、今度は「CSS3」になって出来るようになった事とか、講習会で聞いてきた内容をご紹介(´∀`)
相変わらず IEだけは非対応なので、その辺りはご了承くださいましー。
それと、まだ現状CSS3は開発段階なので、

Safari、Google Chrome では 「-webkit-」
Firefox では 「-moz-」
Opera では 「-o-」

の指定をCSSの指定箇所の頭部分に記入しないと表現できないモノばかりです。
早速試してみよう!と思ってる方は、この3つのコードをそれぞれ用意した方がいいかもです。

ちなみに、HTML5で生成したモノでしかCSS3の表現できない。という事は無いです。

■border-radius

簡単にいうと、「border」「background」等の指定箇所に入力することによって、丸角が作れます!
やっと画像とか用意しなくても、気軽に丸角を作りたい放題ですYO(/ω\)
table時代からWEB作成していた方には、かなりの朗報じゃないのかな。

まずは、分かりやすい参考サイトさんをご紹介

◎参考サイト様:CSS Border Radius
http://border-radius.com/

このページの四隅に任意に数字を入力すると、
その数字分だけ角丸になり、ページ中央にそのソースコードが表示されます(´・ω・`)

div {
-moz-border-radius: 12px; /* FireFox+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}

ソースコードの例はこんな感じです。

またIE6、7なら、専用のJavaScriptを設置することで同じような事ができるので、
IE環境のみの方は試してみてください。

◎参考サイト様:border-radius.js - JavaScript ライブラリー - HTML5.JP
http://www.html5.jp/library/border-radius.html

■text-shadow

今度は、指定した文字にドロップシャドウを入れることが出来るようになります(*'-')

◎参考サイト様:Pure CSS Letterpress Effect
http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html

こちらもわざわざ画像文字にしなくても、ドロップシャドウを入れられるので、
かなりデザイン性は向上しますね('Д')b

で、ソースコードの例はこんな感じ。

□テキストタイプの指定
h2 { text-shadow: 0px 2px 3px #555; }

□ボックスタイプの指定
div {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FireFox3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}

数値の意味合いは、

◯◯-shadow:(右方向へ影移動距離)(下方向へ影移動距離)(影をぼかす範囲)(影の色)

になります。

で、カンマ区切りでさらに指定すると、複数のシャドウ入れることも出来ます。

h3 { text-shadow: 3px -3px , yellow -3px 3px 2px, 3px 3px red}

その場合、一番左の指定が一番上になって、下に重なっていく指定になるそうです。

■Media Queries

まずは、参考サイトを見てください!

◎参考サイト様:Vincent van Gogh (Media Queries example page || Media Queries の事例 )
http://people.opera.com/danield/css3/vangogh/

ゴッホの絵が載ってるサイトなのですがー
このサイトを表示させて、ブラウザの右下をドラッグして大きさを縮小してみてくてください

!(´・ω・`)

な、なんと、実はこのサイト、
iPadとiPhone用のモニターサイズに合わせてデザインが切り替わるんですしおすし!('Д')

CSSの「media」指定には、 handheld, print, screen の指定がもともとあって、
その延長線で、Media Queriesという条件付きのCSSをつかって、ページのデザインをかえちゃおーって感じです。

まずは、IPadとかの画面サイズですがー

iPadサイズ:768 x 1024
iPhoneサイズ:480 x 800
テレビサイズ(Wiiのオペラ等):横幅 800

で、
これに対応するMedia Queriesの書き方として、

□HTMLソース内に直接記入
<style type="text/css" media="screen and (max-width: 480px), screen and (max-device-width: 480px)">
article {
width:240px;
}
</style>

□外部CSSに記入
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
article {
width:240px;
}
}

こんな感じで、各サイズごとに @media指定作っていく感じです。

コレが出来たら、わざわざプラットフォームごとにHTMLファイルを用意して...
とか小難しい事をしなくて済むので、かなり良いプログラムなのですが!
全部のプラットフォームでサポートされてる訳ではないので、(とくにIE環境)
これからですかね...

あとは講演ないでは、まだまだ開発段階のもので、

■transition
アニメーションが作れます!

◎参考サイト様:css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
http://kachibito.net/web-design/css3-transition-sample.html

■@font-face
サーバ上にフォントファイルを置いて、それを呼び出すことでPC内に無くても特殊フォントで閲覧できる。

◎参考サイト様:CSS3 「gradient」と「@font-face」
http://ghostpia.com/sample/wft-makiba/

■transition
指定箇所をありえない形に!

◎参考サイト様:css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
http://kachibito.net/web-design/css3-transform-sample.html

■gradient
ついに、グラデーションもCSSで可能に!

◎参考サイト様:CSS3 グラデーション(gradient)の指定方法 | CSS Lecture
http://www.css-lecture.com/log/css3/css3-gradient.html

以上でっす。
こんな感じのものを講演内で、実際に手打ちで行ってもらったものをみてました(´∀`)
次回があるのなら、また行きたいなーと。

今回の記事を作る上で、いろいろ調べてみたら、結構「HTML5」「CSS3」の記事を扱ってるサイトが多かったので相当遅れてるなーと思いましわ(ノД`)

-おまけ-

帰りの古賀インターで、妹のおみやげに、熊本限定でこぽんのリラックマ(σ ̄ー ̄)σ

2010_0427_01.jpg

なぜ熊本限定がここに...(笑)

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/524
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2010/04/27-2140.php

Comment

■コメントを投稿

  コメントをプレビュー

ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。


画像の中に見える文字を入力してください。

Amazon オススメ人気RANKING BEST8

Amazon ねんどろいど人気RANKING BEST8

Site Search

Tag Cloud


2002.6.6 count start