草野球ユニのデザイン投票サイトを作ってみた（HTML + CSS + JavaScript+ Googleフォーム）
Ⅰ．きっかけ
- 私の所属する草野球チームでユニフォームのデザインを一新することになったので、HTMLとCSSの勉強をかねて、チームメンバーが好きなデザイン案を選んで投票できるサイトを作ってみました。
Ⅱ．作ったもの
- 以下の３つのページが含まれるWebサイト
- 新ユニフォームのデザイン候補一覧ページ
- 各デザイン候補の詳細ページ
- 投票フォーム
Ⅲ．使用したもの
- Windows10 Home 64bit
- Visual Studio Code
- Googleフォーム
- FC2アカウント
- FileZilla Client
Ⅳ．大まかな流れ
- HTML、CSS、JavaScript、Googleフォームを使って必要なファイルを作る。
- ファイルをFC2ホームページにアップロードする。
Ⅴ．詳細な手順
１．必要なファイルの用意
（１）保存用フォルダ
- （２）以降で作成するファイルを保存するために、好きな場所に適当な名前でフォルダを用意する。（今回はデスクトップに「新ユニフォーム投票サイト」という名前のフォルダを用意しました。）
- フォルダ内に「css」「images」「css」の各フォルダを作成する。
これ以降で上のようなフォルダを作っていく
（２）画像ファイル
- Webサイトで使用する画像をimagesフォルダに保存する。
（３）「デザイン候補一覧ページ」のHTMLファイル
- 以下のコードを書いて「index.html」として保存する。
<!DOCUTYPE html> <html lang="ja"> <head> <!-- 文字化け防止のため、VSCodeの画面右下に表示される文字コード規格もutf-8に揃える。 --> <meta charset="utf-8"> <!-- ブラウザのタブに表示するタイトル --> <title>新ユニフォーム投票サイト</title> <!-- レスポンシブ対応 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSSファイルの読み込み --> <link rel="stylesheet" href="css/common.css"> </head> <body> <header> <!-- Webページ上部のナビゲーション(メニュー)部分 --> <nav> <ul> <li><a href="index.html">候補一覧</a></li> <li><a href="vote.html">投票フォーム</a></li> </ul> </nav> </header> <main> <div class="row"> <h1>新ユニフォームデザイン候補一覧</h1> <p>下のデザインをクリックすると詳細が見られます。</p> </div> <div class="row"> <!-- 画像。クリックすると別ページに移動する。 --> <div class="col quarter frame"> No１．赤×黒デザイン<a href="option01.html"><img src="images/option01_front.png" alt="赤×黒ユニフォーム"></a> </div> <div class="col quarter frame"> No２．紺×赤デザイン<a href="option02.html"><img src="images/option02_front.png" alt="紺×赤ユニフォーム"></a> </div> <div class="col quarter frame"> No３．白×青デザイン<a href="option03.html"><img src="images/option03_front.png" alt="白×青ユニフォーム"></a> </div> </div> <div class="row"> <div class="col quarter frame"> No４．青×赤デザイン<a href="option04.html"><img src="images/option04_front.png" alt="青×赤ユニフォーム"></a> </div> <div class="col quarter frame"> No５．紺×白デザイン<a href="option05.html"><img src="images/option05_front.png" alt="紺×白ユニフォーム"></a> </div> </div> <div class="clear"> <div class="votearea"> <!-- 投票フォームに誘導する --> <a class="button" href="vote.html"> 投票フォームへ進む </a> </div> </div> </main> <footer> <p>Copyright © shiisuke</p> </footer> </body> </html>
（４）「各デザイン候補の詳細ページ」のHTMLファイル
- 以下のコードを書いて「option01.html」として保存する。
- 同様のファイルを必要な数だけ（今回は5つ）作る。名前は「02」「03」という形で変える。
<!DOCUTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>No1.赤×黒</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 画像をクリックで拡大表示するためのコード --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <link rel="stylesheet" href="css/common.css"> <!-- 画像をクリックで拡大表示するためのコード --> <link rel="stylesheet" href="css/lightbox.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html">候補一覧</a></li> <li><a href="vote.html">投票フォーム</a></li> </ul> </nav> </header> <main> <div class="row"> <div> <h1>No１．赤×黒ユニフォーム</h1> <p>広島カープ風のデザインです。</p> </div> <div class="col quarter frame"> <a href="images/option01_front.png" data-lightbox="detail"> <img src="images/option01_front.png" alt="赤×黒ユニフォーム_前"> </a> </div> <div class="col quarter frame"> <a href="images/option01_back.png" data-lightbox="detail"> <img src="images/option01_back.png" alt="赤×黒ユニフォーム_後"> </a> </div> <div class="col quarter frame"> <a href="images/option01_cap.png" data-lightbox="detail"> <img src="images/option01_cap.png" alt="赤×黒ユニフォーム_帽子"> </a> </div> <div class="clear"> <div class="votearea"> <p> <span class="price">16,200</span>円（ユニフォーム上下＋帽子） </p> <!-- デザイン候補一覧ページに誘導する --> <a class="button" href="index.html"> 一覧に戻る </a> </div> </div> </div> </main> <footer> <p>Copyright © shiisuke</p> </footer> <!-- 画像をクリックで拡大表示するためのコード --> <script src="js/lightbox.js"></script> </body> </html>
（５）投票フォームのHTMLファイル
<!DOCUTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>投票フォーム</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/common.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html">候補一覧</a></li> <li><a href="vote.html">投票フォーム</a></li> </ul> </nav> </header> <main> <!-- Googleフォームのコード --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScyGJfSIL9vMHbsIxsxWagmbfq2En6Ib7vrbvWWfLdoCU-PfA/viewform?embedded=true" width="640" height="552" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe> </main> <footer> <p>Copyright © shiisuke</p> </footer> </body> </html>
（６）すべてのWebページの装飾をするCSSファイル
@charset "UTF-8"; /* 基本の設定 */ body { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; font-size: 16px; line-height: 1.7; margin: 0; padding: 0; text-align: center; } section,article, aside, nav, header, main, footer { display: block; } h1,h2,h3,h4 { font-family: "Montserrat",sans-serif; font-weight: normal; } ul, li { margin: 0; padding: 0; list-style: none; } a { text-decoration: none;} img { max-width: 100%; height: auto; } /* ヘッダー */ header { background:#a1bbd0 ; width: 100%; padding: 1em 0 2em; position: relative; } header nav { padding: 10px 0; width: 100%; position: absolute; top:0; } header nav ul{ margin: auto; } header nav ul li{ display: inline-block; } header nav ul li a{ color:#0000EE; font-family: "Montserrat",sans-serif; font-size: 16px; padding: 0 1em; } /* メインエリア */ main { width: 100%; max-width: 930px; margin: 0 auto; padding: 10px 0 10px; color: #114046; } main h1 { color: #df6e21; } /* フッター */ footer { background-color: #687672; color: #dee9eb; font-family: "Montserrat",sans-serif; width: 100%; padding: 1em 0; } .row { max-width: 930px; margin: 0 auto 25px; } .row::after { content: ""; clear: both; display: block; } .col { float: left; margin-left: 4%; } .col:first-child {margin-left: 0;} .harf {width: 40%;} .quarter {width: 25%;} .clear { clear: both; } .button { background-color: #2096ba; border-bottom: medium none; border-radius: 0.5em; color: #fff; cursor: pointer; display: inline-block; line-height: 1.7; margin: 20 0 2em; padding: .6em 2em; position: relative; text-decoration: none; } main a.button { color: #fff; } main a.button:hover, main a.button:active { text-decoration: none; } .votearea { border-top: 4px dotted #CCC; } /* 画像の背景フレーム */ .frame { background-color:#f4e7d7; border: 2px solid #f3d9ba; padding: 10px 8px 0; margin: 14px 14px 20px; } .price { color:#d73a31; font-size:2em; } /* レスポンシブ対応 */ @media screen and (max-width: 599px) { .col { float: none; margin-left: 0; width: auto; } .row { padding: 0 8px; } }
（７）画像の拡大表示時の装飾をするCSSファイル
- https://github.com/lokesh/lightbox2/releases から「Source code(zip)」をダウンロードして、適当な場所（デスクトップなど）にフォルダを解凍する。
- フォルダ内の「src > css」から「lightbox.css」ファイルをコピーし、保存用のcssフォルダにペーストする。
（８）画像の拡大表示をするjsファイル
- （７）で解凍したフォルダ内の「src > js」から「lightbox.js」ファイルをコピーし、保存用のjsフォルダにペーストする。
（９）画像の拡大表示で使う画像ファイル
- （７）で解凍したフォルダ内の「src > images」から「close.png」「loading.gif」「next.png」「prev.png」の各ファイルをコピーし、保存用のimagesフォルダにペーストする。
２．ファイルのアップロード
（１）FC2ホームページに登録
- https://fc2.com/ でアカウントを取得する。
- http://web.fc2.com/ の「特徴・機能一覧」から「今すぐ無料で始める」を選び、好きなアカウント名で登録する。
- 登録完了後、「設定 > FTP設定」の画面で、「FTP接続ロック」は「ロックしない」を選択し、その下の「ホスト名（ホストアドレス）」「ユーザー名」「現在のFTPパスワード」はメモしておく。
（２）FileZilla Clientの取得
- https://github.com/lokesh/lightbox2/releases の中段にある「FileZilla_Client」の中から、自分のPCの環境にあったものを選んでダウンロードする。
（３）FileZilla Client と FC2ホームページ を接続する
- FileZilla Clientを開き、「ファイル > サイトマネージャー > 新しいサイト」をクリックする。
- ファイル名を好きな名前に変更する。
- 「ログオンの種類」は「通常」を選択し、「ホスト」「ユーザ」「パスワード」は（１）でメモした内容を入力する。
- 「接続」をクリックする。
（４）ファイルをアップロードする
- 今回作成した保存用フォルダを FileZilla Client の左側のエリアで開く。
- フォルダの中身を全て選択して、右側のエリアにドラック＆ドロップする。
３．Webサイトへのアクセス
- ２（１）でメモしたホスト名のWebサイトにアクセスし、イメージ通りのサイトが出来上がっていることを確認する。
＜デザイン候補一覧ページ＞
＜デザイン候補詳細ページ01＞
＜投票フォーム＞
Ⅵ．感想
- 最初は「単純なHTMLのサイトを作れればいいや」という気持ちで始めましたが、好きなデザインや機能を追加できるのが楽しくて、最終的に凝ったものが出来上がりました(笑)
- 私はもともと「HTML／CSSとは」「タグの見方」といった基本も理解できていませんでしたが、湊川あいさんの本のおかげでほとんど詰まることなく進められました(^^)
- 今後はPHPなども触っていきたいと思います！
Ⅶ．参考書籍
- 湊川あい氏『わかばちゃんと学ぶWebサイト制作の基本』（2016年、シーアンドアール研究所）
