CSSを「基礎」から順番に学ぶ

WEBデザイン・WEB制作のしごとにおいて、CSSの学習は切っても切り離せない。CSSの基礎は、コーディング作業をする上での土台となる。基礎知識をしっかり固めて、効率的なCSSコードが書けるようにしておく事で、作業スピードも上がり、無駄な修正が少なくなる！

今回は、CSSの基本から丁寧にしっかり学べる記事を紹介していこう！

step1CSSの基礎を学ぶ

CSSを学ぶにあたって最初に学びたいのが、CSSの基本的な使い方。CSSの基本文法から、それぞれの記述の意味までしっかり解説。CSSはどこに書けばいいのか、外部のCSSファイルはどうやって読み込めばいいのか？こんな基礎的な疑問にしっかりと答えた記事はこちら。

step2CSSのセレクタについて学ぶ

CSSの記述には「何をどのようにどんな風に変化させるか」という記述をするのだが、その中で「何を」にあたる「セレクタ」について学ぶ必要がある。

セレクタはとても奥が深く、現役のプロでさえ普段使わないセレクタは、忘れてしまうほど。

逆に言えばセレクタを完全に理解できれば、効率的なCSSの構築ができるようになるので、しっかりと学びたい！

そんなセレクタをサンプルを交えて「超絶丁寧に」説明した記事はこちら。

step3CSSの優先順位について

CSSには優先順位というものが存在する。それは、同じ要素に対して相反する別の指定をした場合に、どちらの指定が優先されて表示されるかの「優先順位のルール」が存在するのだ。

そんなCSSの優先順位を知りたい方はこちらの記事を参考に。

step4CSSの背景を指定するbackgroundの基礎

CSSで指定できるプロパティはたくさん存在する。その中でも重要な基礎として学ぶ必要があるのが、背景を指定するbackgrouondプロパティだ。

backgroundは、位置をどこに表示させるか、どんな背景画像をつかうか、グラデーションを使うにはどうしたらいいか、など補足的なプロパティがたくさんある。

これらを全部丁寧に説明した記事はこちら

step5CSSのfont-sizeの単位とレスポンシブに不可欠なremのおすすめ指定

CSSの重要な基本プロパティのひとつであるfont-size。基本的な記述は簡単だが、単位がいくつかあり、それらをしっかりと理解する必要がある。

また最近ではパソコンとスマホやタブレットなど、あらゆる画面サイズに対応したレスポンシブサイトを構築することが必須となる。

そんな「レスポンシブに不可欠な単位であるrem」のおすすめの指定方法がある。font-sizeの基礎からremでのおすすめ指定まで詳しく書いた記事はこちら。

step6backgroundを複数設定する方法

背景画像は以前までは１つの要素に１つの背景を指定するだけだった。しかしCSS3になってからひとつの要素に複数の背景を指定できるようになったのだ。

そんなCSSの背景複数指定について、詳しく書いた記事はこちら。

step7CSSのレイアウトに便利なFlexboxを学ぶ

CSSのレイアウトに欠かせないのがFlexbox。昔はFloatなどが使われていたレイアウトが、Flexboxの登場でブラウザの対応で、一気に便利になったのだ！

今やCSSのレイアウトはFlexbox無しには語れないほどの存在なので、図解付きでわかりやすく解説したこちらの記事を参考に学んでいこう！

step8CSSのアニメーションを学ぶ

CSS3ではアニメーションをつけることができるようになった！

CSSのアニメーションの設定の仕方や、かっこいいアニメーションのサンプルを例にして、具体的にどうやって記述すればいいかを解説した記事はこちら。

next stepSassの基礎を順番に学ぶ

CSSの基礎ができたら次は、CSSをもっと効率良く・スピーディーに書くことができるSassに触れてみよう！

WEBデザイナー・エンジニアにできるだけ早く・簡単になりたい方へ！

ご存知の通り「HTMLやCSS、JavaScript、Photoshop、WEBデザイン、プログラミング」などの学習は、初心者が「独学」で完全マスターするには半年〜１年近くかかり、相当根気よくやらないと挫折するか、ライバルに出遅れてしまう…。

「短期間」でマスターするには？

私の経験から言うと、手頃な価格の短期オンラインスクールを利用した方が圧倒的に早い。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題の「オンラインスクール」を利用すると２ヶ月程度で経済的に学べるからだ！（私もオンラインスクールを利用した経験があるので痛感）

おすすめはいくつかあるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違うという事。

強いて挙げるなら、実際私自身が受講した「初心者向け、でコスパが良く信頼できるスクール」という意味でオススメなのがコードキャンプはグローバル企業の「LINE社」を始め「オリックス、ニトリ、ガンホー、アクサ生命」など大手企業が社員研修として利用しているスクールなので、ある意味「大手企業からの評判はお墨付き」と言え、コードキャンプの質を裏付ける何よりの証拠と言える。

気になる方は無料体験を実施しているので、一度参加してみると良いだろう。

コードキャンプについてもっと詳しく知りたい方はこちらの記事を参考にどうぞ↓

色んなスクールから比較してみたいという方は、現役プロならでは目線で厳選・比較したこちらの記事を参考に自分に合ったスクールを探してみよう↓

CSSに関する記事一覧