会員の方はこちら

はじめてのWebデザイン『HTML・CSS』入門

Webサイトは「HTML」という文章の構造を組み立てるマークアップ言語と、装飾やレイアウトを指定するための「CSS」という言語で作られています。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）の使い方

※現在このカリキュラムは制作中です。続きのレッスンの公開まで今しばらくお待ちください。