プログラミング学習で初めて学習する技術にHTML/CSSを選ぶ人は多いかと思います。この技術はサイトを模写やオリジナルサイト制が学習の集大成になる場合が多いですが、いざ実践しようとすると多くの人が壁にぶつかります。
この資料は、他の教材でHTML/CSSの基礎的な知識を学んだ方に向けて、サイト模写のサポートをする資料になります。
「正解のコード」を模写するのではなく、「手順やヒント」を参考にしながら自分自身で考えながらサイト模写ができるようになるので、他の教材でインプットしたHTML/CSSの基礎的な知識を、アウトプットをしながら定着化できたり、他のサイト模写やオリジナルアプリ制作を効率化できたりといったメリットがあります。
以下のサイトを模写できるようになります。 Https://
技術サポートシートの内、HTML / CSSの実装課題・スキル・選考チェックはほとんど網羅することができます。具体的には以下を実践できます。
▼実装課題 ヘッダーフッター / コピーライト / ハンバーガーメニュー / レスポンシブ対応（スマホ&タブレット)/フォーム設置（入力→確認→送信完了）/ HeadのSEO対応
▼スキル
HTML（レベル1〜2）/ CSS（レベル1〜2）
▼選考チェック（技術サポートシート）
・内容：自己紹介 / 実績/技術・スキル / 写真 / GitHubやSNSリンク/ 職歴
・レスポンシブ対応：タブレット / スマートフォン
・デザイン：シンプルでスタイリッシュなデザイン
・部品：お問い合わせフォーム
・アニメーション
- 事前準備編（1時間）
1-1. 作業環境の準備
- 初級編（10H）
2-1.デスクトップ版の画面パーツの作成
- 中級編（10H)
3-1. レスポンシブ対応・ハンバーガーメニューの作成
- 上級編（10H）
4-1.モーダル・SEO対応・Netlifyで公開
- 章ごとのゴールを確認し、自分の頭で考えて実装してみてください。
- 実装できなかった場合は、手順や参考記事を手掛かりに進めましょう。
- 上記を実践しても上手く進められない場合は、すぐに質問してください。
- 章が終わったら、スキルチェックシートに学んだことをメモしたり、チェックをつけましょう。
あれ、CSSが効かないなと思ったらに以下を確認してください。
▼ファイルが読み込まれているかChromeDeveloperToolsのConsoleで確認 ・CSSを読み込んでいない ・CSS参照パスが間違っていないか
▼HTML文法エラーチェック項目 ・タグの閉じ忘れがないか ・タグの入れ子ミスがないか
▼CSS文法エラーチェック項目 ・セミコロン忘れがないか ・{}締め忘れがないか ・コロンとセミコロン間違いがないか ・id,classが数字から始まっていないか
▼チェック方法 ・VSCodeのESLint問題検出（自動でわかるのでおすすめ） ・ChromeDeveloperToolsのConsole ・Another HTML-lint: http://www.htmllint.net/html-lint/htmllint.html# ・W3C CSS Validation Service:https://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_input
質問する際は#questionチャンネルにてお願いいたします。
▼フォーマット（伊藤さんと同じです） ・実現したいこと ・エラー内容・問題点 ・ソースコード ・うまくいっている部分 ・試したことや調べたこと ・補足情報 ・GitURL
どうやって質問すれば良いかわからず時間がかかってしまうことはなるべく避けましょう！ お気軽にご質問ください！
・コードは最適ではない ・完璧ではない
・1日最低1質問 ・活動報告チャンネル