ちょっとしたページ作成時に知っていると便利！HTMLやCSSの基本が学べる無料サイト5選

いざというときにも役立つ！HTMLやCSSの基本が学べるサイトは知っていて損はありません。

ユーザーが直接見たり操作したりするフロントエンド。サイトを検索結果の上位に表示させたり、自分のイメージを形にしたりするためには、HTML（HyperText Markup Language）やCSS（Cascading Style Sheets）などを使って検索ロボットが理解しやすいよう正しくコーディングする必要があります。

HTMLやCSSに関する参考書を利用するのも良いですが、手軽に基本や実践的なコードの書き方を学びたい方にはWebサイトがおすすめです。そこで、ここでは手軽にHTMLやCSSの基本が学べる無料のサイトを5つご紹介します。自分にあった学習方法でHTMLやCSSの理解を深め、サイト構築や運用にいかしましょう。

コンテンツ

1 HTMLとCSSを学習する理由
2 集中して学習しやすい！「ドットインストール」
3 実践的に慣れていける「CSSデザインサンプル」
4 テンポよく学習できる「CodePrep（コードプレップ）」
5 サッと調べて実用できる「HTMLクイックリファレンス」
6 イラスト中心で直感的に学びやすい「Progate」
7 まとめ：無料の学習サイトを賢く活用してHTMLやCSSを学ぼう

HTMLとCSSを学習する理由

HTMLはサイト制作のために開発された言語で基礎・土台といわれています。ソースコードの維持や管理、検索エンジンがサイトの構造を理解できるように定義するためのもので、SEO対策のためにも知っておきたい言語です。

CSSは装飾をするための言語で、指定したHTMLタグのカラー、サイズ、レイアウトの「表示」や印刷するときの「出力」、音声読み上げの際の「再生」などのスタイルを指定することができます。

つまり、HTMLやCSSのいずれもサイトの見た目やユーザーの行動を左右する重要な言語といえます。アフィリエイトサイトを効率的かつ効果的に構築・運用するためにも、以下の5つの無料サイトを賢く利用してHTMLとCSSの基本を学びましょう。

集中して学習しやすい！「ドットインストール」

動画によるプログラミング学習ソフトです。動画の長さは3分。短時間の動画なので集中して学習しやすく、初心者向けの内容がメインのため無理なく取り組めるのがポイントです。目的別にレッスンパックにされており、最終的な目標や知りたい言語や命令から検索をして気になる動画を見つけることもできるので、困ったときにピンポイントで動画を見つけられるのもおすすめの理由です。

●基本情報
・学べる言語：HTML、CSS、JavaScript、PHP、Ruby
・会員登録：必要
・料金形態：無料　※中上級者向けのプレミアム会員プラン（月額980円）あり
・公式HP：http://dotinstall.com/

実践的に慣れていける「CSSデザインサンプル」

サイト制作に使えるHTMLソースやCSSソースのサンプルを、図解を交えながら解説しているCSS初心者におすすめの学習サイトです。

コピー＆ペーストをしたソースをベースに、CSSの値を変更してレイアウトの変化をみるという流れを繰り返すという学習法なので、実践的にCSSに慣れていくことができ、自然とサイト作成の基本を学ぶことができます。

●基本情報
・学べる言語：CSS、HTML
・会員登録：不要
・料金形態：無料
・公式HP：http://www.css-designsample.com/

テンポよく学習できる「CodePrep（コードプレップ）」

途中で飽きてしまいそうな方におすすめなのが「CodePrep」です。ブックといわれるコンテンツが複数あり、穴埋め問題を自分のペースで解きながら理解を深めていけます。1ブックを解くのにかかる時間は約10分。隙間時間にも学習しやすく、穴埋め問題以外のコードも「自由編集モード（Playground）」に切り替えれば、自由にコードを変更して実際の動きを確認できます。

編集したコードは、ダウンロード可能。学んだものをそのままリアルにいかすことができ、コードを一から書く手間が省けるのもおすすめの理由です。

●基本情報
・学べる言語：HTML、CSS、JavaScript、PHP、Ruby、Java、Pythonなど
・会員登録：必要
・料金形態：無料　※プレミアム会員登録は2018年1月4日に終了
・公式HP：https://codeprep.jp/