こたつに入りながらヌクヌクお勉強。

毎週日曜日に開いていただいているお勉強会が今日はお休みだったので、家で自習をしました。

お勉強会の時にいつも持ち込んでいるドトールのサンドが親子共々習慣化されてしまい、お勉強会が無いにもかかわらず、わざわざ駅前のドトールまで買いに行ってしまった今日この頃（笑）

今日は、HTML5でMedia Queriesを使用してスマートフォン用のCSS設定を試してみました。

参考にさせていただいたのはこちらのコリスサイトです。
⇒Media Queriesを使用したデバイスごとの指定方法のまとめ
⇒CSS3のMedia Queries（メディアクエリ）の使い方と実装例

★スマートフォン（縦長・横長）の場合
CSS内に以下の内容を記述しました。
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* ここにスタイルを指定 */
}
自分チェック用デモ

簡単に設定できるのはいいのですが、その分デバイス毎にきちんと見えるよう、最初の設計が大切だなと思いました。

そして、ついでにCSS3でドロップシャドウを少々。

フットにある「oba-chama」の文字にシャドウをつけてみました。

cssの指定は
footer p {
text-shadow: gray 0.25em 0.2em 0.1em;
}

スマートフォンから確認してみたところ、ちゃんとシャドウが反映されてました♪

そしてさらにさらに…角丸まで踏み込んでみました。

簡単に角丸が実装できるという「ShadedBorder」というスクリプトを使用して先程のフット部分に実装してみました。

●head内
　以下のjsファイルを外部ファイルとして指定
＜script type="text/javascript" src="shadedborder.js"＞＜/script＞

●body内
＜div id="simple"＞
＜p＞oba-chama＜/p＞
＜/div＞
＜script language="javascript" type="text/javascript"＞
var sampleBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
sampleBorder.render('simple');
＜/script＞

すると、以下のように表示されました！

※背景色はjsファイル内の下にある設定を一部変更しました。

今日のお勉強会、本日はここまでで終了！