はじめての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)の使い方