/*サーチコンソール*/ /*google adcense*/

CSSの基本書式【初心者向け】

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はCSSの基本的な書式について、初心者向けに解説していきます。CSSの書式はとても単純で理解しやすいです。

ですが初めてCSSを触るという人にとっては難しく感じるかもしれません。頑張っていきましょう!

CSSの書式設定
この記事の要点まとめ
CSSの書式
CSSはデザインやレイアウトによるスタイルを整えるもの。
基本書式
CSSの基本書式 = セレクタ{プロパティ:値;}
1.セレクタ
デザインを変更する対象となる要素の指定ができる。
2.中括弧(波括弧)
セレクタやその後のプロパティ:値は中括弧で加囲む。
3.プロパティ
セレクタで指定した要素に対して何をするかを指定する。
4.値
プロパティで指定したものをどうするかを指定する。
5.セミコロン
値を指定した後にはセミコロンをつける。
複数セレクタを指定
複数のセレクタを指定するには、セレクタとセレクタをコンマで区切る。
コメントアウト
「/*」と「*/」で囲むとコメントアウトできる。
レスポンシブデザイン
スマホの画面サイズに最適化するために、レスポンシブデザインは必須。
CSSを勉強するコツは覚えようとしないこと
学校教育の概念は捨てる
CSSのプロパティや値は覚えない。
「丸暗記、ノートにまとめる」はやめる
どのプロパティが何をするなどを丸暗記しない。
CSSで勉強すること
CSSはコードを覚えようとするのではなく、実際に触れてみる。

CSSの書式

ハリボー
ハリボー

CSSって難しそう。

実際に書いてみると直感的で理解しやすいよ。

ヒナ
ヒナ

CSSは「Cascading Style Sheet(カスケーディング・スタイル・シート」の略称で、HTMLと合わせて使用されるスタイルシート言語です。文書をタグで加工ことで意味付けするHTMLに対して、CSSはデザインやレイアウトによるスタイルを整えるものです。

この記事ではCSSの基本的な書式について解説していきます。CSSでできることやHTMLへの組み込み方については「CSSでできることと組み込み方【初心者向け】」の記事をご覧ください。

基本書式

ここからはCSSの基本的な書式について解説していきます。CSSの書式はとても単純で、「どの部分の、何を、どのようにする」という内容を書いていきます。

まずは下の画像を見て、CSSがどのように書かれているのかを確認してください。

CSSの基本書式
クリックで拡大

1.セレクタ

デザインを変更する対象の要素を、セレクタを使い指定します。「どの部分の」という場所に当たります。この場合は、class属性がtitleと付いたh1要素を指しています。

記述方法として、要素を指定する場合は「h1」、class属性のついたものを指定する場合は頭に.を付けて「.title」、id属性のついたものを指定する場合は頭に#を付けて「#title」のようにします。classやidについてよくわからないかもしれませんが、ここでは深く考えないで大丈夫です。

セレクタを複数指定する場合は、セレクタとセレクタの間にスペースを入れましょう。

2.中括弧(波括弧)

セレクタの後にはその要素に対するプロパティや値を記述します。このプロパティや値は中括弧({ } )で囲います。

3.プロパティ

プロパティとはセレクタで指定した要素に対して「何を」するかを指定します。今回の例では、フォントの色を指定する「color」、文字サイズを変更する「font-size」がプロパティとして指定されています。CSSではfont-sizeのように、2つの単語をつなげる場合は「-」でつなげます。スペースをあけると正しく処理されないので気をつけましょう。

プロパティは一つのセレクタに対して複数指定することが可能です。これについては後ほど解説します。

4.値

はセレクタで指定した要素に対して、プロパティで指定したものを「どのようにする」かを指定します。プロパティと値はコロン(:)で区切ります。

今回の例では、titleクラスのついたh1要素(セレクタ)に対し、color(文字色を変えるプロパティ)を赤くする、font-size(文字のサイズを変更するプロパティ)を24pxにするという値がそれぞれ指定されています。

5.セミコロン

セレクタに対して{プロパティ:値}を指定したら、最後にセミコロン(;)を付けましょう。最後のプロパティに対するセミコロンは省略できますので、「{プロパティ:値}と次のプロパティとの間をセミコロンで区切る」という考えでもいいかもしれません。

ですが省略してしまうと、次にそのセレクタに対して新しくプロパティを追加するとき、最後のプロパティだった部分にセミコロンを付け忘れるということも考えられます。そうするとエラーがでてしまいます。逆に最後のセミコロンを省略することで、CSSを軽量化(ページの表示速度を早くする)できるというメリットもあります。

どちらがいいかは自分の中でルール決めをしておきましょう。最後のセミコロンを手動では入力し、後から自動的に削除してくれるというツールもあるそうです。そういったものを利用するのもいいかもしれません。

セミコロンの省略
クリックで拡大

複数セレクタを指定

複数の要素に対して同じスタイルを適応させたいときは、複数のセレクタを指定することができます。記述方法は「セレクタとセレクタをコンマ(,)で区切る」だけです。

下の例ではh1要素とp要素に対して同じプロパティを使い、文字色を変更させています。

※CodePenの使い方がわからない方はこちら

See the Pen JjopEww by Kosei@SplaTech (@pompom_stk) on CodePen.

コメントアウト

プログラムを書いていると、コードが長くなりどの部分が何の働きをしているのかが直感的にわかりづらくなってきます。それを防ぐために「コメントアウト」をするようにしましょう。記述方法はコメントアウトしたい部分を「/*」と「*/」で囲みます。

下の例は別記事で使用したコードですが、それぞれがどの部分に対してスタイルを与えているものかを直感的にわかるようにしています。これは初心者向けということで細かく書いていますが、実際にここまで細かく書く必要はありません。

See the Pen CSSでできること by Kosei@SplaTech (@pompom_stk) on CodePen.

他にも「ここは後から変更したいな」「ここのデザインはこういう目的があったから、こう書いた」などというメモする目的で使用することもあります。コメントアウトした部分はWebページには表示されないので、基本的に自由です。自分にとってわかりやすいコードになるように使用していきましょう。

レスポンシブデザイン

ハリボーは何かのサイトやブログを見るとき、PCで見る?

ヒナ
ヒナ
ハリボー
ハリボー

スマホだよ。ちょっと調べるのにPC開くのはめんどくさい。

だよね。そういう人が多いからこれからは「レスポンシブデザイン」がとっても大事だよ。

ヒナ
ヒナ

この記事では詳しく解説しませんが、CSSを書いていく上で直感的にわかりづらく、一番大変なのがこの「レスポンシブデザイン」です。レスポンシブデザインとは「ページを開く画面サイズによってレイアウトを変更する」ものです。これは「スマホのためのもの」といっても過言ではないでしょう。

というのも実際にスマホでwebサイトを開くとPC画面で見づらく、すぐに検索画面に戻ったという経験はないでしょうか?そういった事態を防ぐためにもレスポンシブデザインはとても大切なものとなります。もちろんスマホだけでなく、タブレット(ipadなど)に対しても同様で、使用するデバイスの画面サイズに適切なデザインが表示されます。

現在、そしてこれからもWebサイトはPCで見るよりもスマホやタブレットで見ることの方が多くなるでしょう。そうなるとこのレスポンシブデザインは、「SEO対策としても必須」と言えます。

実際に書いてみるとそこまで難しいものでもなく、慣れてしまうとたいしたことはありません。ですがレスポンジブデザインに対しては伝えたいことが多いので、また何記事かにわけて解説していきます。今はサイトを、「スマホに対応させるにはCSSを使ってスタイルを整える必要がある」ということだけ覚えておいてください。まずは画面サイズを気にせず、基本スタイルを整えることから始めましょう。

もし「PCとスマホでデザインが違う」というのがよくわからない方は、ぜひこのブログを今開いているデバイス以外で見てみてください。PC画面であるのにスマホ画面にはないもの、逆にスマホ画面にはあるのにPC画面にはないものがあります。

別に僕のブログをたくさん見て欲しいというわけではありませんよ?笑

CSSを勉強するコツは覚えようとしないこと

ハリボー
ハリボー

これからCSSのコードを綺麗にノートにまとめて、頑張って覚えるぞ!

ちょっと待って!その勉強法はおすすめしない。

ヒナ
ヒナ

学校教育の概念は捨てる

僕がCSSを本格的に学び出してからまだ3.4ヶ月ほどしかたっていませんが(2020年1月現在)、CSSに関しては初心者は脱したかなと思っています。最近CSSに対して脱初心者をした僕からこれからCSSを勉強していこうと思っている人にアドバイスすることは、「CSSのプロパティや値を覚えようとしないこと」です。これはHTMLや他のプログラミングでも言えることです。

他にも「英語ができないから向いていない」という考えも間違いです。僕の知り合いで数十年間プログラミングをしている人の話では、英語はできなくてもプログラムは書けるし一、つ一つ覚える必要もないとのことでした。

実際プログラミングに関わるまでの僕もそうでしたが、どうしても学校教育の延長線で「勉強するには覚えないといけない」と思いがちです。特にプログラミングは数学に近いところがあり、数学は公式などを覚えていたと思います。CSSでも「セレクタ{プロパティ:値;}という公式は覚えた方がいいですが、これもあえて覚えようとしなくても何度か書いていけば自然と覚えます。

「丸暗記、ノートにまとめる」はやめる

プログラミング学習において悪い例が、「どのプロパティを使ったら何ができる」ということを全て暗記していくことです。どこかのサイトかブログかで見たことをそのまま書きますが、「プログラムのコードを丸暗記するのはプログラマーではなくてもはや哲学者」です。どこで見たか忘れてしまいましたが、僕はこの言葉がとても大好きです。当時プログラミングをしている人が周りにいなかった僕の、「コードを丸暗記しないといけない」という先入観を破ってくれた言葉でした。

コードは覚えなくても、Googleで検索すればすぐに出てきます。僕も持っていますが、できれば一冊辞典があれば便利です。

あとコードを綺麗にノートにまとめるのもおすすめしません。ノートにまとめても検索できないし、検索できるネットや書籍の方が圧倒的に効率がいいです。もし僕のように「書いた方が覚えやすい」という人はブログに書いてみるといいかもしれません。実際僕も「自分で後からわからないことを見直す」という目的もあってこのブログを書いています。ブログであればタグ付けすれば検索ができ、しかも自分にわかりやすく書いているのでとても便利です。

CSSで勉強すること

「ならCSSは何を勉強するの?」と言われそうですが、「CSSを使えばこんなことができる」ということを理解していきましょう。今回の例で言えば「文字色を変えられる」や「文字サイズを変えられる」などです。わかっていれば「CSS 文字色変更」などとGoogleで検索できます。

ですが、CSSで文字色を変えられるということがわかっていないと、検索をするまでにたどり着けません。検索すればコードがかけるという状態を、まずは目指しましょう。

そして実際にコードを書いてみることが何より大切です。実際に書いてみると直感的に理解しやすく、あえて覚えようとしなくても、何度かコードを書いていけばプロパティ名も覚えます。丸暗記やノートにまとめるなどは、時間を無駄にするだけです。CSSを勉強するコツは、コードをあえて覚えようとせずとにかくたくさん触れていくことです。

このブログでもこれからたくさんのHTML、CSSのコードを紹介・解説していきます。それを見て「こんな処理ができるんだ、こんなコードがあるんだ」ということを知り、実際に自分で書いてみることで、CSSをマスターすることができるはずです。