「CSSって言語は知っているけど、使い方がよく分からない」
「おすすめの勉強方法はないのかな？」
「CSS」という言語、効いたことはありますか？
文書構成を伝える為の「HTML」に対して、見た目を装飾する為のものが「CSS」です。見た目を装飾する為に必要なものとなってくるので、WEB制作では必須の知識となります。
今回は、CSSを知らない方の為に、文法のご紹介と、筆者おすすめの勉強方法をご紹介します。
今回の記事は、次のような方にお勧め！
・CSSの書き方を知りたい！
・出来るようになるか不安な方
CSSの文法のご紹介
CSSは、セレクタ、プロパティ、値の3つの要素を組み合わせて、「どの部分の、何を、どう変えるか」を指定します。
順番に解説していきます。
セレクタ
特定の要素を選択するのが「セレクタ」です。ここで、どの部分を装飾するのかを指定します。セレクタの指定方法には、HTMLのタグの名前や、クラス、ID等、40種類以上バリエーションがあります。ただ、全てを覚える必要はありません。必要最低限覚えておきたい指定方法は、下記の通りです。
| セレクタ | 選択される要素 |
| 要素A（h1,p等ストレートに指定） | タグ名がAの要素に適用 |
| * | すべての要素に適用 |
| .A（クラス指定） | クラス名がAなところに適用 |
| #A（ID指定） | ID名がAなところに適用 |
| A , B | 複数の要素、A、Bに同じ装飾が適用 |
| A B（子孫セレクタ） | 親要素Aの子孫Bに適用 |
| A > B（子セレクタ） | 親要素Aの直下の要素Bに適用 |
なお、セレクタに続けて、プロパティと値を波括弧「{}」で囲んで記述します。
プロパティ
セレクタで指定した部分の、何を変えるかをここで指定します。フォントサイズを変える、文字色を変える、幅を変える等、プロパティには多くの種類があります。全てを覚えるのはとても困難なので、少しずつどんなものがあるのか、覚えていくと良いと思います。
「こんな指定できないかな？」
と思ったら、まずは検索してみて下さい。色々なプロパティがヒットするはずです。
なお、値との間には、コロン「:」を書いて区切ります。
値
ここで、見た目をどのように変更するのかを指定します。例えば、フォントサイズを20pxに変更したいのであれば、font-sizeプロパティに「20px」という値を設定します。
なお、値の後ろには、必ずセミコロン「;」を入力します。
難しそうと感じた方へ
出来る気がしないのですが・・
すごくわかります。なぜなら、私も初めはこうだったからです・・！
これは、実体験なのですが、初めは分からなくても大丈夫です。使っていくうちに、「どの部分の、何を、どう変えるか」という考え方が、不思議と身について、慣れてきます。
この慣れるまでの期間、辛抱出来るかの勝負となります。人により期間は様々ですが、毎日CSSに触れる機会を増やせれば時間も短縮出来るはずです。
・初めは、よく分からなくても問題なし！
・慣れるまで辛抱出来るかが勝負！
おすすめ勉強方法！
慣れるとは言っても、何か良い勉強方法があるんじゃないの？
そのような方の為に、私が実践した勉強方法を伝授します。
模写
実際にプロが作成したWEBサイトを自分でも作成する方法です。この方法では、HTMLやCSSの基本的な指定方法を学べる他、デザイン面でもプラスの効果が期待出来るのでおすすめです。
検証ツールを使ってCSSを覗き見
殆どのWEBサイトでは、Googleの検証ツールを使用して、コードを見る事ができます。そこでは、CSSの指定も見る事が出来るので、勉強になります。
ここでは、考える力を鍛える為に、どんなCSSが効いているのか予想して、答え合わせで検証ツールを見るというやり方がおすすめです。
※検証ツールの開き方は、Chromeブラウザでサイトを表示し、右クリック→「検証」で開けます。Windowsの場合は、「F12キー」or「Ctrl + Shift + I」、Macの場合は、「Command + Option + I」でも開けます。
私は、このやり方を繰り返しやる事で、感覚を掴んでいます。期間としては、毎日実施して3ヶ月程度でした。
まとめ
CSSの指定方法は、慣れが必要で、最初は取っ付きにくいかもしれませんが、徐々に慣れてきますので、少しずつ使い方を覚えて頂ければと思います。
