1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

マークアップエンジニアがオススメするCSS学習サイト7選

CSS学習サイト
Pocket

CSSはWeb画面の装飾を指定するための言語です。Web画面がスクリーンに表示される際には、多くの装飾要素があります。文字の色・サイズや、罫線の太さ・色、背景色といった細かい表示スタイルを指定することができます。さらに、スマートフォンで表示される場合のみ適用されるレイアウトや、プリンタなどの機器で印刷・出力される際の出力スタイルなども定義することができます。CSSはWeb画面の構造を示すHTMLと組み合わせて用いられます。HTMLは、どの文字が見出しであり、どこからどこまでが段落である、といった文書の構造を指定します。CSSはその見出しがどのくらいのサイズでどのような色をしているか、といった指定をすることになります。CSSはあらゆるWeb画面で用いられている技術なので、習得するとWeb画面制作の幅が大きく広がることになるでしょう。

CSSは単体で用いられることはなく、他の技術と組み合わせて用いられます。CSSを高度に利用するには、HTMLやJavaScriptといった技術も習得する必要があります。例えば、Web画面の訪問者がボタンを押すと、文字の色が変化するといった仕組みを作るとします。ボタンを定義するのはHTML、ボタンを押したときのイベントを処理するのがJavaScript、色を管理するのがCSSです。複数の技術を組み合わせることで、様々なデザインの制作が可能になるでしょう。

8週間でWebデザイナーになる!

CSS(シーエスエス)の講座があるプログラミング学習サイト

  1. Progate(プロゲート)
  2. シラバス
  3. ドットインストール
  4. ShareWis(シェアウィズ)
  5. DouGaku(動学)
  6. ACT(アクト)
  7. CODEPREP(コードプレップ)

下記では、各学習サイトの詳細をご紹介します。

1.Progate(プロゲート)

Progate

ProgateのCSS講座では、実際のHTMLのWebページに対して、文字の色や大きさを変える、ボーダーラインのつける、幅をとるなどの装飾をCSSを使って行っていきます。応用編では、要素の透過やボタン作成、クリック時の変化などを使いより実践的なランディングページ作成を行います。「エディタにコーディングして、チェックして…」というのを繰り返すことで着実にスキルがついていきます。

Progate(プロゲート)の詳細を見る

2.シラバス

シラバス

シラバスではHTMLの知識を持っている方を対象にして「CSS入門」を提供しています。文字ベースの解説に、エディタや表示結果のキャプチャを交えて解説されているので、初心者でも理解できる内容になっています。特徴としては、実際にはそこまで使わないタグまで網羅的に詳しく説明されている点です。CSSについて幅広い知識をつけておきたい方や辞書的に使いたいサイトを探している方に特におすすめです。

シラバスの詳細を見る

3.ドットインストール

ドットインストール

ドットインストールでは「CSS入門」という講座を無料で視聴することができます。これまで200万人以上が視聴してきており、現在も3000人がこれで学習を進めています。CSSの中でも特によく使う、floatやclear、background、margin、paddingなどよく使うタグに関しては全て網羅した内容なので、この全22回の動画を全て視聴することでおおよそのCSSの知識はつけることができます。

ドットインストールの詳細を見る

4.ShareWis(シェアウィズ)

ShareWis

ShareWisの「動画で学ぶCSS入門」はCSSの中でもフォントスタイルの変更だけに特化した内容になっており、「CSSのタグを覚える」といった用途ではなく「CSSがどういったものか知る」という目的でよく使われ、これまで2000回受講されています。また、最新のCSS3について、新しく加わったattribute selectorなどの要素を説明している動画も別であるので、是非ご覧ください。

ShareWis(シェアウィズ)の詳細を見る

5.DouGaku(動学)

DouGaku
DouGakuには「HTML講座」がありますが、講座内の応用編ではスタイルシートの使い方を学習します。具体的には、文字の色や大きさの指定、背景色の指定、要素同士の間隔の指定などが学べます。CSSがメインというわけではないので、「HTMLを学ぶのと一緒にCSSも知っておきたい」という方におすすめの勉強法です。

DouGaku(動学)の詳細を見る

6.ACT(アクト)

ACT

ACTには2,980円のHTMLとCSSが学べる初心者向けのコースがあります。各単元ごとに区切られた10分弱の短い動画レッスンを視聴する形で学習を進めます。テーブルやリスト、画像をCSSによって見栄えよく整えていくプロセスを通してHTMLとCSSの関係性や、CSSの書式のルールをマスターできるような内容になっています。

ACT(アクト)の詳細を見る

7.CODEPREP(コードプレップ)

CODEPREP

まず、「はじめてのCSS」にてセレクタの利用、文字のデザイン・大きさ変更、余白付けなどCSSの核となるコードを勉強します。基礎が身についた後は、「斜型ボックス作り」「リボン型見出し」「3段レイアウト」など課題ごとに解いていく応用編にチャレンジできます。CSS3になって新しくできるようになったことを学べる講座もあるので、是非利用してみてください。

CODEPREP(コードプレップ)の詳細を見る

CSS(シーエスエス)の勉強を成功させるために

CSSは基本的にHTMLの知識が前提となって初めて生きる技術です。そのため、CSSを単体で学ぼうとするのではなく、HTMLとCSSの関係性をうまく理解しながら進められる勉強法をおすすめします。上記でご紹介している学習サービスは全てHTMLの学習も併せてできるコンテンツが揃っているので、気になったサイトがあったら覗いて勉強を始めてみましょう。

8週間でWebデザイナーになる!

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る