はじめてのWeb制作を、一歩ずつ
HTML・CSSを
基礎から学ぼう
HTMLでWebページの構造を作り、CSSで見た目を整える。初心者がコードを試しながら、自分のペースで学べる講座です。
HTML・CSS完全講座について
HTML・CSS完全講座は、Web制作をこれから学ぶ方向けの学習サイトです。HTMLのタグや文書構造から、CSSによる文字装飾・レイアウトまで、基本を順番に学べます。
難しい専門用語はできるだけかみ砕いて説明し、HTML・CSSのコード例と実際の使い方をセットで紹介します。
STEP 1HTMLを学ぶ
見出し・段落・リンクなど、ページの骨組みを理解する
STEP 2CSSを学ぶ
文字・色・余白・レイアウトを調整する
STEP 3コードを試す
サンプルを動かして、自分のページ作りに活かす
学びたい講座を選ぶ
各講座のカテゴリートップは、学習のまとめ・入口となるページです。学習順序や個別記事は、各講座TOPから確認できます。
HTML講座
HTMLとは何か、基本構造、よく使うタグ、フォームなどを基礎から解説します。
- HTMLの基本構造・タグ
- 見出し・文章・画像・リンク
- 表・フォーム・セマンティックHTML
CSS講座
CSSの書き方から文字・フォント、余白、レイアウトまで、コード例を使って学べます。
- CSSの基本・セレクタ・単位
- テキスト・フォントの調整
- ボックスモデル・Flexbox・Grid（順次追加）
初めての方は、この3記事から
どこから始めればよいか迷った場合は、HTML・CSSの役割を知り、学習の流れをつかむところから始めましょう。
- 01
HTMLの基本を知るHTMLとは？初心者向けにわかりやすく解説
- 02
CSSの役割を知るCSSとは？初心者向けに仕組みと役割を解説
- 03
学ぶ順番を確認するHTMLとCSSをどう学ぶ？独学ロードマップ
CSSの文字・フォントを学ぶ
CSSの基礎を学んだら、文字サイズや行間の調整を試してみましょう。実際の表示が変わるため、CSSの働きをつかみやすいテーマです。
CSS テキスト・フォント編
文字サイズ・行間・フォントの基本
学習記事をテーマごとに探せます。
よく読まれている記事
HTML・CSS完全講座で人気の記事をご紹介します。
実践テンプレートも順次充実
学習したHTML・CSSを組み合わせた、ボタン・表・カードなどの実践例も順次追加していく予定です。まずは基礎記事のコードを試すところから始めてみてください。
- 比較表・テーブル
- ボタン・CTA
- カード型レイアウト
お知らせ・更新情報
最新記事や講座の更新状況をまとめています。
運営者について
