ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現 される We

Web HTML/CSSPHPMySQL による Web ショップ 開 設 工 学 博 士 尾 内 理 紀 夫 著

ま え が き Web サービスの 例 題 として Web ショップを 選 び,ネット 上 に Web ショップを 開 設 させることにより,Web プログラミングの 基 本 を 習 得 することが 本 書 の 目 的 で ある Web ショップはクライアントサーバモデルにより 実 現 される Web ショップでの 時 系 列 的 処 理 の 流 れと 使 用 ソフトウェアを 以 下 に 示 す 1. クライアントは Web ショップの 店 舗 トップページなどの 閲 覧 要 求 を 送 信 し, サーバは 要 求 ページを 返 信 し,それがブラウザ 表 示 される クライアント (Web ブラウザ)には HTML5とCSS を 使 用 する 2. クライアントは 氏 名,パスワードなどからなる 新 規 会 員 登 録 要 求 をサーバ (Web サーバ:Apache を 使 用 )に 送 信 する サーバは 受 信 データに 基 づきデータ ベースに 会 員 情 報 を 追 加 し,お 客 さま ID を 返 信 する サーバ 上 のプログラミン グ 言 語 は PHP を 使 用 する サーバと 接 続 するデータベースは MySQL を 使 用 する 3. クライアントはお 客 さま ID とパスワードを 送 信 し,ログイン 要 求 する サーバはデータベースに 登 録 されたパスワードなどを 用 いてログイン 認 証 を 行 い, 結 果 をクライアントに 送 信 する 4. クライアントは 欲 しい 商 品 と 個 数 を 送 信 する サーバは,データベースにア クセスし, 在 庫 の 有 無 などを 検 索 し, 結 果 をクライアントに 送 信 する 5. クライアントはログアウト 要 求 し,サーバはログアウト 処 理 をする なお, 本 書 では OS は Windows 8/8.1/10,ブラウザは Internet Explore 10 と 11,Edge そして Google Chrome を 対 象 に XAMPP5.6.12 により 環 境 を 構 築 する なお Mac OS X v10.9 上 の Safari 7 および XAMPP5.6.8 の 環 境 でのプログラム 動 作 も 確 認 している 本 書 は, 学 校 や 組 織 で 演 習 や 実 験 付 きの 授 業 の 教 科 書 として 使 用 されることを 前 提 としており,クライアントサーバモデルの 仕 組 みとプログラミングを 重 視 してい る もちろん, 家 庭 などで, 自 分 のパソコン 上 に 本 書 の Web ショップを 構 築 する ことはでき, 独 学 独 習 も 可 能 である 2015 年 11 月 尾 内 理 紀 夫

ii 目 次 目 次. HTML と CSS 1.1 HTML の 第 一 歩 1 1.1.1 基 本 構 造 と 構 文 1 1.1.2 文 書 型 宣 言 と 全 体 構 造 2 1.1.3 要 素 の 入 れ 子 3 1.2 最 初 の HTML プログラム 3 1.4.3 id 属 性 21 1.2.1 プログラム 入 力 3 1.2.2 プログラム 保 存 5 1.2.3 プログラム 編 集 6 1.3 基 本 タグとスタイルシート 7 1.3.1 見 出 し 8 1.3.2 段 落 8 1.3.3 改 行 8 1.3.4 スタイルシート(head 要 素 での 指 定 ) 9 1.3.5 文 字 列 位 置 10 1.3.6 文 字 色 11 1.3.7 文 字 サ イ ズ 11 1.3.8 行 の 高 さ 12 1.3.9 複 数 セレクタ 12 1.3.10 スタイルシート(style 属 性 での 指 定 ) 14 1.3.11 スタイルシート(ファイル 読 込 みによる CSS 指 定 ) 15 1.3.12 下 線 上 線 取 消 し 線 16 1.3.13 区 切 り 線 16 1.3.14 上 付 き 文 字 と 下 付 き 文 字 1.3.15 強 勢 重 要 と 特 殊 文 字 17 17 1.4 class 属 性 と id 属 性 20 1.4.1 class 属 性 20 1.4.2 全 称 セレクタ 21 1.4.4 class 属 性 と id 属 性 の 違 い 22 1.5 ブ ロ ッ ク 22 1.5.1 ボ ッ ク ス 23 1.5.2 マ ー ジ ン 23 1.5.3 パ デ ィ ン グ 24 1.5.4 ボ ー ダ ー 25 1.5.5 div 要 素 と span 要 素 26 1.6 プロパティ 値 の 継 承 27 1.6.1 継 承 されないプロパティ 値 28 1.6.2 継 承 されるプロパティ 値 28 1.7 箇 条 書 き 31 1.7.1 順 序 なし 箇 条 書 き 31 1.7.2 順 序 付 き 箇 条 書 き 33 1.7.3 リスト 関 連 プロパティ 34 1.7.4 箇 条 書 きの 中 央 配 置 34 1.8 画 像 35 1.8.1 img 要 素 35 1.8.2 画 像 ファイル 形 式 36

目 次 iii 1.8.3 画 像 のボーダー 36 1.11.8 プルダウンメニュー 69 1.8.4 回 り 込 み 指 定 37 1.8.5 回 り 込 み 解 除 40 1.8.6 画 像 説 明 文 の 縦 方 向 位 置 の 調 整 41 1.8.7 壁 紙 42 1.9 表 43 1.9.1 基 本 構 文 43 1.9.2 見 出 し 行 45 1.9.3 ボ ー ダ ー 46 1.9.4 セ ル 幅 47 1.9.5 セル 内 の 文 字 位 置 48 1.9.6 セ ル の 結 合 50 1.9.7 タ イ ト ル 53 1.12.8 セレクタ 種 類 と 優 先 順 位 1.9.8 th 要 素 の 縦 配 列 54 85 1.9.9 表 全 体 の 位 置 55 1.10 リンクの 設 定 56 1.10. 1 文 字 にリンク 設 定 57 1.10. 2 画 像 にリンク 設 定 59 1.10.3 同 一 ページ 内 のリンク 先 設 定 59 1.10.4 別 ページ 内 のリンク 先 設 定 1.10.5 別 タブ 別 ウィンドウ 表 示 60 1.11 フ ォ ー ム 61 1.11.9 リストボックス 70 1.11.10 プルダウンメニューでの selected 属 性 指 定 72 1.11.11 新 規 会 員 登 録 フォーム 73 1.12 Web ページの 作 成 74 1.12.1 内 容 を 表 す 要 素 74 1.12.2 領 域 を 示 す 要 素 75 1.12.3 主 要 ナビゲーション 75 1.12.4 子 孫 結 合 子 78 1.12.5 擬 似 ク ラ ス 78 1.12.6 店 舗 トップページ 79 1.12.7 2 段 組 みレイアウト 82 1.12.9 商 品 ペ ー ジ 85 1.12.10 新 規 会 員 登 録 ページ 87 1.12.11 ログインページ 88 1. 13 FTP によるアップロード 90 1.13.1 ファイル 転 送 ソフトの ダウンロード 90 1.13.2 ファイル 転 送 設 定 90 1.13.3 サーバへのファイル 転 送 91 61. PHP 1.11.1 form 要 素 と input 要 素 61 1.11.2 テキストフィールド パスワー ドフィールド 送 信 ボタン 2.1 PHP の 第 一 歩 2.1.1 サ ー バ 環 境 93 93 62 2.1.2 スクリプト 言 語 93 1.11.3 ラジオボタン 64 2.1.3 基 本 構 造 94 1.11. 4 チェックボックス 65 2.1.4 最 初 の PHP プログラム 95 1.11. 5 リセットボタン 66 2.1.5 文 字 列 処 理 96 1.11.6 hidden タイプ 67 2.1.6 ブラウザ 表 示 までの 仕 組 み 1.11. 7 テキストエリア 67 98

iv 目 次 2.2 変 数 と 定 数 99 2.8.1 ローカル 変 数 120 2.2.1 変 数 99 2.8.2 グローバル 変 数 121 2.2.2 型 宣 言 99 2.8.3 スーパーグローバル 変 数 2.2.3 代 入 100 121 2.2.4 " 変 数 " と ' 変 数 ' 100 2.9 オブジェクト 指 向 122 2.2.5 定 数 101 2.9.1 カ プ セ ル 化 122 2.2.6 配 列 と array() 関 数 101 2.9.2 ク ラ ス 123 2.2.7 連 想 配 列 102 2.2.8 二 次 元 配 列 103 2.3 演 算 子 104 2.3.1 代 数 演 算 子 104 2.3.2 代 入 演 算 子 104 2.9.3 メ ソ ッ ド 124 2.9.4 オブジェクト(インスタンス) 125 2.9.5 クラスの 継 承 127 2.9.6 require 文 と include 文 129 2.3.3 加 算 子 と 減 算 子 105 2.10 クライアントとサーバの 通 信 2.3.4 文 字 列 連 結 演 算 子 105 130 2.3.5 比 較 演 算 子 2.3.6 論 理 演 算 子 106 107 2.10.1 フォームからの 送 信 と スーパーグローバル 変 数 2.4 条 件 分 岐 文 108 による 受 信 131 2.4.1 if 文 108 2.10.2 get 通 信 と post 通 信 133 2.4.2 if~else 文 109 2.10.3 htmlspecialchars() 関 数 134 2.4.3 三 項 演 算 子 による 条 件 分 岐 2.10.4 スクリプトインジェクション 110 135 2.4.4 if~elseif 文 110 2.4.5 switch 文 110 2.5 繰 り 返 し 文 111 2.5.1 while 文 111 2.5.2 do~while 文 112 2.5.3 for 文 113 2.5.4 foreach 文 114 2.6 脱 出 文 116 2.6.1 break 文 116 2.6.2 continue 文 116 2.7 関 数 116 2.7.1 ユーザ 定 義 関 数 116 2.7.2 定 義 済 み 関 数 118 2.8 変 数 のスコープ 120 2.11 ク ッ キ ー 136 2.11.1 setcookie() 関 数 136 2.11.2 クッキー 使 用 例 137 2. 12 Web はステートレス 139 2.13 セッション 139 2.13.1 セッションID 139 2.13.2 セッション 開 始 140 2.13.3 スーパーグローバル 変 数 $_SESSION 140 2.13.4 セッション 継 続 141 2.13.5 セッション 利 用 例 141 2.13.6 セッション 終 了 とログアウト 処 理 144

. MySQL 3.1 リレーショナルデータベース 147 3.1.1 Web ショップのデータベース 147 3.1.2 表 (テーブル) 148 3.1.3 第 1 正 規 形 149 3.1.4 主 キー(プライマリーキー) 151 3.1.5 キ ー 制 約 152 目 次 v 3.5.4 レコード 格 納 167 3.5.5 表 の 追 加 168 3.5.6 ファイル 読 込 みによる SQL 文 実 行 169 3.5.7 Web ショップの 表 作 成 170 3.6 検 索 172 3.6.1 SELECT 命 令 172 3.6.2 検 索 条 件 の 設 定 172 3.6.3 比 較 演 算 子 173 3.6.4 論 理 演 算 子 174 3.6.5 LIKE 演 算 子 による 文 字 列 検 索 3.1.6 外 部 キ ー 153 3.7 更 新 と 削 除 176 3.1.7 表 操 作 153 3.1.8 第 1 正 規 形 における 異 常 154 3.1.9 関 数 従 属 154 3.1.10 第 2 正 規 形 156 3.1.11 第 3 正 規 形 157 3.1.12 データベース 設 計 159 175 3.7.1 レコードの 更 新 176 3.7.2 レコードの 削 除 176 3.7.3 表 構 造 の 更 新 177 3.8 結 合 演 算 177 3.8.1 和 演 算 UNION 178 3.8.2 内 部 結 合 INNER JOIN 180 3.8.3 外 部 結 合 OUTER JOIN 182 3.2 MySQL の 起 動 160 3.9 SELECT 命 令 の 応 用 183 3.3 データベース 161 3.3.1 SQL 文 161 3.3.2 データベースの 作 成 と 削 除 3.3.3 データベースの 表 示 と 選 択 161 162 3.4 デ ー タ 型 163 3.4.1 整 数 型 163 3.4.2 実 数 型 164 3.4.3 文 字 列 型 164 3.5 表 とレコード 165 3.5.1 表 の 構 造 165 3.5.2 最 初 の 表 作 成 166 3.5.3 表 の 表 示 167 3.9.1 表 示 結 果 数 の 指 定 183 3.9.2 レコードの 並 び 順 指 定 184 3.9.3 SELECT 命 令 による 計 算 184 3.9.4 サブクエリ(クエリの 入 れ 子 ) 186 3.9.5 GROUP BY 186 3.9.6 エ イ リ ア ス 187 3.10 日 付 時 刻 関 数 187 3.11 クライアント サーバ データ ベース 間 の 通 信 189 3.11.1 サーバとデータベースの 接 続 と 切 断 190 3.11.2 接 続 時 のエラー 処 理 191 3.11.3 ヒアドキュメント 192

vi 目 次 3.11.4 サーバからデータベースへの 4.3.2 処 理 プログラム 209 SQL 文 発 行 194 4.3.3 ログイン 失 敗 処 理 212 3.11.5 SQL インジェクション 196 4.3.4 プログラム 実 行 212 3.11.6 プリペアドステートメント 4.4 商 品 購 入 と 在 庫 管 理 213 3.11. 7 プレースホルダ 198 199 4.4.1 hidden タイプの 使 用 214 3.11.8 プレースホルダへの 値 の 結 合 4.4.2 ユーザ 定 義 関 数 array_hsc() 214. Web ショップ 開 設 201 4.1 完 成 版 に 向 けたプログラム 修 正 と 保 存 203 4.2 新 規 会 員 登 録 204 4.2.1 クライアントからの 登 録 要 求 204 4.2.2 サーバでの 登 録 処 理 205 4.2.3 パスワードの 暗 号 化 206 4.2.4 プログラム 実 行 207 4.3 ロ グ イ ン 208 4.3.1 セッション ID 固 定 化 攻 撃 209 4.4.3 処 理 プログラム 215 4.4.4 プログラム 実 行 217 付 録 219 A.1 本 書 に 掲 載 のプログラムデータについて サクラエディタのインストール 219 A. 2 XAMPP のインストール 220 A.3 http://localhost 関 連 の 設 定 223 A.4 PHP の 日 本 語 とタイムゾーンの 設 定 223 A.5 MySQL の 文 字 コード 設 定 224 A.6 PHP の 主 な 予 約 語 225 索 引 226 本 書 に 掲 載 のプログラムは, Web ページ 内 本 書 に 関 するページ の http://www.coronasha.co.jp/np/isbn/9784339028522/ からアーカイブデー タをダウンロードできる このアーカイブデータを 解 凍 する 際 のパスワード は, 本 書 巻 末 付 録 の A.2 節 に 記 載 の ROOT パスワードと 同 じである 1 章 の HTML/CSS 関 連 のプログラムは HTML フォルダ 内 の webshop フォルダ に,2~4 章 の PHP,MySQL 関 連 のプログラムはPHP フォルダ 内 の webshop フォルダに,それぞれ 格 納 されている

HTML CSS 1 章 HyperText Markup Language の 略 称 である HTML(エイチティーエムエル)は Web ページを 記 述 するためのマークアップ 言 語 であり,スイス ジュネーブ 郊 外 にある CERN( 欧 州 原 子 核 研 究 機 構 )に 所 属 していたティム バーナーズ=リーに より 1989 年 から 1990 年 にかけて 創 案, 開 発 された そして 1995 年 に 最 初 の 標 準 化 仕 様 が 公 開 された というのはコンピュータ 上 のブラウザ 表 示 のためのプログラミング 言 語 の 一 つであり, 見 出 しや 段 落 の 指 定, 箇 条 書 きの 指 定, 表 の 指 定 などに 関 する 指 定 (マークアップという)を 記 述 できる HTML では タグ < とタグ > で 囲 んだ 指 令 によりマークアップする HTML は 文 章, 表, 画 像 などを Web ページに 表 示 できるだけでなく,クリックひとつで 他 の Web ページに 飛 んでいくことができるハイパーテキスト,ハイパーメディアを 実 現 することがで きる 本 書 では HTML は HTML5 に 準 拠 する 一 方, 色 など 見 栄 えに 関 する 指 定 は CSS(cascading style sheets)を 用 いる 本 章 では,HTML と CSS の 基 本 について 説 明 しつつ,Web ショップの 店 舗 トッ プページ, 商 品 ページ, 新 規 会 員 登 録 ページ,ログインページのブラウザ 表 示 のた めの HTML と CSS を 作 成 する.HTML... が HTML の 基 本 構 造 であり, 全 体 が <html> と </html> とで 囲 まれてお り,<html> で 開 始 し,</html> で 終 了 する 半 角 < と 半 角 > で 囲 まれたによ り 各 種 の 指 示 が 与 えられる 大 部 分 のタグはとがあり, 一 対 と なっている 開 始 タグの 構 文 は < 要 素 名 >

2 1. HTML と CSS <html> <head> ------------------ </head> <body> ------------------ </body> </html>. HTML 基 本 構 造 であり, 図 1.1 の 最 初 の 行 の <html> は html 要 素 の 開 始 タグであり,ここから HTML が 始 まることを 示 している ここにおける html はであるが,この html のことを html タグと 呼 ぶこともある というのは, 簡 単 にいえば, 言 語 の 文 法 に 基 づく 形 の 規 則 のことである この 場 合 だと, HTML というマークアッ プ 言 語 の 文 法 に 基 づく 開 始 タグの 形 は < のつぎに 要 素 の 名 前 が 来 て,そのつぎに > が 来 るのが 規 則 です ということを 本 書 では, 開 始 タグの 構 文 は < 要 素 名 > であると 表 現 している 一 方, 終 了 タグの 構 文 は </ 要 素 名 > である < のつぎにスラッシュ / が 付 いて,そのつぎに 要 素 名 と > が 続 く 形 が 終 了 タグの 構 文 であるということである 図 1.1 の 最 後 の 行 の </html> は 終 了 タグで ある 開 始 タグから 終 了 タグまでをという <html>~</html> の 部 分 を html,そして <html> と </html> で 囲 まれた 部 分 を html という 要 素 名 と 後 述 する 属 性 名 は 半 角 英 数 字 であり,HTML では 英 字 において 大 文 字 と 小 文 字 の 区 別 はしない 本 書 では HTML の 要 素 名, 属 性 名 の 英 字 は 小 文 字 とする.. <html> の 前 に(DOCTYPE 宣 言 )を 置 く 文 書 型 宣 言 は,この HTML が HTML のどのバージョンの DTD(document type definition,) に 従 って 記 述 されているかを 宣 言 する HTML5 には DTD はないが 文 書 型 宣 言 をし ないとブラウザはブラウザの 独 自 仕 様 に 基 づいて 解 釈 してしまい,HTML5 として 解 釈 してくれない HTML5 で 記 述 する 場 合 は HTML の 冒 頭 に <!DOCTYPE html> を 置 き,HTML5 の 標 準 モードであることを 宣 言 する 文 書 型 宣 言 をすると <!DOCTYPE html>

1.2 最 初 の HTML プログラム 3 <html> ~ </html> のような HTML 全 体 構 造 になる.. 開 始 タグと 終 了 タグで 囲 まれた 内 部 にさらに 要 素 を 記 述 することができる これ を 要 素 をにする という 図 1.1 では,<html>~</html> の html 要 素 の 中 に,さらに head 要 素 と body 要 素 が 入 れ 子 になっている <head>~</head> の 部 分 が head 要 素,<body>~</body> の 部 分 が body 要 素 である ある 要 素 の 内 側 に 直 に 入 れ 子 で 入 っている 要 素 をその 要 素 の, 外 側 の 要 素 をという 図 1.1 において,html 要 素 は head 要 素 と body 要 素 の 親 要 素 で あり,head 要 素 と body 要 素 は html 要 素 の 子 要 素 である 子 要 素 である body 要 素 内 にさらに 要 素 を 入 れ 子 にすることができる この 場 合,さらに 入 った 要 素 は, html 要 素 から 見 ると 孫 要 素 に 当 たる さらにこの 中 にひ 孫 要 素 を 入 れ 子 にするこ とができる このような 親, 子, 孫,ひ 孫 の 関 係 にある 要 素 をという 図 1.1 の head 要 素 の ---------------- の 部 分 には 主 にページのタイトルやスタイル ( 見 栄 え)を 指 定 する 図 1.1 の body 要 素 の ---------------- の 部 分 には, 主 にページ の 構 造 と 内 容 を 指 定 する そのために 各 種 の 要 素 が 記 述 される 本 書 では body 要 素 内 の 要 素 や 属 性 の 構 文 を HTML の 構 文 という. HTML ブラウザに ようこそショップへ を 表 示 させる HTML プログラム(リスト 1-1 sample1.html)を 作 成 する プログラム 作 成 にはサクラエディタを 用 いる サクラ エディタのインストールに 関 しては 巻 末 付 録 の A.1 節 に 記 載 した.. 入 力 に 先 立 ち, 教 員 などが 指 示 する 位 置 に, 独 習 の 読 者 は 適 当 な 位 置 に webshop フォルダを 作 成 しておく - のように, 親 要 素 の 開 始 タグ, 終 了 タグに 比 べ, 子 要 素 の 開 始 タグ, 終 了 タグを 一 段 (スペース 数 個 分 ) 右 に 配 置 すること, 孫 要 素 はさらに 1 段 右 に 開

4 1. HTML と CSS - sample1.html 1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title> 最 初 の HTML</title> 6 </head> 7 <body> 8 <!-- 初 めての HTML 文 書 --> 9 ようこそショップへ 10 </body> 11 </html> 始 タグ, 終 了 タグを 配 置 すること,ひ 孫 要 素 はさらに, という 具 合 に 配 置 をする ことを,あるいはという プログラムを 見 やすくするた めには 適 切 な 段 付 けをする 必 要 がある しかし 本 書 では 紙 面 の 制 約 があり,ほとん どのプログラムで 段 付 けはしない 見 にくくなるがご 容 赦 願 いたい 開 始 タグ 内 にはその 要 素 に 関 する(HTML 属 性 )を 記 述 できる 構 文 は 属 性 名 =" 属 性 値 " である リスト 1-1 の2 行 目 のhtml 開 始 タグは <html lang="ja"> となっている lang は HTML 内 で 使 用 する 言 語 という 属 性 名 であり,ja は 属 性 値 で 日 本 語 を 意 味 している lang 属 性 の 値 が ja である といった 表 現 をする 属 性 名 に 使 用 する 英 字 は 大 文 字 でも 小 文 字 でもよいが, 本 書 では 小 文 字 とする 4 行 目 の meta 要 素 の 開 始 タグには HTML の 各 種 情 報 (メタ 情 報 )を 記 述 する <meta charset="utf-8"> では 文 字 コード(charset 属 性 )に 属 性 値 UTF-8 を 指 定 している 文 字 コード 指 定 なので <title> タグの 前 に 置 く meta 要 素 には 要 素 内 容 はなく, 終 了 タグはない 開 始 タグのみで 要 素 内 容 がなく, 終 了 タグがない 要 素 を から という 5 行 目 にある <title> と </title> で 囲 まれた title 要 素 にはページタイトルを 記 述 する ページタイトルとはブラウザのタイトルバーに 表 示 される,そのページの 表 題 であり,Internet Explorer の お 気 に 入 り の 登 録 名 として 使 用 され, 履 歴 一 覧 に 表 示 される title 要 素 にページタイトルを 設 定 しないと,ブラウザのタイト 本 書 では,プログラムに 使 用 する 引 用 符, 二 重 引 用 符 に,ʻ ʼ, (カーリークォート)では なく,' '," "(ストレートクォート)を 使 用 する ちなみに,プログラムで 使 用 する 場 合, カーリークォートでは ʼ ʼ, となることに 注 意 してほしい

1.2 最 初 の HTML プログラム 5 ルバーには,その HTML のファイル 名,この 場 合 sample1.html が 表 示 される 7 行 目 から body 要 素 が 始 まる 8 行 目 の <!-- と --> とで 囲 まれた 部 分 は HTML の( 注 釈 )である コメ ントは 人 間 のためのメモ 文 であり,ブラウザは HTML を 解 釈 処 理 する 際 にコメ ントは 読 み 飛 ばす 適 切 なコメントを 適 宜 付 けておくことは 重 要 である CSS のコ メントは 記 号 が 異 なり,これは 1. 3. 4 項 で 述 べる.. エディタを 用 いてリスト 1-1 の 入 力 を 完 了 したら, 拡 張 子 を html とし sample1. html というファイル 名 で webshop フォルダに 格 納 する ファイル 名 に 日 本 語 を 使 用 すると, 後 々 問 題 が 発 生 することがあるので,ファイル 名 は 半 角 英 数 字 にする 拡 張 子 を 含 めたファイル 名 全 体 をつねに 表 示 させる 設 定 にしておくと 便 利 であ る 方 法 は Windows 8.1 では, 一 例 として,[Windows] キーを 押 しながら X を 押 し, 表 示 された 中 の [コントロールパネル] を 選 択 ( 左 クリック)する 表 示 され た [コントロールパネル] の 項 目 の [フォルダーオプション] を 選 択,あるいは [デ スクトップのカスタマイズ] を 選 択 してから [フォルダーオプション] を 選 択 する そして [ 表 示 ] タブを 選 択 し,[ 詳 細 設 定 ] ボックス 中 の [ 登 録 されている 拡 張 子 は 表 示 しない] のチェックを 外 し,[OK] を 選 択 すればファイル 名 が 拡 張 子 付 きとなる サクラエディタで 作 成 した HTML を 最 初 に 保 存 するには, 例 えば [ファイル] を 選 択 し,つぎに [ 名 前 を 付 けて 保 存 ] を 選 択 し,ファイル 名 を,このリスト 1-1 の 場 合 sample1.html とし, 文 字 コードセットを UTF-8 にした 後 に,[ 保 存 ] を 選 択 す る ファイルを 保 存 するフォルダは webshop である 保 存 した 後,webshop フォルダを 開 き,sample1.html の 上 にカーソルを 置 き, 右 クリックし,[プログラムから 開 く] を 選 択 すると. のような 表 示 が 現 れるので ブラウザを 選 択 する Internet Explorer をブラウザとして 選 択 すると. のよう な Web ページがブラウザ 表 示 される sample1.html ファイル 名 のアイコンをサクラエディタ アイコンからブラウザ アイコンに 変 更 し,それをダブルクリックするだけで Web ページとして 表 示 させ たければ, 図 1.2 の [ 既 定 のプログラムの 選 択 ] を 選 択 する. が 表 示 される Windows 10 では [エクスプローラーのオプション] を 選 択 する

6 1. HTML と CSS. ブラウザの 選 択. 最 初 の HTML. ファイルを 開 く 方 法 の 選 択 ので,すべてのHTML ファイルをInternet Explorer で 開 きたければInternet Explorer を,Google Chrome で 開 きたければ Google Chrome を 選 択 する ブラウ ザが HTML を 解 釈 し,Web ページとして 表 示 する このため, 使 用 ブラウザの 種 類,バージョンによってはタグや CSS(1.3.4 項 )の 解 釈 が 異 なる 可 能 性 があり, 表 示 される Web ページが 微 妙 に 異 なる 本 書 の HTML ファイルは Windows 8/8.1/10 上 の Google Chrome,Internet Explorer 10 と 11,Edge そして Mac OS X v10. 9 上 の Safari 7 でも 表 示 できるが, 見 栄 えが 微 妙 に 異 なる.. リスト 1-1 を 出 発 点 とし,Web ショップのページを 順 次 発 展 的 に 作 成 していく

1.3 基 本 タグとスタイルシート 7 リスト 1-1 を 編 集 する 方 法 はいくつかある サクラエディタを 起 動 し,[ファイ ル] を 選 択 し,[ 開 く] を 選 択 し,いくつかのフォルダを 選 択 したのち,webshop フォルダを 選 択 すれば,そこに 作 成 したファイルが 表 示 されるので,それを 選 択 す る いまは,sample1.html を 選 択 すれば,リスト 1-1 が 表 示 されるので,それを 編 集 し, 上 書 き 保 存,あるいは 新 規 に 別 名 保 存 をすればよい この 後, 保 存 したファ イルを 選 択 すれば,Web ページが 表 示 され, 編 集 内 容 が 反 映 されていることを 確 認 することができる.. の Web ページの 作 成 を 例 にとり, 基 本 的 なタグとスタイルシートについ て 説 明 する タグは HTML タグともいわれる 図 1.5 を 表 示 する sample2.html を - に 示 す sample2.html も sample1.html(リスト 1-1)と 同 様 に webshop フォルダに 格 納 する. Web ショップページ - sample2.html 1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title> ホーム </title> 6 </head> 7 <body> 8 <h1> ようこそショップ 古 炉 奈 へ </h1> 9 <p> あなたの 生 活 を 豊 かにする 何 かが 見 つかる 店 です </p> 10 <h2> キャンペーン 実 施 中 </h2> 11 <p> おかげさまで 創 立 10 周 年 を 迎 えました 12 感 謝 の 気 持 ちを 込 めてキャンペーンをご 用 意 しました </p> 13 </body> 14 </html>

8 1. HTML と CSS.. 8 行 目 の h1 要 素 はを 表 す h は heading( 見 出 し)の 頭 文 字 で,h1 要 素, h2 要 素,h3 要 素,h4 要 素,h5 要 素,h6 要 素 の 6 種 類 ある h1 が 最 大 の 見 出 し 文 字,h6 が 最 小 の 見 出 し 文 字 であり,h のつぎの 数 値 が 大 きくなるにつれ, 文 字 の 大 きさが 小 さくなり, 見 出 し 文 字 が 小 さくなるにつれ, 重 要 度 が 低 くなる <h1> と </h1> で 囲 まれた 部 分 が 見 出 しである h1 要 素 から h6 要 素 で 指 定 された 見 出 し 行 の 前 後 にはそれぞれ 改 行 が 挿 入 される リスト 1-2 では,8 行 目 の h1 と10 行 目 の h2 の 2 種 類 の 見 出 し 要 素 が 使 用 されている.. 9 行 目 そして 11~12 行 目 にかけての <p> と </p> で 囲 まれた 文 章 は 一 つの 段 落 である p 要 素 の p は paragraph( 段 落 )の 頭 文 字 である 段 落 の 前 後 にはそれぞ れ 改 行 が 入 る HTML5 以 前 においては,h1 要 素 から h6 要 素,p 要 素 のように 前 後 に 改 行 が 入 ると,テキストの 一 部 としてのという 分 類 がさ れていた HTML5 ではこれらとは 異 なるカテゴリー,コンテンツモデルという 分 類 がされているが, 本 書 ではわかりやすいブロックレベル 要 素,インライン 要 素 と いう 分 類 で,HTML5 準 拠 の 各 種 の 説 明 を 進 めていく.. リスト 1-2 の 11 行 目 の 最 後 には 改 行 が 入 り, 段 落 は 12 行 目 へと 続 いている し かし 図 1.5 のブラウザ 表 示 では 改 行 されていない ブラウザは HTML ソースコー ド 上 で 入 力 した 改 行 は 半 角 スペースとして 表 示 する つまりソースコード 上 で 改 行 されていても,ブラウザを 起 動, 表 示 させてみると, 改 行 されていない 改 行 させ たい 場 合 は, 改 行 したい 場 所 に 改 行 のための <br> タグを 置 かねばならない ただし br 要 素 をスタイル 設 定 のために 使 用 することは 推 奨 されない 例 えば, 文 字 列 の 位 置 を 数 行 下 げたり, 文 の 長 さを 揃 えたりなどのレイアウト 調 整, 見 栄 え の 調 整 のために br 要 素 を 使 用 しない リスト 1-2 の 11 行 目 末 に <br> を 入 れ,11~12 行 目 を <p> おかげさまで 創 立 10 周 年 を 迎 えました <br> 感 謝 の 気 持 ちを 込 めてキャンペーンをご 用 意 しました </p>

1.3 基 本 タグとスタイルシート 9 と 変 更 し,sample2_1.html に 保 存 する Web ページを 再 度 開 いてみると 改 行 され ている HTML ではタグを 用 いて 指 示 しないと Web ページ 表 示 に 反 映 されない br 要 素 に 終 了 タグはなく, 空 要 素 である..(head ) Web ページ 内 のスタイル(レイアウト, 色 などの 見 栄 え)を (cascading style sheet,css)により 設 定 する スタイルシートの 指 定 は,head 要 素 における style 要 素 で 指 定 する 方 法,body 要 素 における style 属 性 で 指 定 する 方 法,そしてファイル 指 定 する 方 法 がある 本 項 では head 要 素 における style 要 素 で 指 定 する 方 法 について 説 明 する 以 降,スタイルシートを CSS と 略 記 する head 要 素 内 の style 要 素 での CSS 指 定 は,body 要 素 全 体 にわたっての CSS 指 定 となる 図 1.5 の 背 景 色 をシルバー 色 にしたいときには,sample2_1.html の head 要 素 に - の 6~8 行 目 の style 要 素 を 追 加 し,sample3.html に 保 存 する 実 行 すると. のように 背 景 色 がシルバー 色 になる sample3.html の 6~8 行 目 の style (<style>~</style>)が CSS である そ - sample3.html 省 略 sample2_1.html の 4 行 目 までと 同 じ 5 <title> ホーム </title> 6 <style> 7 body {background-color: silver;} 8 </style> 9 </head> 以 下, 省 略 sample2_1.html と 同 じ. 背 景 色 をシルバー 色 に

10 1. HTML と CSS の 中 の 7 行 目 で,スタイルの 適 用 対 象 セレクタを body にし,そのセレクタに 対 し て 名 background-color( 背 景 色 の 意 味 )と 値 の 組 を 指 定 する この 場 合 はシルバー 色 silver という 値 である プロパティ 名 と 値 はコロン : によって 区 切 ら れる プロパティ 名 とその 値 の 組 により CSS を 指 定 するので,これを CSS という( 本 書 では 単 にプロパティという 2. 9. 2 項 のプロパティとは 異 なる) 一 つのセレクタに 対 して 複 数 のプロパティを 指 定 したければ,それらをセミコロン ; で 区 切 る まとめると,CSS の 構 文 は セレクタ {プロパティ 名 : 値 ; プロパティ 名 : 値 ; --------} である { ~ } を 宣 言 ブロック,プロパティ 名 と 値 の 組 を 宣 言 という { は left curly bracket あるいは 左 波 括 弧,} は right curly bracket あるいは 右 波 括 弧 と 呼 ば れる プロパティ 名 は 大 文 字 でも 小 文 字 でもよいが, 本 書 では 小 文 字 とする なお 宣 言 ブロック 内 の 最 後 の 宣 言 のセミコロン,つまり 波 括 弧 内 の 最 後 のセミコロンは 省 略 できる CSS におけるコメントは /* と */ とで 囲 む.. 図 1.6 の 文 字 列 はすべて 左 寄 せになっているが,これらすべてを 中 央 配 置 に 指 定 したければ,リスト 1-3の7 行 目 を body {background-color: silver; text-align: center;} に 変 更 し,sample3_1.html に 保 存 すると,. のように 表 示 される. 文 字 列 の 中 央 配 置

1.3 基 本 タグとスタイルシート 11 text-align プロパティは 文 字 列 位 置 を 指 定 する 値 と 意 味 は left; 左 寄 せ right; 右 寄 せ center; 中 央 配 置 である h1~h6 要 素 と p 要 素 の 位 置 を 個 別 に 指 定 することもできる 例 えば h1 要 素 のみ 右 寄 せにしたければ,h1 {text-align: right;} とする.. 社 文 字 色 指 定 の CSS の 構 文 は セレクタ {color: 色 ;} である を body とすれば,ページ 全 体 の 文 字 の 色 を 一 括 指 定 できる セ レクタを p とすれば,<p> と </p> で 囲 まれた 部 分 の 文 字 色 を 指 定 できる 色 はblack,silver,gray,white,maroon,red,purple,green,lime,olive, yellow,navy,blue,pink,orange などのように 英 語 で 指 定 することができる ま た,# で 始 まる 6 桁 の 16 進 数 で 指 定 することもできる 最 初 の 2 桁 が 赤 光 の 強 さ, つづく 2 桁 が 緑 光 の 強 さ, 最 後 の 2 桁 が 青 光 の 強 さである この 赤 光, 緑 光, 青 光 は 光 の 三 原 色 であり,これらを 混 ぜることにより, 各 種 の 色 を 生 成 できる 各 2 桁 は00からff であり,00 が 最 弱,ff が 最 強 である 例 えば,#000000 は 黒,#ffffff は 白,#ff0000 は 赤,#0000ff は 青 である この 16 進 数 による 指 定 を による 指 定 という カラーコードと 対 応 する 具 体 的 な 色 については Web 上 などに 情 報 があるので 必 要 に 応 じて 参 照 してほしい.. 文 字 サイズ( 大 きさ) 指 定 の CSS の 構 文 は セレクタ {font-size: 値 ;} である リスト 1-3 の 見 出 し h1 の ようこそショップ 古 炉 奈 へ の 文 字 の 色 を 緑 にし, 見 出 し h1 の 文 字 のサイズを 既 定 サイズより,もっと 大 きくしたければ,セ レクタを h1,その 宣 言 ブロックにおいて,プロパティ 名 color,その 値 を green, プロパティ 名 font-size,その 値 を 例 えば 48px とする sample3_1.html の style 要 素 内 のつぎにコロナ の 7 行 目

227 ID ID

228 A action alt ALTER TABLE and array() array_hsc() array_map() article aside auto AUTO_INCREMENT AVG() a B background-color background-image BETWEEN bindparam() bindvalue() block body border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width border break br b caption-side caption catch catch CHAR checked class class clear C clearfix colgroup color colspan cols col continue COUNT() CREATE DATABASE CREATE TABLE CSS CSS ctype_digit() D date() DATE_FORMAT() DB DELETE display div DOCTYPE dowhile DROP DATABASE DROP TABLE DSN DTD echo E

229 Edge em em ENT_QUOTES execute() fetch() float FLOAT font-size footer for foreach FTP get getmessage() GIF global Google Chrome GROUP BY F G H h h h h h h hash() header head height hidden hover href hr HTML HTML htmlspecialchars() html HTML html html I Mac main id margin id margin-bottom if margin-left ifelse margin-right ifelseif margin-top img MAX() include maxlengh include_once MEDIUMINT inherit meta inline method inline-block MIN() INNER JOIN multiple input MySQL INSERT MySQL INT MySQL Internet Explorer is_array() isset() name i nav J JOIN new NULL JPG L label ol ON option lang or lastinsertid() ORDER BY LEFT JOIN OUTER JOIN LEFT OUTER JOIN overflow LIKE LIMIT line-height padding link padding-bottom list-style-image padding-left list-style-position padding-right list-style-type padding-top list-style-type password_hash() li password_verify() PDO M N O P

230 PHP phpmyadmin PHPSESSID PHP placeholder PNG post prepare() PRIMARY KEY print print_r() private protected public px p Q R query() rel require require_once RIGHT JOIN RIGHT OUTER JOIN rowspan rows S Safari section SELECT selected select session_destroy() session_id() session_name() session_regenerate_id() session_start() setattribute() setattribute() setcookie() SHOW SHOW TABLES size SMALLINT small span SQL SQL src strong stylesheet style style sub SUM() sup switch table target td text-align textarea text-decoration th time() title try try tr type T U ul UNION UNIX unset UPDATE URL USE USING value V VARCHAR vertical-align WHERE while Windows XAMPP xor W X ' --! $_COOKIE $_GET $_POST $_SESSION % && * */ /* // : ; _ { } " ++ < <<< = > ->?

Web サービス 入 門 HTML/CSSPHPMySQL による Web ショップ 開 設 Introduction to Web Service Setting up Web Shop by HTML/CSS, PHP, MySQL C Rikio Onai 2016 2016 年 1 月 28 日 初 版 第 1 刷 発 行 検 印 省 略 著 者 略 歴 NTT Occam MIT お ない 著 者 尾 内 理 紀 夫 発 行 者 株 式 会 社 代 表 者 牛 来 真 也 印 刷 所 萩 原 印 刷 株 式 会 社 112 0011 東 京 都 文 京 区 千 石 4 46 10 発 行 所 株 式 会 社 コ ロ ナ 社 CORONA PUBLISHING CO., LTD. Tokyo Japan 振 替 00140 8 14844 電 話 (03)3941 3131( 代 ) り き お ISBN 978 4 339 02852 2 ( 金 ) ( 製 本 : 愛 千 製 本 所 ) Printed in Japan 本 書 のコピー,スキャン,デジタル 化 等 の 無 断 複 製 転 載 は 著 作 権 法 上 での 例 外 を 除 き 禁 じられております 購 入 者 以 外 の 第 三 者 による 本 書 の 電 子 データ 化 及 び 電 子 書 籍 化 は,いかなる 場 合 も 認 めておりません 落 丁 乱 丁 本 はお 取 替 えいたします