CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでメールマガジン（ニュースレター）登録フォームを作成する方法

メールマガジン（ニュースレター）の登録フォームは、CSSを活用することで見栄えが良く使いやすいデザインに仕上げることができます。ここでは、CSSを使ってメールマガジン登録フォームを実装する具体的なコード例を紹介します。

コード例

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;}
h1{
    text-align: center;
}
form {
    border: 3px solid #f1f1f1;
    padding: 20px;
    background-color: #f3f3f3;
    max-width: 800px;
    margin:auto;
}
input[type=text], input[type=submit] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 30px;
}
input[type=checkbox] {
    margin-top: 16px;
}
input[type=submit] {
    background-color: rgb(236, 255, 61);
    color: rgb(0, 0, 0);
    border: none;
    font-size: 25px;
    font-weight: bolder;
}
input[type=submit]:hover {
    background-color: rgb(255, 238, 0);
}
</style>
<body>
<h1>Email Newsletter Example</h1>
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
<div>
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
</label>
<input type="submit" value="Subscribe">
</div>
</form>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSでメールマガジン（ニュースレター）登録フォームを作成する方法

実装のポイント

  • フォーム全体のデザイン： 薄いグレーの背景色（#f3f3f3）と枠線を設定し、max-width と margin: auto; を組み合わせることで、画面幅に応じて中央に配置されます。
  • 入力欄とボタンの統一感： テキスト入力欄と送信ボタンに width: 100% を指定して横幅を揃え、box-sizing: border-box を使うことで padding を含めたサイズ計算になり、レイアウトが崩れません。
  • ホバー効果： 送信ボタンに :hover 疑似クラスを適用し、マウスオーバー時に背景色が変化するインタラクティブな演出を加えています。
  • 必須項目の設定： 名前とメールアドレスの入力欄に required 属性を付けることで、未入力のまま送信できないようにバリデーションを行っています。

なお、実際に配信するHTMLメールそのものは、GmailやOutlookなど多くのメールクライアントが<style>タグを正しく解釈しないため、インラインCSSやテーブルレイアウトを使うのが一般的です。本記事のコードは、Webページ上に設置する「メールマガジン登録フォーム」の作成例としてご活用ください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>