BlueGriffonで簡単な「お問い合わせフォーム」の作り方

BlueGriffonで簡単な「お問い合わせフォーム」の作り方を紹介します。

.htaccessを使ってHTMLファイルでPHPを実行する方法

「MIMEタイプの設定」を.htaccessで制御することで「.html」ファイル内のPHPを実行できるようにします。

「.htaccess」を「index.html」と同じフォルダに置きます。

BlueGriffonを起動

「新規作成」をクリック

「Dual View」をクリック

「index.html」で保存

CSSの作成

「パネル」「スタイルシート」をクリック

スタイルシートを追加（＋）をクリック

「文書からリンクする」「新しいファイル」をクリック

index.htmlと同じフォルダにstyle.cssで保存

<form>で入力フォームを作る

「挿入」「フォーム」「フォーム」をクリック

「URL:confirm.php」「POST」を選択して「OK」をクリック

<label>タグで関連付け

<label>タグとは、フォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのタグです。

「挿入」「フォーム」「ラベル」をクリック

「コントロールのID：name」を入力して「OK」をクリック

「挿入」「フォーム」「入力」「文字入力」をクリック

「名前：お名前」と入力し「OK」をクリック

<input>へCSS（スタイルシート）を指定するには、id属性を使います。

<input>へ名前を付け、スタイルシートを指定します。

<input>をクリック

<input>を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック

「大きさ」「幅：700px」「高さ：25px」と入力し「Please enter an ID」に「name」と入力してokクリック

メールアドレスの設定

メールアドレスも同様に設定します。

「挿入」「フォーム」「ラベル」をクリック

「コントロールのID：mail」を入力して「OK」をクリック

「挿入」「フォーム」「入力」「メールアドレス」をクリック

「名前：メールアドレス」と入力し「OK」をクリック

<input>へ名前を付け、スタイルシートを指定します。

<input>をクリック

<input>を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック

「大きさ」「幅：700px」「高さ：25px」と入力し「Please enter an ID」に「mail」と入力してokをクリック

「お問い合わせ内容」の設定

「挿入」「フォーム」「ラベル」をクリック

「コントロールのID：text」を入力して「OK」をクリック

「挿入」「フォーム」「文字入力」をクリック

「名前：お問い合わせ内容」と入力し「OK」をクリック

<textarea>へ名前を付け、スタイルシートを指定します。

<textarea> をクリック

<textarea> を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック

「大きさ」「幅：700px」「高さ：100px」と入力し「Please enter an ID」に「text」と入力してokをクリック

「入力内容確認」の設定

「挿入」「フォーム」「入力」「送信ボタン」をクリック

<input>へ名前を付け、スタイルシートを指定します。

<input>を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック

「大きさ」「幅：300px」「高さ：30px」と入力し「Please enter an ID」に「submit」と入力してokをクリック

こんな感じになります。

【動画解説１８３分】初心者のためのホームページ作成完全マニュアル入門書

Pleiades All in One をインスートールしてPHPを始める！