iSARA模写 第6回です。
今回でフッターまで作成です！
（トップまで戻るボタンの実装などは次回以降に続く・・・）
前回はこちら↓
今回はこちらを作成します↓
今回のポイントは、
・フォーム(資料請求部分)の作成
・アコーディオン(よくある質問部分)の作成
いつもの手順で
①レイアウトの確認
②HTMLの書き出し
③CSSで整えます。
上から順にHTML要素を作っていく。
①レイアウトの確認
②HTMLを書く
上から順にHTML要素を作っていきます。
pタグ内の文書は、原文をコピペします。
<div>はレイアウトを確認しつつ作っておかないと、
後で配置が難しくなります。
今回は新しく<form>タグが登場。
フォーム部分については、下記コードで表現できます。
<form action="">
<input type="text" placeholder="姓">
<input type="text" placeholder="名">
<input type="email" name="" id="" placeholder="メールアドレス">
<textarea placeholder="質問などはこちら(空欄OK!)"></textarea>
<input id="submit" type="submit">
</form>あとは少し丸い角や入力部分の箱の大きさをCSSで整えます。
実際にフォームタグに入力された情報を受け取れるようになるには別の勉強が必要になります。
③CSSで見た目を整える
今回ポイントの、
アコーディオンの実装は
jQueryを使用します。
私は、この時はほぼ知識がなかったので、
(ドットインストールで１回くらいやった気がするけど、
全く身についてない状況)
こちらの記事を参考にさせてもらいました！
最後に、フッターとアコーディオンが重なる問題
(アコーディオンを開くとフッターに食い込む)があったのですが、
私の場合は、
</div>の終了タグがきちんと閉じられていなかった事が原因でした。
コードが長くなってくると、終了タグがわからなくなりがちなので
コメントなどで終了タグを確認しながら進めるのがいいと思います。
ここまでで、
見た目はできました。
あとは、
・ヘッダーの固定の実装や
・トップまで戻るボタンの実装
など次回に続きます。
