【番外編】HTML/CSS/jQuery コーディング練習
Webサイト制作でよく使うHTML、CSS、jQueryのテクニックについて練習します。
一つ一つの練習課題に学習のテーマが決まっているので、集中して学ぶことができます。
-
疑似要素の練習
疑似要素のコーディング練習です。
記事タイトルの横線を、疑似要素（before）を使ってコーディングしてみましょう。 -
positionの練習
positionのコーディング練習です。
テキストエリアと画像をposition（relative、absolute）を使って重ね合わせてみましょう。 -
アコーディオンメニューの練習
jQueryを使ったアコーディオンメニューの練習です。
アコーディオンメニューはCSSだけでもできますが、jQueryを使うと簡単に実装できるので挑戦してみましょう。 -
行数が異なる画像の横並びの練習
行数が異なる画像の横並びの練習です。
左側に大きい画像を1つ配置し、右側に小さい画像を2行3列で配置します。 -
画像を斜めに表示する練習
要素を斜めに表示する練習です。
CSSで画像を斜めに編集してみましょう。 -
ドロップダウンメニューの練習
CSSでドロップダウンメニューを作る練習です。
1列のタイプと4列のタイプの2種類を作ってみましょう。 -
複数画像をホバーで切り替え
jQueryを使用したホバーによる画像切り替えの練習です。サムネイルをホバーした際にメイン画像をサムネイルと同じ画像に切り替えてみましょう。
-
プラグイン「slick」/カルーセルスライダー
プラグイン「slick」を使用してカルーセルスライダーを実装します。
オプションの設定は行わずに、まずはプラグインをそのまま使用してみましょう。 -
プラグイン「slick」／カルーセルスライダー（カスタマイズ）
プラグイン「slick」を使用してカルーセルスライダーを実装します。
オプション設定とCSSを変更してスライダーをカスタマイズしてみましょう。 -
プラグイン「Datepicker」／カレンダー&入力チェック
プラグイン「Datepicker」を使用してカレンダー機能のある入力フォームを作ります。申し込みボタン押下時に必須チェックを行い、未入力の項目があれば項目下にエラーメッセージを表示します。
