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

  • 2019年8月9日
  • 2019年8月10日
  • CSS
CSSのメイン画像

CSSとは

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

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

CSSの書き方と説明

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

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

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

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

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

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

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

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

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

I have a pen = 私は(1つの)ペンを持っています。

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

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

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

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

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

〇:p { color: blue;}
〇 : p { text-aline: center;}
✖ : p { color: center;}

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

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

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

p { color : blue;}
これを「~~のどうする」に置き換えると「pの色を青くする」となります。
「~~」の部分を指定した後に{ } で囲み「何」の部分を書いてから「どうする」の部分を「:;」コロンとセミコロンで囲んであげればOKです。
どうする」の部分はまとめてあげることもできます。
p  { color : blue; text-aline : center ; }
これで、pの文字を青く、テキストを中央寄せにすることができます。
このままでは書いていく内容が増えれば横に並んで見にくくなってしまいますので
p {
      color : blue ;
      text-aline : center ;
     }
このように整形して書いてあげると修正等を行いやすくなります。
どうする」の部分だけを複数まとめれる訳ではなく、「~~」の部分も様々な書き方があります。
軽くだけ説明しておくと、上のCSSの文法で「p」とかかれている部分はHTMLでは「要素」といいます。
要素が記載されている部分をCSSではセレクタと言います。別項目で詳しく記載しますので、ここでは頭の片隅にでもいれておいてください。
セレクタの書き方は色々あるのですが、セレクタを複数記載する場合は「,」(カンマ)で区切ります。
p , h1 { color: blue;}
このように書くと<p>と<h1>の文字が青色で表示されます。

CSSの学習時間

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

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

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

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

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

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

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

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

 

>プログラミング情報サイト「In-Output」

プログラミング情報サイト「In-Output」

当サイトではプログラミング言語の情報を発信しています。
HTMLやCSSのマークアップ言語の学習方法や解説、WordPressでのサイト開設方法、python等のプログラミング言語を使用して日頃の作業の効率化等、皆様のお役に立てるサイトを目指しています。

CTR IMG