HTML5 CSS3基礎＆レスポンシブWebテンプレートを作成！

国旗課程運営のノウハウを込めた！
実務ですぐに利用できるレスポンシブWebテンプレートの作成

講義を始める前に

この講義で
何を学べますか？

このレッスンは、Web標準に初めて触れる人のために作成されました。 HTML / CSSの非常に簡単な基礎から、HTMLインフォメーションデザインとCSSレイアウトを作成し、最終的にレスポンシブWebテンプレートを作成することを目指しています。
実務ですぐに活用できますが、ノウハウをベースにレスポンシブなWebテンプレートの制作過程を盛り込みたいと思います。 HTMLの基礎、CSSの使い方、実務で主に使われるCSS Layoutの作り方、Flexの使い方まで順番に習得し、Webパブリッシャーに向かって一歩ずつ近づきましょう。

この講義
特徴は何ですか？

基本的な内容から実務から必要な深化学習まで。各パートの実習問題と講義ノートを確認してみてください！
セクションの最後にはセクションごとの練習問題があります。問題を最初に解決して結果を確認した後、次のセクションの講義を聞くことをお勧めします。
学生が理解しやすく簡単に勉強できるように、講義ノートをPDFとして提供しています。オン・オフラインで授業を進め、体を感じたノウハウを盛り込んで発展させたことで、皆さんの学習に大いに役立つでしょう。

_{オン・オフライン教育の定数が込められた講義ノート}

この講義は
誰に必要ですか？

Webコーディングに入門したい方、コーディングを全く知らない状態でWebパブリッシャーへの転職を希望される方、UIデザイン時に情報設計が必要な方、パブリッシングを学ばなければならないデザイナー…。多様な方に役立つために体系的で不可欠な内容だけを選んで作りました。一人で勉強するのがとても難しく、膨大な量で恐ろしいものを食べたら助けてください！
また、パブリッシングを習得するデザイナーやWebパブリッシャーをご希望の方は、講義を通じて作成するテンプレートをポートフォリオの作成に利用することができます。

---

この講義はこうして行われます

_{part1. html/css 基礎
html基礎文法とvscodeを使用したドキュメントの作成タグの特性について学びます。}

_{part2. css基礎
cssの基礎文法と使い方、様々なセレクタについて勉強します。}

_{part3。 html/semantic/list/ユーザー入力 tag/grouping
htmlで主によく使われるtagとsemantic /list /ユーザー入力tag / groupingのさまざまなtagと使い方について学びます。}

_{part4。 font/unit
CSSの首都クレスと段落ソート、フォント、単位について勉強します。}

_{part5。 css/background/display/border/boxmodel
CSSの核心の一つとして、ディスプレイとボックスモデルについて集中的に勉強します。}

_{part6.css/flex/position/transition/animation/transform
cssのレイアウトに主によく使われるflexとpositionそしてtransition/animation/transformについて勉強します}

_{part7。 css / media query /レスポンシブWeb
レスポンシブなWeb作業のためのメディアクエリについて学びます。}

包括的な例を通して学ぶ
レスポンシブウェブ作成プロセス

知識共有者と作るシアンの仕事を確認してください！一汗一汗一緒に作りましょう！
このレッスンでは、シアン、つまりデザイン作業を作成するプロセスは含まれていません。参考にしてください。

_{包括的な例を見る}

_{デスクトップ画面}

_{タブレット画面}

_navigation

_responsive

_{モバイル画面}

---

予想される質問Q&A

---