学習内容は以下の予定となっております。
- CSSの基本概念と基本構文
- CSSとは何か、基本概念を説明
- セレクタ、プロパティ、値について説明
- CSSをHTMLに適用する方法 (内部スタイルシート、外部スタイルシート)
- シンプルな例を提示
- テキストとフォントのスタイル
- フォントサイズ、フォントファミリー、フォントスタイル、フォントウェイトの説明
- テキスト装飾 (下線、取り消し線、上線)、文字間隔、行間隔の説明
- 演習問題
- 色と背景
- 色の指定方法 (色名、RGB、HEX、HSL)
- 背景色、背景画像の設定
- 演習問題
- ボックスモデルとレイアウト
- ボックスモデルの説明 (マージン、ボーダー、パディング、コンテンツ)
- 表示形式 (ブロックレベル要素、インライン要素、インラインブロック要素)
- ポジショニング (static、relative、absolute、fixed、sticky)
- 演習問題
- レスポンシブデザイン
- レスポンシブデザインの概念説明
- メディアクエリの使用方法
- フレックスボックスとグリッドレイアウトについて簡単な説明
- 演習問題
CSSの基本概念と基本構文を学ぼう
CSSとは何か？ CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトをコントロールするための言語です。HTMLでページの構造を作成した後...
続きを読むレスポンシブデザイン入門
レスポンシブデザイン入門 このページでは、レスポンシブデザインについて学んでいきます。レスポンシブデザインは、ウェブページが様々なデバイス（スマートフォン、タブレット、デスクトッ...
続きを読むレスポンシブデザインの実践とブレイクポイント
ブレイクポイントの設定 ブレイクポイントは、デバイスの画面サイズに応じてデザインやレイアウトを変更する際の閾値です。メディアクエリを用いて、ブレイクポイントで適切なスタイルを適用...
続きを読むグリッドレイアウトを活用したレスポンシブデザイン
グリッドレイアウトを活用したレスポンシブデザイン この章では、CSS Gridを使用して、レスポンシブデザインを実現する方法について学びます。CSS Gridは、ウェブページのレ...
続きを読むフレックスボックスを使ったレスポンシブデザイン
フレックスボックスを使ったレスポンシブデザイン このページでは、フレックスボックスを使用したレスポンシブデザインについて学びます。フレックスボックスは、要...
続きを読む