はじめてのWebデザイン『HTML・CSS』入門
3-1. CSSの記述場所と文法について
- HTML・CSS
- Webデザイン
これまでのレッスンでは文書全体の構造をHTMLを使ってマークアップしてきました。続いてCSSを使って、文章のレイアウトを整えたり装飾を加えていきます。まずはCSSを記述するファイルを作成し、文法について知りましょう。
公開日：2019/06/17最終更新日：2019/06/20
理解度チェック
会員登録して
学習記録をつけよう！
前のレッスン
はじめてのWebデザイン『HTML・CSS』入門
1. HTMLとCSSを学ぶ準備
【無料公開中】 1-1. Webサイトの仕組みとHTML・CSSについて- 【無料公開中】 1-2. Visual Studio Code のインストールと初期設定
- 【無料公開中】 1-3. Google Chromeをインストールしよう
2. HTMLの基礎知識
- 2-1. HTMLでHello,World!を表示しよう
- 2-2. 文書のメタデータのタグ（title・meta・link・style）
- 2-3. 文章の見出しと段落のタグ（h1〜h6・p）
- 2-4. 文章内で使うタグ（strong・span・br）
- 2-5. 画像を表示するタグ（img）
- 2-6. ハイパーリンクを設定するタグ（a）
- 2-7. レイアウトを区切るタグ（header・main・aside・footer）
- 2-8. コンテンツを区切るタグ（article・section）
- 2-9. ナビゲーションであることを示すタグ（nav）
- 2-10. 箇条書きリスト（ul・li）・番号リスト（ol）・説明リスト（dl・dt・dd）のタグ
- 2-11. 表組みレイアウトを示すタグ（table・tr・td）
- 2-12. 囲った部分をブロックレベル要素でグループ化するタグ（div）
- 2-13. HTML5のコンテンツモデル
3. CSSの基礎知識
- 3-1. CSSの記述場所と文法について
- 3-2. CSSで文字の色を変更する
- 3-3. 文字を太くする（font-weight）・斜めにする（font-style）・下線をつける（text-decoration）
- 3-4. 文字の大きさを変更する（font-size）
- 3-5. 文字揃えと行の高さを指定する（text-align・line-height）
- 3-6. 背景色と背景画像を設定する（background）
- 3-7. 横幅と高さを指定する（width・height）
- 3-8. 要素の表示形式を変更する（display）
- 3-9. 要素に余白を空ける（margin・padding）
- 3-10. 要素に枠線をつける（boder）
- 3-11. 指定した要素を回り込みさせる（float・clear）
- 3-12. 要素を自由に配置する（position）
- 3-13. コーナーに角丸を指定する（border-radius）
- 3-14. 要素や文字に影をつける（box-shadow・text-shadow）
- 3-15. 疑似要素（before・after）の使い方
