おためし受講中

PCサイトコーディング -お問い合わせフォームの作成-

このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。

「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。しかしながら、基礎があやふやだと応用がききません。まずは基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。

第6回はお問い合わせフォームを作成します。入力しやすいお問い合わせフォームのためのHTMLとCSSの書き方を覚えましょう。

授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。

この授業の先生

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    00:56  (00:13 ~ )
    授業のアジェンダ
    01:06  (01:09 ~ )
    サンプルデータの説明
    01:06  (02:15 ~ )
    フォームのHTMLの書き方
    00:13  (03:21 ~ )
    入力欄の種類
    03:22  (03:34 ~ )
    dlでマークアップする
    00:53  (06:56 ~ )
    問題#01 なぜ、tableタグではなく、dlタグを使うと良いのでしょうか?
    04:47  (07:49 ~ )
    答え#01
    03:36  (12:36 ~ )
    input要素の書き方
    08:52  (16:12 ~ )
    使いやすいお問い合わせフォームにするためのCSS
    00:14  (25:04 ~ )
    focus, error
    00:53  (25:18 ~ )
    selectのカスタマイズ
    01:45  (26:11 ~ )
    必須項目
    01:22  (27:56 ~ )
    ボタン
    00:15  (29:18 ~ )
    問題#02 最近では、リセットボタンを配置しないお問い合わせページが主流です。それはなぜでしょうか?
    02:50  (29:33 ~ )
    答え#02
    01:18  (32:23 ~ )
    お問い合わせページにはおもてなし心をドボドボ注ぎ込もう!
    00:30  (33:41 ~ )
    広告とか入れない
    00:43  (34:11 ~ )
    不必要な項目を作らない
    01:19  (34:54 ~ )
    「フリガナ」でなく「ふりがな」にしよう
    01:37  (36:13 ~ )
    住所欄は半角/全角OKに
    02:14  (37:50 ~ )
    問題#03 クレジットカードや生命保険の加入申し込みページは信じられないほど項目がたくさんあります。この授業で学んだこととは真逆のことをやっているのに、なぜ利用が伸びているのでしょうか。
    03:08  (40:04 ~ )
    答え#03
    03:52  (43:12 ~ )
    状況に応じた使い方をしよう
    00:49  (47:04 ~ )
    まとめ
    01:26  (47:53 ~ )
    全6回で学んだことまとめ
    02:55  (49:19 ~ )
    【後半】質疑応答
    Q:フォームのメソッドですが、昔はCGI で作成されるのが、主流だったと思いますが、今はphpで作成するのが主流でしょうか?Webデザイナーでもデータベースを自作出来た方がよいでしょうか?
    02:00  (52:37 ~ )
    Q:セキュリティは何処まで対応するのでしょうか? 安心して、商用や個人サイトでも使えるレベルでしょうか。 組み込むセキュリティの種類を教えてください。
    02:04  (54:37 ~ )
    Q:モバイルフレンドリーを考えた時に、フォームでの電話番号や郵便番号の入力欄は、どのようにするのが一般的ですか?また、Googleフォームなどをカスタマイズして利用してる方は多いですか?
    01:56  (56:41 ~ )
    先生からのメッセージ
    01:34  (58:37 ~ )
    お知らせ
      (1:00:11 ~ )