CONTENTS
  1. HOME
  2. PHP
  3. PHPで作るお問い合わせフォーム
  4. PHPフォームのCSS作成

PHPフォームのCSS作成

お問い合わせの最初のページ

HTML作成後、見た目の調整CSSを作成します。php-contact/ フォルダの中にstyle.cssを作成します。

style.cssを作成

HTML側に、<link rel="stylesheet" href="style.css">を忘れず入力しておきましょう。CSSコードも手入力で理解を深めましょう。デザインはアレンジOKです

/*ハニーポットを表示しない*/
.hp-wrap {
display:none;
}

/*より安全な非表示CSSの書き方*/
.hp-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/*これは「スクリーンリーダー（音声読み上げ）にも読み取らせない」方法*/


.required {
color: #d00;
font-weight: normal;
margin-left: .25em;
}

.container {
max-width: 720px;
margin: 0 auto;
padding: 2rem 1rem;
}

.form-row {
margin-block: 1rem;
}

label {
display: inline-block;
margin-bottom: .25rem;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
width: 100%;
max-width: 100%;
padding: .6rem;
border: 1px solid #ccc;
border-radius: .5rem;
}

fieldset {
border: 1px solid #ddd;
border-radius: .75rem;
padding: 1rem;
}

legend {
padding: 0 .5rem;
}

.actions {
margin-top: 1.5rem;
text-align: center;
}

.actions button{
    background-color: rgb(69, 178, 255);
    color: #fff;
    padding:.5rem 3rem;
    border-radius: 5px;
    font-size: 1.1rem;
    margin: auto;
}
.note {
font-size: .9rem;
color: #555;
}

margin-block

  • margin-blockは、上下（margin-block-start とmargin- block-end）にマージンを設定します。
.form-row {
  margin-block: 1rem;
}

これは 上下に 1rem の余白を付けるのと同じ意味です。

margin-top と margin-block の違い

  • margin-top / margin-bottom
    → 「上」「下」と固定の方向を指定する従来のプロパティ。
    → ページが横書き前提（英語や日本語の横書き）のときは問題なし。
  • margin-block-start / margin-block-end
    → 論理プロパティ（Logical Properties）と呼ばれる。
    → 「ブロックの先頭」「ブロックの末尾」という考え方で、縦書き・横書きの両方に対応する。

ブラウザの検証ツールでは、内部的に 論理プロパティ（margin-block-start / end）を基準に扱うようになっています。

ラベルと必須マーク

label {
  display: inline-block;
  margin-bottom: .25rem;
}

.required {
  color: #d00;         /* 赤色で強調 */
  font-weight: normal;
  margin-left: .25em;  /* ラベルのすぐ横に表示 */
}
  • 「必須項目」を赤字で表示し、入力の重要性を伝える。
  • label要素は、デフォルトで太字なため内包のspanにfont-weight:normalを入れています。太字がよい時ははずしましょう

入力欄（テキスト・メール・電話・テキストエリア）

属性部分が異なるinput要素に[type=***]をグループセレクタを使ってまとめて指定します。[]を使うことで、要素の属性を使って、CSSのプロパティを指定することができます。

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  width: 100%;
  max-width: 100%;
  padding: .6rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
}

fieldset とは？

フォームの中で 関連する入力項目をひとまとまりにする ための要素です。
例えば「性別」や「お問い合わせ内容の種類」などを、複数のラジオボタンでまとめたい時に使います。

<fieldset>
  <legend>お問い合わせ種別</legend>
  <label><input type="radio" name="type" value="question"> 質問</label>
  <label><input type="radio" name="type" value="request"> 要望</label>
  <label><input type="radio" name="type" value="other"> その他</label>
</fieldset>

こうすると、見た目だけでなく スクリーンリーダー（読み上げソフト）でも「この入力欄は同じグループ」と認識され、アクセシビリティが向上します。

ハニーポット（スパム対策）

.hp-wrap {
display:none
}

見た目には表示されず、スパムボット対策用の入力欄です