フォームが送信されたらメールが届くようにする メールを送る関数mb_send_mail() mb_send_mail(’①メールアドレス’，’②メールの表題’，’③メールの内容’) ①通知してほしいメールアドレス。 ②お知らせメールの件名 ③お知らせメールの本文。ここに入力したものが…
入力フォーム２−３ 送信後に表示される画面 send.phpで送信後の内容を表示する画面を作成する。 ①まずは、表示する器となるHTMLから。 【send.php】 <body><h1>メール送信画面</h1><p>以下の内容で送信されました。</p><table><tr><th>お名前：</th><td></td></tr><tr><th>メールアドレス：</th><td></td></tr><tr><th>お問い合わせ内容：</th><td></td></tr></table><p><a href="index.php">入力画面へ戻る</a></p></body> ②…
ＰＨＰでのデータの送信方法（メソッド）は３つ。 ＧＥＴ ブラウザーからサーバーにデータを渡すときに、内容（name属性の値など）をURLにつけて送られる。 個人情報の場合は内容が丸見えになるのでセキュリティ上データの送信には不向き ＄＿GET変数を使う…
入力フォーム２ 名前、メールアドレス、お問い合わせ内容を記入できるフォームを作成します。 今回は入力確認画面、送信後の画面、そして指定されたアドレスへの通知メールも実装します。 使用するファイル・index.php（入力フォーム） ・check.php（確認画…
フォーム１−４ 入力フォームの中に値が入っているかどうかをチェックする isset関数を使う ① if (isset (関数名) === true) { ※「=== ture」は省略可能で echo '入力されています'; if (isset (関数名)) { 〜〜 とできる} else { echo '入力されていません';…
HTMLの<form>で取得したデータをサーバーに送り、PHPで処理することができる。 流れ ユーザー：①HTMLフォームに書き込み、送信 ↓ サーバー：②メモリで受け取る ③Apacheで処理 ④PHPが結果を返す ※処理後、メモリからデータは消える ↓ ⑤結果をHTMLでユーザーに返す </form>…
＄変数 ＝ ’文字列’ ・PHPの変数は＄マークで始まる ※Javascriptでは「var」に当たる ・変数は半角英数に限る。ただし最初の文字に数字は使えない ・＝ は代入演算子 連結演算子は「.」 ※Javascriptでは「＋」に当たる 改行を入れる場合「”\n”」 ※Windowsで…
PHPのプログラムを開発し、ローカルサーバーで実行する為の環境設定を行う。 使用するソフトウェア：Dreamwever、XAMPPまたはMAMP ※XAMPPまたはMAMPはインストール済みとします。 ①XAMPPまたはMAMPを起動し、ApacheとMySQLをOnにする 緑色に変わったらONにな…
「favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である」（Wikipediaより） 現在鋭意作成中のウェブサイト用につくってみました。 そもそも、なぜfavic…
PHPとは？ 「PHP Hypertext Preprocessor」の略 プログラミング言語 サーバー上で動作し、webページを動的に作成する ファイルの拡張子は「.php」 開発環境 PHPの開発に必要なもの ①サーバー（ApacheがPHPの動作に必要） レンタルサーバーがなくても、コンピ…
Photoshop CS5で、ベクトルマスクを使用した、下の2枚の画像の合成写真を作ります。 完成画像 １）ツツジの画像を配置します。レイヤーを右クリックして「スマートオブジェクト」に変換します ２）向日葵の画像を配置します。レイヤーを右クリックして「スマ…
動物病院のサイト制作で、バージョン２を制作しました。 「信頼感」「優しく親しみやすい」この２つのキーワードを表現できる雰囲気を更に追求しました。 キーカラー：緑 アクセントカラー：オレンジ 昨日の先生のアドバイスでは、「背景画像も工夫の余地あ…
約１ヶ月取り組んでいた動物病院のサイト制作が、一旦完成しました。 コンセプト： 「いつでも親身になって相談できる、私たちの身近にある、町のお医者さん」 トップページ ２ページ目 フッター部分 ＜ポイント・気をつけたこと＞ 色・・・清潔感のある白を…
講義が3ヶ月目に入り、webサイト制作に入っています。 実在する動物病院のサイトを作ることになり、ラフスケッチからはじまって、今はコーディング段階に入っています。 最初は5ページの予定でしたが、7ページになりそうです。 今日は２ページ目、3ページ目…
スマートフォン用のメインコンテンツとフッターの設定編。 設定前はこんな状態です。 メインコンテンツの設定（スマートフォン用） ①テキストと画面の空きがなく、ギリギリなので空きをつくります。 PC用を想定するならば全体の幅は一定なのでpaddingを設定…
ヘッダーとナビゲーションの設定をレスポンシブWebデザイン（以下「レスポンシブ」）用に行います。 ＜ヘッダー＞ header ヘッダー部分はレスポンシブ用の設定は特になし。 ヘッダーテキストを中央揃えにする ロゴ上下の空きを24pxにする 「豆はカラダにいい…
あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整するのがレスポンシブWebデザイン。 次にCSSを書いていきます。レスポンシブWebデザインでは、CSSの記述効率とファイルサイ…
「レスポンシブ」とか色々な呼び方がありますが正確な名前は「レスポンシブWebデザイン」。 ASCIIさんの「ゼロから始めるレスポンシブWebデザイン入門」に沿って、基礎から学んでいきます。概念などはおいおい書いていくとして、今回はいきなりレスポンシブW…
タブパネルのテキストだけを改変（修正・更新）したい場合、予めテキストだけのファイルを読み込むようにしておけば、HTMLを編集せずに更新ができます。 テキストファイルのみを変更すれば、更新も簡単！ １、テキストの入っていない空のタブパネルを作りま…
Yaho!!の検索バーの真下に使われているようなタブパネルをつくります まず、HTMLとCSSを書きましょう ［HTML］ <div id="container"><ul class="tab"><li><a href="#tab1" class="selected">JavaScript</a></li><li><a href="#tab2">CSS</a></li><li><a href="#tab3">HTML</a></li><li><a href="#tab4">jQuery</a></li><li><a href="#tab5">PHP</a></li></ul></div>
GWからウェブサイトのラフデザインのスケッチを始めた。 デザイン力を上げるには有効な方法だと先生がおっしゃっていたからだ。 何気なく見ているウェブサイトにも、色々な発見がある。 ”このフォントは何だろう？webフォントかな？後で調べてみよう” ”きっ…
JavaScriptもjQueryも使わずに、CSS3だけで横のアコーディオンスライダーを作れます。 動きも非常に滑らかです。 HTMLとCSSの書き方はこちら→ Make an accordian style slider in CSS3
横方向に動くアコーディオンもjQueryでできます。今回はプラグインを使用しない方法です。 【HTML】 <dl class="accordion"><dt>1</dt><dd><div>コンテント</div></dd><dt>2</dt><dd><div>コンテント</div></dd><dt>3</dt><dd><div>コンテント</div></dd><dt>4</dt><dd><div>コンテント</div></dd><dt>5</dt><dd><div>コンテント</div></dd></dl> 【CSS】 .accordion { width: 600px; height: 300…
jQueryを使用してアコーディオンメニューを実現した課題サイト「Kitchen Club」です。 このサイトのポイント ナビゲーションがjQueryでアコーディオンメニューになっている ナビゲーションにマウスオンすると画像が変化する 商品画像のシャドウ １．アコーデ…
jQueryを使った課題サイトを作成しました。 このサイトのポイント rollover.js、LightBox.jsの２つのプラグインを使用 左サイドバーとメインコンテンツの重なり 画像だけではない、パーツの横並びが多い Photo Log １、ナビゲーションにrollover.jsを使用し…
jQueryには数多くのプラグインがありますが、プラグインがデフォルトで提供する設定をそのまま使用するのは練習段階です。 実際には自分のつくったページにプラグインを実装することが多く、そこで考慮すべきことはいくつかあります。 プラグインを動かすた…
strong要素 従来は「より強い強調」に使われていたが、HTML5より「重要なテキスト」を表す意味に変更になった b要素 従来は文字を太くするために使われていたが、HTML5より「キーワードや固有名詞等たと区別したいテキスト」を表す意味に変更になった その箇…
HTML5で追加された、フォーム関連の新機能・属性 placeholder属性 テキストボックス等に予めサンプルとして表示させておく文字 input要素とtextarea要素のみ、設定可能。値はテキストのみ placeholder="山田" autofocus属性 最初の入力項目に自動的にカーソ…
article要素 ブログ等独立した記事として成立する文章に使う ページ全体をarticle要素で囲み、body直下に置く使い方は誤り（Appleがかつて使用していた方法）body直下はheader要素しかあり得ない。この使い方でのアウトライン構造は、最上位の見出しがHTMLに…
文書構造を明確にするための要素 section要素 header要素、footer要素 nav要素 １． section要素 「コンテンツやテーマによってグループ分けをするための区切り」→文書構造上の意味のある文章を囲むために用いる メインコンテンツを入れる。必ず見出し要素（…
