HTMLの次はCSS! CSSで目を引くウェブページを作りましょう ⭐
Web文書の完成度を高めるCSS 🎨 CSSはウェブ文書の見た目を担当します。HTML要素から対象を選択し、選択した対象の色、背景、位置、アニメーションなどを設定することで、見栄えが良く使い勝手の良いウェブ文書を作ることができます。
今回の講義は「コーディングは初めてなので with ウェブパブリッシング - HTML基礎」に続く講義で、HTMLの学習が完了していることを前提に、ウェブページのデザイン設定に必要な必須テクニック を学習します。
CSSはHTML要素からスタイルの対象を正確に選択することが優先です。今回の講義ではCSSセレクター を確実に学習できます。レスポンシブの基礎 をしっかりと習得し、様々な幅のデバイスで最適化されて表示されるウェブページを実装します。transitionおよびanimation、transform属性を活用してアニメーションを実装する方法 まで学んでみましょう。
講義を受けた後、皆さんはCSSセレクタを通じて目的の要素を正確に選択し、選択した要素のスタイルを自由自在に設定できるようになります!
本講義は、領進ドットコムの書籍『コーディングは初めてなので with ウェブパブリッシング』の著者が、書籍の内容に基づいて講義を行います。書籍と一緒にご覧いただくことで、より学習に役立つはずです。 từ Youngjin.com dựa trên nội dung của sách. Việc kết hợp học cùng với sách sẽ giúp ích cho bạn nhiều hơn trong quá trình học tập. , based on the content of the book. It will be even more helpful for your learning if you follow along with the book. 「コーディングは初めてなので with ウェブパブリッシング - HTML基礎」講座を受講した後、本講座を引き続き学習してください。 補習が必要な場合は、著者のYouTubeチャンネル で追加の講義をご覧ください。 このような方におすすめです 🙋♀️
HTMLの基礎はあるけれど CSSの基礎が不足している方
レスポンシブ、アニメーションの実装が 難しい方
Flexを活用した柔軟な レイアウトを学びたい方
講義の特徴 ✨
CSSスタイル設定に必要な属性 を 一つずつ学習します!
数年間の講義経歴をもとに分かりやすく解説 いたします!
シンプルな例題で基本を確実に 固めます!!
Flexbox による 効率的なレイアウトを学びます!
こんなことを学びます 📚 1) CSSセレクタを確実に学習します。CSSの始まりは、対象を正確に選択することから始まります。
2) 書体関連のスタイルを学習します。
3) レイアウトに関する必須プロパティを学習します。
4) 背景関連の属性をすべて学習します。
5) Flexibleレイアウトの核心であるflexを学習し、より多様なレイアウトを簡単に実装します。
6) アニメーションの基礎を学習します。
7) レスポンシブの基礎を確実に学習し、実習します。
デスクトップ画面
タブレット画面
モバイル画面
8) 前の講義で作成したHTMLウェブページを、CSSを活用して実装します。
よくある質問 💬
Q1. HTMLを全く知らないのですが、この講義を受講しても大丈夫でしょうか?
はい、大丈夫です。 この講義はCSSの学習に必要な最小限のHTML構造だけを簡単に押さえて 、すぐにスタイリングへと進みます。 HTMLの文法を深く知らなくても、タグの構造を理解できるレベル であれば、十分に付いていくことができます。
Q2. CSSを学べば、実際にどのようなものが作れるようになりますか?
この講義を受講すると、次のような作業が可能になります。
文字・色・余白・整列などの基本スタイリング カードUI、ボタン、レイアウト構成 簡単なレスポンシブ画面構成の基礎理解
つまり、デザインされた画面をウェブページとして「見えるようにする段階」まで 到達することができます。
Q3. CSSは覚えることが多そうに見えますが、初心者でも大丈夫でしょうか?
この講義は暗記中心ではなく理解中心 で構成されています。 プロパティをむやみに羅列するのではなく、 なぜこのプロパティが必要なのか いつ使用するのか 似たようなプロパティをどう区別するのかを基準に説明します。
したがって、初めて学ぶ方も無理なく学習 していただけます。
add_shortcode('course','335725','list')
add_shortcode('course','335725','list')
次のステップに挑戦してみてください。 Figma参照 - レスポンシブショッピングモールウェブサイト制作完全ガイド
https://inf.run/Gx3Ty
モバイルウェブ制作入門:FigmaデザインをJavaScriptで完璧に実装する
https://inf.run/uBnGj
講師紹介 ✒️ こんにちは。rock's easyweb YouTubeチャンネル運営者のキム・ドンジュ講師です。
主な著書
ウェブデザイン&ウェブパブリッシングのためのFigma完全活用書 - ビージェイパブリック出版社
コーディングは初めてなので with ウェブパブリッシング - ヨンジン.com お問い合わせ オフライン講義の情報や、追加動画などを確認いただけます。
コミュニケーション窓口(アンケート、1:1オープンチャット) ✒️ 受講生の皆様はお知らせ 欄で紹介されているGoogleフォーム と1:1オープンチャット を通じて、いつでも意見や質問をしていただけます。