初心者がCSSを学ぶのにおすすめのサイト20選｜基本的な構造と組み立て方も解説

HTML・CSS

公開日時: 2020-07-03 　更新日時: 2022-06-13

この記事でわかること

最新情報や関心のある情報を毎日お届け。 FEnetメールマガジンメルマガ登録はこちらから>>

システム エンジニア: HTMLとCSSの勉強法ってどんな方法があるのですか？

プロジェクト マネージャー: これから紹介する学習サイトや書籍から学ぶことができます。

CSSとは？

CSSはスタイルシートと呼ばれ、WEBページ上のデザインやレイアウトといった、スタイルを設定するためのプログラミング言語です。

文字の大きさや色、配置などをCSSで書き込むことによって、WEBページを見やすくしてくれます。もしも、CSSを使わず、HTMLのみでWEBページを作成すると、文字の羅列のみでとても読みにくいものになってしまいます。

CSSの基礎を学習しよう

実際にCSSのコーディングを始める前に、まずはCSSの基礎について具体的に説明します。

CSSの基礎を理解することによって、各学習サイトでの学習が捗り、有意義に時間を使うことができるので、ここで理解を深めましょう。

基本的な型を覚える

CSSをコーディングするためには、まず基本の型を覚えることが必要です。ここでは、CSSの書き方や、HTMLに読み込ませる方法について説明します。この基本の内容を理解することが、応用への近道ともなるので、頑張りましょう。

CSSの基本的な書き方

CSSは、主に「セレクタ」「プロパティ」「値」の3つの要素により構成されています。

・セレクタ：HTMLのどのタグを変更するか
・プロパティ：セレクタで決めたタグのどんなデザインを変更するか
・値：指定したプロパティをどのようにするか

コードとして表すと以下のようになります。

セレクタ{プロパティ:値;}

1	セレクタ{プロパティ:値;}

この型がCSSコードの基本です。「:」や「;」は忘れないようにしましょう。

例として、「h1という見出しのフォントカラーを赤にする」としたいときは、次のようにコーディングします。

h1{color:red;}

1	h1{color:red;}

このように、基本的な書き方を覚えると、HTMLのある箇所を自在に変更できます。

CSSの基本的な読み込ませ方

CSSをHTMLに読み込ませる方法はいくつかありますが、ここでは一般的な、CSSとHTMLのファイルを分けた上で、読み込ませる方法を説明します。

あるHTMLファイルに、CSSファイルを読み込ませたいときには、HTMLファイルの<head>部分に対して、次のようにコーディングします。

<link rel = "stylesheet" href = "読み込ませたいCSSファイル">

1	<link rel = "stylesheet" href = "読み込ませたいCSSファイル">

例えば、「sample.html」というHTMLファイルに、「style.css」というCSSファイルを読み込ませたいとしましょう。次のようにコーディングすると、読み込ませられます。

<link rel="stylesheet" href="style.css">

1	<link rel="stylesheet" href="style.css">

このように、<link>タグを使うことで、HTMLにCSSを読み込ませられます。

CSSを組み立てる手順

次は、Webサイトを作る上で、どのようなことを意識しながらCSSを組み立てていけばいいのか説明していきます。はじめは難しく思えるかもしれませんが、仕組みがわかると簡単です。

全体の構造から考える

まずは、全体の構造を押さえておきましょう。まず、Webサイトは大きく分けると「header」「footer」「main」「side」の４つのパーツで構成されています。

・header（ヘッダー）：サイトの一番上に当たるパーツ
・footer（フッター）：サイトの一番下に当たるパーツ
・main(メイン）：メインの記事等に当たるパーツ
・side（サイド）：メインの横に書いておきたい文章に当たるパーツ

このように分けることで、CSSではそのパーツごとに要素を変えられます。

細かく分解して考える

Webサイトを大きなパーツに分けることができたら、次は各パーツをさらに細かく分解していきましょう。具体的には、各パーツの文字の色や大きさ、文字を配置する位置、枠線などです。

パーツを分けるとき、「div」タグと「id」または「class」属性というものを使います。これらは、細かく分解したパーツに対して、名前を与えるようなイメージです。

例えばメインパーツの部分に、写真と文字を書きたいとします。この時HTMLではこのように書きます。

<div id = "picture">写真のURL</div>
<div id = "text">文字</div>

1 2	<div id = "picture">写真のURL</div> <div id = "text">文字</div>

このようにHTMLで書いておくと、CSSではこのdivやidを使って、細かく設定を考えることが可能になります。

必要なコードを探す

細かく分解することができたら、いよいよCSSでレイアウトを考えていきます。レイアウトでは、変更したい内容に合わせて必要なコードを探します。

具体的には、プロパティについて、文字の色を指定する「color」や、フォントのサイズを指定する「font-size」など、これらの他にも多くのプロパティが存在します。さらにそのプロパティに値を与えることが必要になります。

プロパティや値については、必要なコードをWebサイトなどで調べてみながらレイアウトを考えることがいいでしょう。

HTMLとCSSが学べる！おすすめの学習サイト20選

ここからは、HTMLとCSSが学べる学習サイトを紹介していきます。

無料で使えるサイトもあれば、有料コースでがっつり学べるものもあります。知識を身に着けるだけでなく、実際にコードが書けるものや、よく使うコードをまとめてあるサイトなど、それぞれに工夫が凝らされています。自身の勉強法に合ったものを見つけてみましょう。

1：SAMURAI Engneer Plus+

「SAMURAI Engeer Plus+」とは、株式会社侍が運営する日本最大級のサブスク型オンラインITスクールです。

講師満足度95%、挫折率8％と非常に質の高い学びが得られるサイトとなっています。

サイトの特徴

他のスクールと比較しても月額2,980円で30種類以上の教材で学び放題となっており、非常にコストパフォーマンスに優れています。

他スクールとの比較はこちら→

他にも、現役エンジニアとの60分間のオンラインレッスンやつまづいたらいつでも相談できる「Q&A掲示板」など様々なサービスが充実しています。

おすすめポイント

エンジニアになるためには、「自分で調べて自分で考えて自分で行動する」といった「自走力」が必要になります。

「SAMURAI Engeer Plus+」では自分で教材から調べて、それでもわからなければ「Q&A掲示板」、それでもわからなければ「現役エンジニアにヒアリング」と本当に実務で必要な”自走力”をも鍛えられるサービスとなっています。他のスクールでは得られない、”よりエンジニアになった時に活躍できるようなサービス構成”となっています。

今なら通常10,780円(税込)相当のレッスンチケットを毎月1枚無料配布しており、お得に始められるチャンスです。

2：1時間で作るホームページ

最初にご紹介するおすすめの学習サイトは「1時間で作るホームページ」です。

「1時間で作るホームページ」は詳しい説明は省いて、ホームページの作成方法を手順中心でまとめてあります。知識のない初心者でも手順通りに進めれば、基本的なホームページの作り方を学べます。

HTMLとCSSの基本もきっちりと押さえられているので、学習の導入として見てみることをお勧めします。

3：ドットインストール

次にご紹介するのは、「ドットインストール」です。

無料の会員登録をするだけで、HTMLやCSSをはじめとしたプログラミングに関するレッスン動画を視聴できます。動画はどれも3分以内と短く、すきま時間にスマートフォンから気軽に視聴可能ですので、仕事などで忙しく、あまり時間のない人にもおすすめの勉強法です。

4：Codecademy

続いてご紹介するのは、「Codecademy」です。

会員登録が無料で、ブラウザさえあればCSSの学習ができるオンライン学習サービスです。この学習サービスは実戦形式で、無料版のコースでも有料版のコースとほとんど変わらない内容を学習できるので、金銭面に余裕がない人におすすめです。

5：UDACITY

データサイエンスやAI、プログラミングの分野に精通しているのが「UDACITY」です。

実際のプロジェクトに通じた学習を行い、1対１でのテクニカルメンターが配属され、さらにはキャリア相談も受けてくれます。コーディングをしたことはないけれどしっかりと学びたい初心者の人や、自身のスキルアップを目指す上級者まで様々な人におすすめする学習サイトです。

6：Markup

CSSのレイアウトをよく学習できるのが「Markup」です。

このサービスは、レイアウトの組み方に特化したCSSを学習できます。リアルタイムでプレビューを確認できる機能があり、教材はシンプルで読みやすいスライド形式になっています。CSSの細かなレイアウトについて、深く学習したい人はおすすめです。

7：Schoo

次にご紹介するのはSchooです。大人になっても学び続けるべきだという理念のもとに、生放送でのオンラインレッスンを展開しています。ビジネススキルやキャリアアップにつながるコンテンツが豊富で、プログラミングに関する授業も多く扱われています。

また、有料会員に登録すれば、過去のオンラインレッスンも録画で見ることができ、自分のペースで学習を進めることも可能です。

8：Skillhub

フリーランスで仕事を受けたい人や、起業したい人に支持されているサイトがSkillhubです。

クリエイターであるSkillhubの代表自らが、初心者にも分かりやすいビデオを作成し、サイト上で公開しています。基礎や入門の講座は無料で受講可能です。

実際に仕事に繋がったという口コミが多く、初心者からプロを目指したい人には、おすすめの勉強法です。HTMLとCSSから始めて、プログラミングの知識を広げていけると良いでしょう。

9：プログラミング入門サイト～bituse～

プログラミング入門サイト～bituse～は、登録なしで誰でも閲覧できるサイトです。入門レベルのHTMLとCSSの知識を身に付けられます。

サイト上では実践をする機能はなく、別途テキストエディターを使って、自分でコードを書く環境を整える必要があります。

よく使うコード、タグやスタイルのリストもまとめてあるので、ある程度自分でHTMLとCSSが書けるようになった人も、備忘録代わりで使ってみてはいかがでしょうか。

10：CodeCamp

続いて紹介するCodeCampは完全オンラインのプログラミングスクールです。

現役のエンジニアが講師としてマンツーマンレッスンを行います。マンツーマンなので、分からないことがあれば質問ができますし、個人のレベルに合わせて学習を進められます。独学だけでは続けられないという人におすすめの勉強法と言えるでしょう。

11：ShareWis

次にご紹介する学習サイトはShareWisです。

サイト内の動画で、プログラミングや語学などのスキルを学べます。90秒の無料動画と本格的に学べる有料動画があり、自分の学びたいことやレベルに合わせてコンテンツを選べます。

アプリを利用して動画をダウンロードしておけば、オフラインでも視聴できるので、繰り返し見るという勉強法もおすすめです。

12：7日間でできるCSSベースのホームページの作り方

続いてご紹介するのは、「7日間でできるCSSベースのホームページの作り方」です。

この学習サイトは、文章が中心となっていて、効率的なCSSの覚え方やホームページの制作ガイドなどが学習できます。HTMLやCSSを具体的にどのように使っていくのか確認したい人におすすめの学習サイトです。

13：Dash

「Dash」は、ブラウザでCSSのプログラムを実行できる無料の学習サイトです。

CSSだけでなく、HTMLやJavaScriptも同時に学習できます。現在は、5つのプロジェクトを課題として掲載されています。CSSやJavaScript、HTMLを使って、実際のサイトやブログを構築しながら学習したい人におすすめしたいサイトです。

14：Webクリエイターボックス

次にご紹介する学習サイトは、「Webクリエイターボックス」です。

この学習サイトでは、実際にサンプルファイルを利用して、段階を踏みながらWebサイトを製作できます。CSSの基礎知識があり、CSSをある程度コーディングできないと難しいようですが、学習意欲がありチャレンジ精神を持っている人にはおすすめです。

15：Udemy

続いておすすめするUdemyは、プログラミングに限らず、様々な専門知識を学べるオンラインレッスンサイトです。

世界中の専門知識を持つ人たちが講師として登録しており、ユーザーは好きなレッスンを購入できます。HTMLとCSSだけでなく、画像編集やデザインに関するレッスンなども受けておくと、ホームページ作成に役立つでしょう。

16：Code School

HTML、CSS、JavaScriptをまとめて使用してサイトを構築する学習サイトが「Code School」です。

この学習サイトは、教材にブラウザ上での動画を使用し、コーディングの演習にはゲームのような要素も含まれています。ただし、現在このサイトは英語のみ対応しているので、英語が得意な人におすすめです。

17：Progate

HTMLとCSSを実践も交えて学べるサイトがProgateです。

イラスト豊富な分かりやすいサイトで、HTMLやCSSの基礎を学べます。各レッスンの最後には、実際にコードを書いてみる実践編が含まれており、初心者がゴールをイメージしやすい工夫がされています。

スマホアプリでも同様のレッスンを受けられ、ゲーム感覚で学習を進めることができるので、小学生でも始められるプログラミングの勉強法として注目されています。

18：CSS. Design Sample

続いてご紹介するのは、「CSS. Design Sample」です。

初級者向けのホームページ作成講座と、上級者向けのスタイルシートレイアウト講座があり、自分の実力にあわせて学習できます。文章中心の学習サイトですが、ホームページを作成するうえで必要なCSSの知識などが事細かく記載されています。

無料のCSSテンプレートも掲載されているので、それらを参考にしてみるのもいいかもしれないです。

19：CSSデザインテンプレート

「CSSデザインテンプレート」はホームページ用のテンプレートが配布されています。

ホームページに関する作成ツールや、CSSのテンプレートが無料で掲載されています。どのようなテンプレートがあるのか見てみたいという人におすすめです。

20：CODEPREP

最後にご紹介するCODEPREPは実際にプログラミングを書きながら学べる学習サイトです。

1レッスンは10分ほどで、毎日少しでもHTMLやCSSのコードを書く習慣を身に付けられるようになっているので、継続しやすい勉強法としておすすめです。コードを全て書くのではなく、穴埋め問題などで初心者でも取り組みやすいようになっています。

HTMLとCSSを学ぶには書籍もおすすめ！

HTMLとCSSを学ぶには、書籍を利用しても良いでしょう。オンラインだけでは分かりにくい部分をフォローして、独学勉強法のサポートをしてくれます。また、会社などに1冊置いておけば、新入社員の教育の場でも役に立つことでしょう。

システム エンジニア: 自分に合った方法で学ぶのが重要なのですね。

プロジェクト マネージャー: サイトや書籍で簡単に始められるので、ぜひHTMLとCSSを身に付けてみましょう。

自分に合ったHTMLとCSSの勉強法を知ろう

いかがだったでしょうか？HTMLとCSSの勉強を始めるための参考になりましたか？

学習サイトや書籍だけでも、HTMLとCSSを学べきます。気軽に始められる方法から、がっつり仕事を見据えた方法まで、様々紹介してきました。ぜひ、自分に合った勉強法を見つけて、Webページ作成に挑戦してみてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!