【CSS】基本的な書き方について。おすすめ勉強方法もご紹介！

「CSSって言語は知っているけど、使い方がよく分からない」
「おすすめの勉強方法はないのかな？」

「CSS」という言語、効いたことはありますか？

文書構成を伝える為の「HTML」に対して、見た目を装飾する為のものが「CSS」です。見た目を装飾する為に必要なものとなってくるので、WEB制作では必須の知識となります。

今回は、CSSを知らない方の為に、文法のご紹介と、筆者おすすめの勉強方法をご紹介します。

お助け猫

今回の記事は、次のような方にお勧め！

・CSSの書き方を知りたい！
・出来るようになるか不安な方

CSSの文法のご紹介

CSSは、セレクタ、プロパティ、値の3つの要素を組み合わせて、「どの部分の、何を、どう変えるか」を指定します。

順番に解説していきます。

特定の要素を選択するのが「セレクタ」です。ここで、どの部分を装飾するのかを指定します。セレクタの指定方法には、HTMLのタグの名前や、クラス、ID等、40種類以上バリエーションがあります。ただ、全てを覚える必要はありません。必要最低限覚えておきたい指定方法は、下記の通りです。

なお、セレクタに続けて、プロパティと値を波括弧「{}」で囲んで記述します。

セレクタで指定した部分の、何を変えるかをここで指定します。フォントサイズを変える、文字色を変える、幅を変える等、プロパティには多くの種類があります。全てを覚えるのはとても困難なので、少しずつどんなものがあるのか、覚えていくと良いと思います。

「こんな指定できないかな？」

と思ったら、まずは検索してみて下さい。色々なプロパティがヒットするはずです。

なお、値との間には、コロン「:」を書いて区切ります。

ここで、見た目をどのように変更するのかを指定します。例えば、フォントサイズを20pxに変更したいのであれば、font-sizeプロパティに「20px」という値を設定します。

なお、値の後ろには、必ずセミコロン「;」を入力します。

お悩みさん

出来る気がしないのですが・・

すごくわかります。なぜなら、私も初めはこうだったからです・・！

これは、実体験なのですが、初めは分からなくても大丈夫です。使っていくうちに、「どの部分の、何を、どう変えるか」という考え方が、不思議と身について、慣れてきます。

この慣れるまでの期間、辛抱出来るかの勝負となります。人により期間は様々ですが、毎日CSSに触れる機会を増やせれば時間も短縮出来るはずです。

・初めは、よく分からなくても問題なし！
・慣れるまで辛抱出来るかが勝負！

お悩みさん

慣れるとは言っても、何か良い勉強方法があるんじゃないの？

そのような方の為に、私が実践した勉強方法を伝授します。

実際にプロが作成したWEBサイトを自分でも作成する方法です。この方法では、HTMLやCSSの基本的な指定方法を学べる他、デザイン面でもプラスの効果が期待出来るのでおすすめです。

殆どのWEBサイトでは、Googleの検証ツールを使用して、コードを見る事ができます。そこでは、CSSの指定も見る事が出来るので、勉強になります。

ここでは、考える力を鍛える為に、どんなCSSが効いているのか予想して、答え合わせで検証ツールを見るというやり方がおすすめです。

※検証ツールの開き方は、Chromeブラウザでサイトを表示し、右クリック→「検証」で開けます。Windowsの場合は、「F12キー」or「Ctrl + Shift + I」、Macの場合は、「Command + Option + I」でも開けます。

お助け猫

私は、このやり方を繰り返しやる事で、感覚を掴んでいます。期間としては、毎日実施して3ヶ月程度でした。

CSSの指定方法は、慣れが必要で、最初は取っ付きにくいかもしれませんが、徐々に慣れてきますので、少しずつ使い方を覚えて頂ければと思います。