My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

6/16 [PHP] 確認テスト(データベースへの接続) / [HTML5/CSS] レスポンシブサイト(可変レイアウト)/ [CSS3] シャドウ

f:id:sntkk3:20140228223724g:plain

  1. [PHP] 確認テスト(データベースへの接続)
  2. [HTML5/CSS] レスポンシブサイト(可変レイアウト)
  3. [CSS3] シャドウ(ボックス・テキスト)

[PHP] 確認テスト(データベースへの接続)

前回の授業の復習として、以下の課題を実施

【課題】

ブラウザの画面に、以下のメッセージを表示させること

MySQLの接続に成功しました!
データベースの選択に成功しました!

[模範回答]

<?php//MySQLに接続
$myId = mysql_connect('localhost', 'root', 'root');
//データベースの接続に失敗した場合
if($myId ===FALSE) {
 print 'MySQLの接続に失敗しました…';
} else {
 print 'MySQLの接続に成功しました!<br>';
//データベースの選択に失敗した場合
if( mysql_select_db('mydb', $myId) ===FALSE ) {
 print 'データベースの選択に失敗しました!';
} else {
 print 'データベースの選択に成功しました!';
}
}

※'mydb'は自身のデータベース名を設定

参照:
PHP: mysql_select_db - Manual
http://www.php.net//manual/ja/function.mysql-select-db.php

[HTML5/CSS] レスポンシブサイト(可変レイアウト)

[HTML/CSSソース] 以下サイトにて確認のこと
http://d.hatena.ne.jp/web-0127/20140708/p1

本課題に関するコメント:
以前PC用レイアウトのみ挑戦したことがある今回の課題、
コーディングにおけるポイントは、

の2点でした。
で、正直な感想、う~ん、自分、まだまだです。
以前も作成したPCサイズ用レイアウトだけなら、それらしく仕上げることは難しくないです。
が、他サイズ画面にフィットするようにレスポンシブ対応を実現しようとすると、これがなかなか上手くいきません。
(フォントが適切なサイズにならないとか、マージン幅が足りない、多い、ナビゲーションの収まりがイマイチなど)
なので、結局はリンク先にある模範解答例のコーディングを参考に作成し直しました。
以後、自力でそのように作成できることを目指し、まだまだ日々練習あるのみです。

参照:
HTML4から変化したHTML5マークアップ ここが違う!サンプルで見るHTML5(2) (2/3):CodeZine:
http://codezine.jp/article/detail/5600?p=2

[CSS3] シャドウ(ボックス・テキスト)

ボックスシャドウ

シャドウの効果は、X軸、Y軸、ぼかし具合、色で指定

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボックスシャドウ</title>
</head>
<style>
#bShadow1, #bShadow2, #bShadow3 {
 width: 200px;
 height: 100px;
 margin: 50px 30px;
}
/*X軸、Y軸、ぼかし具合、色を指定*/
//外側に影
#bShadow1 {
 -webkit-box-shadow: 0 0 6px #666;
 -moz-box-shadow:0 0 6px #666;
 box-shadow: 0 0 6px #666;
}
//内側に影
#bShadow2 {
 -webkit-box-shadow: inset 0 0 6px #666;
 -moz-box-shadow:inset 0 0 6px #666;
 box-shadow: inset 0 0 6px #666;
}
//外側・内側の両方に影
#bShadow3 {
 -webkit-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
 -moz-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
 box-shodow 0 0 6px #f00, inset 0 0 6px #00f;
}
</style>
<body>
<div id="bShadow1"></div>
<div id="bShadow2"></div>
<div id="bShadow3"></div>
</body>
</html>

▼Shadow1

//外側に影
#bShadow1 {
 -webkit-box-shadow: 0 0 6px #666;
 -moz-box-shadow:0 0 6px #666;
 box-shadow: 0 0 6px #666;
}

[実行結果]
X軸:0、Y軸:0、ぼかし具合:6px(外側) 色:#666
f:id:sntkk3:20140618212115p:plain


▼Shadow2
//内側に影
#bShadow2 {
 -webkit-box-shadow: inset 0 0 6px #666;
 -moz-box-shadow:inset 0 0 6px #666;
 box-shadow: inset 0 0 6px #666;
}

[実行結果]
X軸:0、Y軸:0、ぼかし具合:6px(内側) 色:#666
f:id:sntkk3:20140618212120p:plain



▼Shadow3

//外側・内側の両方に影
#bShadow3 {
 -webkit-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
 -moz-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
 box-shodow 0 0 6px #f00, inset 0 0 6px #00f;
}

[実行結果]
X軸:0、Y軸:0、ぼかし具合:6px(外側) 色:#f00
X軸:0、Y軸:0、ぼかし具合:6px(内側) 色:#00f
f:id:sntkk3:20140618212107p:plain

テキストシャドウ

シャドウの効果は、X軸、Y軸、ぼかし具合、色で指定(ボックスシャドウと同様)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3 テキストシャドウ</title>
<style>
#tShadow1, #tShadow2, #tShadow3, #tShadow4 {
 font-size: 30px;
 line-height: 1.0;
 margin: 30px 50px;
}
#tShadow1 {
 text-shadow: 1px 1px 3px #666;
}
#tShadow2 {
 text-shadow: 0 0 6px #666;
 color: #fff;
}
#tShadow3 {
 text-shadow: -1px -1px 2px #f00, 1px 1px 2px #00f;
}
#tShadow4 {
 text-shadow: -40px -10px 0 #f00, 40px 10px 10px #00f;
}
</style>
</head>
<body>
<div id="tShadow1">テキスト<br>シャドウ</div>
<div id="tShadow2">テキスト<br>シャドウ</div>
<div id="tShadow3">テキスト<br>シャドウ</div>
<div id="tShadow4">テキスト<br>シャドウ</div>
</body>
</html>


▼Shadow1

#tShadow1 {
 text-shadow: 1px 1px 3px #666;
}

[実行結果]
X軸:1px、Y軸:1px、ぼかし具合:3px(外側) 色:#666;
f:id:sntkk3:20140618212102p:plain


▼Shadow2

#tShadow2 {
 text-shadow: 0 0 6px #666;
 color: #fff;
}

[実行結果]
X軸:0、Y軸:0、ぼかし具合:6px(外側) 色:#666;
f:id:sntkk3:20140618212113p:plain


▼Shadow3

#tShadow3 {
 text-shadow: -1px -1px 2px #f00, 1px 1px 2px #00f;
}

[実行結果]
X軸:-1px、Y軸:-1px、ぼかし具合:2px 色:#f00;
X軸: 1px、Y軸:1px、ぼかし具合:2px 色:#00f;
f:id:sntkk3:20140618212110p:plain



▼Shadow4

#tShadow4 {
 text-shadow: -40px -10px 0 #f00, 40px 10px 10px #00f;
}

[実行結果]
X軸: -40px、Y軸:-10px、ぼかし具合:0px 色:#f00
X軸: 40px、Y軸: 10px、ぼかし具合:10px 色:#00f
f:id:sntkk3:20140618212117p:plain