初心者の為のCSS学習【基礎編】

CSSとは

CSS(シーエスエス)とはCascading Style Sheets(カスケーティング・スタイル・シート)の略称であり、HTMLで記述された要素をスタイルしていく為に用いられます。

HTMLの要素をスタイルしていくとは、HTMLに記載された文字の色や大きさをCSSで指定して、HTMLで配置した画像や動画の配置場所をCSSを用いて指定する事ができます。

CSSの書き方と説明

CSSは必ずHTMLとセットで使います。

HTMLと同様メモ帳があれば書くことができますが、テキストエディターを用いて記載していくことが基本となります。

まずは簡単な一例を見てみましょう。

h1{
  font-size: 20px;
}

p{
  color: blue;
}

この場合、HTMLの<h1>タグで囲われている箇所の文字の大きさを<20px>にして、<p>タグで囲まれている箇所の文字の色を青色にしてしています。

CSSの文法はめちゃめちゃ簡単

CSSは実は文法自体はめちゃめちゃ簡単です。

初心者が覚えることはこれだけです。

「～～の何をどうする」この文法だけを覚えておけばCSSの文法はほぼマスターできています。

簡単な英語を用いてCSSの記載のルールを説明していきます。

I have a pen = 私は（１つの）ペンを持っています。

誰もがしっている英語の文法ですね。

I play soccer = 私はサッカーをプレイします。

これも簡単な英語の文法ですね。
しかし、文法は同じでも「I play a pen」このようには使えません。

CSSも同じように「何をどうする」には書ける内容が決まっています。例えば「色を青くする」「文字を太くする」「文字を中央に寄せる」等は書くことができますが「色を太くする」や「色を中央に寄せる」等とはかけません。

これらのルールと「どう書く」と「どうなる」を覚えていくのがCSSの学習です。

CSSの文法をもう少し詳しく解説

CSSの文法をもう少し詳しく解説していきます。

まずはコチラのコードを見てみましょう

CSSの学習時間

何時間勉強すればCSSってマスターできるの？

CSSはルールは簡単、極めるは難しい言語です。将棋やオセロもルール自体はすぐに覚えれますが、プロにはとても太刀打ちできません。

作成したいサイトのデザイン（デザインカンプ）を基に完全に再現するまでをマスターするというなら習得時間はセンスに左右されるとしか言いようがないかと思います。

しかし、CSSのコードを読めるようになるには、「セレクターの書き方」「プロパティの種類」「値の種類と書き方」を覚えればいいだけですので、１～２日あれば習得できます。

あとは参考にしたいサイトをgoogleの検証機能等をつかってどのようにCSSが書かれているかを眺めているとCSSは日に日に上達していきます。

まずはCSSを読めるようになりましょう。

個人的な意見ですが、他のプラグラミング言語は書いて書いて書きまくって上達していくものですが、CSSに関しては、まず読めるようになってから書いていったほうが上達が早いように感じられます。

まずは、プロパティと値を覚えていきましょう。