【HTML5】レスポンシブデザイン　画像のサイズを可変にする

HTML5で画像のサイズを可変にする、つまり、画面を小さくしたときに画像がつぶれないようにするには、下のコードをimgに対して入力しなければなりません。 img { max-width: 100%; height: auto; }

2013-10-30

【HTML5】 iPhone タブレット　レスポンシブデザインのWebページ　サンプル

HTML5でPC用、タブレット用、iPhone用に対応するレスポンシブデザインのWebページサンプルです。 Media Queryを使うことで対応させています。ポイントは、 ①Media Queryは、サイズの小さいものからCSSを記述すること ②幅の指定は%で記述すること ③メタ要素と…

2013-10-30

【HTML5】レスポンシブデザイン　メタ要素

HTML5 でレスポンシブデザインにするためには、メタ要素をこのように設定します。 <meta name="viewport" content="width=device-width"></meta>

2013-10-29

【HTML5, PHP, データベース】パスワード付きスタッフ追加フォーム

HTML5, PHP, データベースを使ったパスワード付きスタッフ追加フォームです。パスワードを暗号化するために、$staff_password = md5( $staff_password );を使っています。スタッフ情報をパスワード入力とともに、データベースに情報を格納、引き出すように…

2013-10-29

【PHP】　パスワードを暗号化する関数

PHPでパスワードを暗号化する関数は$staff_password = md5( $staff_password );で表せる。パスワードを扱うときは、md5を必須で使うこと。

2013-10-28

【HTML5, CSS3, PHP 】 SESSION を利用したお問い合わせフォーム ( データベース )

以前まで$_POSTでデータを受け取って記述していましたが、今回はSESSIONを使って記述してみます。注意しなければいけないのが、check.phpでSESSIONにデータを受け渡してしまうと、 POSTの中身は空になってしまい、thanks.phpでもSESSIONを使って記述しなけ…

2013-10-27

【HTML5, JavaScript】画像スライドメニュー

DEMO_PAGE 画像横スライド HTML5, JavaScriptを利用して画像スライドメニューを作成しました。 Webページを華やかにする技術として利用できると思います。 jsファイルはDEMO_PAGEのページのソースから取得して下さい。イメージを変えるだけで、簡単に実装で…

2013-10-25

HTML5 検索窓を作ってみる

<html> <head> <meta charset="UTF-8"> <title>HTML5 検索窓</title> <style> /*検索窓の角を丸く表示*/ input[type="search"] { border-radius: 4px; } </style> </head> <body> <form action="search" method="post" id="search"> <input type="search" name="seach" id="search" placeholder="キーワードを入力" > </form></body></html>

2013-10-25

PHP データベースから情報を取り出して表示する

$stmtにSELECTで取得したデータが格納されます。 $stmtはデータを取得しているだけなので何も表示はしません。$rec = $stmt -> fetch(PDO::FETCH_ASSOC);を利用して、順番に１レコードずつ取り出します。 While文を使って、全データを取り出します。コード…

2013-10-25

PHP データベースの接続　（MySQLへの接続）　die関数、exit関数を利用

die関数、exit関数を利用して、 MySQLに接続できなかった場合は、『MySQLの接続に失敗しました・・・』と表示し、また、データベースの選択に失敗した場合、『データベースの選択に失敗しました！』と表示する場合は以下のように書く。

2013-10-25

PHP データベースの接続　（MySQLへの接続）

MySQLに接続できなかった場合は、『MySQLの接続に失敗しました・・・』と表示し、 MySQLに接続できた場合は、『MySQLの接続に成功しました！』と表示し、また、データベースの選択に失敗した場合、『データベースの選択に失敗しました！』と表示し、デー…

2013-10-24

jQuery, background-imageを利用した効果

DEMO_PAGE Beautiful Background Image Navigation jQueryとCSS だけで簡単にホームページトップがオシャレになります。サンプルは飲食店をイメージして作成しました。バックグラウンドイメージで画像を配置しているのがポイント！ jsファイルはDEMO_PAGE…

2013-10-24

HTML5でグリッドレイアウトサンプル（IEでも対応）

HTML5でグリッドレイアウトサンプル IEでも対応しています。 HTML5とCSSだけでこのように画像を配置できます。 floatの特性を生かしてチャレンジしてみて下さい。私の場合は画像を3列に分けることで、レイアウトしやすくしています。行ごとに分けても可能…

2013-10-23

HTML5 まとめ（１）

HTML5の説明で正しいものはどれか 1. これまでのHTMLを大幅に改定したHTML第5改訂版 2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる 3. 次世代のWeb環境に合うように仕様を作成 4. W3C(World Wide Web Consortium）の管理下で仕…

2013-10-23

HTML5 placeholder属性

・テキストボックス等にあらかじめ入力サンプル文字を表示させることができます・この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなります・placeholder属性を設定できるのは、input要素とtextarea要素のみ、値…

2013-10-23

PHP 入力されたIDを次回アクセス時まで覚える（Cookie）

【input.php】 <html> <head> <meta charset="UTF-8"> <title>入力されたIDを次回アクセス時まで覚える（Cookie）</title> <style> h1 { font-size: 20px; } dt { margin-bottom: 10px; } dd { margin-bottom: 20px; } </meta></head></html>

2013-10-23

HTML5 を使った、宿泊予約フォーム

2013-10-23

PHP まとめ ( 9 )　　問題と解答

クッキー（1） * クッキー情報をクライアント側に保存してもらうために使用する関数はどれか 1. isset関数 2. getcookie関数 3. setcookie関数 4. unset関数クッキー（2） * クッキーが保存されているディレクトリとして正しいものはどれか 1. C:\Program F…

2013-10-23

PHP まとめ ( 9 )　　問題と解答

クッキー（1） * クッキー情報をクライアント側に保存してもらうために使用する関数はどれか 1. isset関数 2. getcookie関数 3. setcookie関数 4. unset関数クッキー（2） * クッキーが保存されているディレクトリとして正しいものはどれか 1. C:\Program F…

2013-10-23

HTML5 を使った、宿泊予約フォーム

2013-10-23

PHP 入力されたIDを次回アクセス時まで覚える（Cookie）

【input.php】 <html> <head> <meta charset="UTF-8"> <title>入力されたIDを次回アクセス時まで覚える（Cookie）</title> <style> h1 { font-size: 20px; } dt { margin-bottom: 10px; } dd { margin-bottom: 20px; } </meta></head></html>

2013-10-23

HTML5 placeholder属性

・テキストボックス等にあらかじめ入力サンプル文字を表示させることができます・この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなります・placeholder属性を設定できるのは、input要素とtextarea要素のみ、値…

2013-10-23

HTML5 まとめ（１）

HTML5の説明で正しいものはどれか 1. これまでのHTMLを大幅に改定したHTML第5改訂版 2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる 3. 次世代のWeb環境に合うように仕様を作成 4. W3C(World Wide Web Consortium）の管理下で仕…

2013-10-22

PHPまとめ課題（1） - Webデザイン初心者の勉強 | Web勉強法

基礎 if文 * 変数varに代入された数値に応じて以下のようなメッセージを表示させなさい * 数値が偶数だった場合：「変数varに代入された値は、偶数です。」 * 数値が奇数だった場合：「変数varに代入された値は、奇数です。」 if文 * $var1と$var2に代入さ…

2013-10-22

HTML5を使ったお問い合わせフォーム

<html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせフォーム</title> <style> body { line-height: 1.6; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; margin-left: 30px; width: 560px; } p.site { font-weight: 500; } th { text-align: left; } </style> </head> <body> </body></html>