本選考のWebテストに必要な学習内容​

理解度チェック

HTML&CSS 学習における理解度チェック

HTML&CSSコーディング課題

はじめに

プレワークでは、簡易的なWebページ (Googleのトップページを模したもの) を実際にコーディングして、入校後のカリキュラムに備えましょう。
※プレワーク課題のコードレビュー、質問の受付は行いません。正解のコードも提示されません。 予めご了承ください。

今回の目標

・Webページの構造がどうなっているか
・デザインの指示通りに、整って配置されているか
・要素に対して、どんなスタイル設定がされているか

を理解することです。
そのため、「リンクがうまく飛ばない」「検索ボックスが動かない」などの心配は必要はありません。HTML CSSについてステップを踏みながら理解していきましょう。

カリキュラムを始める前に知ってると役立つこと

これらのスキルはwebページを作成するときに役立ちます。
ご自身で調べて実践、もしくは方法を知ってるだけでも学習の進み方が変わるので覚えておきましょう。
1. 要素を配置する際のcssプロパティの種類
2. スクロールしても要素を一定の場所に固定する方法
3. 要素を中央揃えにする方法
4. HTMLでCSSを読み込む3つの方法 5. classとid、それぞれに対するセレクタの書き方
6. 基本的なフォームの作り方(送信できない状態で大丈夫です)

初級課題

下記URLのデザインをコーディングしてみましょう。
https://xd.adobe.com/view/c948b7a5-f6bb-436a-73e3-7c493502821b-bf79/
HTML / CSS初級のフォルダを作成し、その中に ” index.html ”ファイルを作成します。
XDの共有リンクの使い方下記URLの”デザインスペックからアセットをダウンロードする”の項目をみて指定のロゴをダウンロードしてください。 https://helpx.adobe.com/jp/xd/help/extract-assets-from-design-specs.html#Downloadassetsfromdesignspecs

アドバイス

・完璧主義になりすぎないことが大事です。
今回の課題ではHTMLとCSSの基礎の基礎を理解することが目的です。下記の再現は不要です。
・ピクセル単位で合わせる
・予測検索のドロップダウンメニュー
・検索ボタンを押した後に別ページに遷移
・ホバーの細かい指定
・CSSが上手く効かない場合はCSSプロパティを見直しましょう。
Firefoxを使用して-webkit-appearance: none; 、もしくは-moz-appearanceが効いてないか確認しましょう。

チャレンジ課題 ①

初級課題が終わったら、ステップアップした課題に取り組みましょう。
次は検索結果ページを再現しましょう。
https://xd.adobe.com/view/86313db6-7cb7-43f0-7245-1f2c8d4ad212-f000/

チャレンジ課題 ②

次は会員登録ページを再現しましょう。
https://xd.adobe.com/view/ae06e363-6936-4b61-8d24-51afb6028582-fb55/