け】2020年1月10日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はCSSの基本的な書式について、初心者向けに解説していきます。CSSの書式はとても単純で理解しやすいです。CSSを触るという人にとっては難しく感じるかもしれません。頑張っていきましょう!この記事の要点まとめCSSの書式CSSはデザインやレイアウトによるスタイルを整えるもの。セレクタ{プロパティ:値;}1.セレクタデザインを変更する対象となる要素の指定ができる。2.中括弧(波括弧)セレクタやその後のプロパティ:値は中括弧で加囲む。3.プロパティセレクタで指定した要素に対して何をするかを指定する。4.値プロパティで指定したものをどうするかを指定する。5.セミコロン値を指定した後にはセミコロンをつける。複数のセレクタを指定するには、セレクタとセレクタをコンマで区切る。コメントアウト「/*」と「*/」で囲むとコメントアウトできる。レスポンシブデザインスマホの画面サイズに最適化するために、レスポンシブデザインは必須。CSSを勉強するコツは覚えようとしないこと学校教育の概念は捨てるCSSのプロパティや値は覚えない。「丸暗記、ノートにまとめる」はやめるどのプロパティが何をするなどを丸暗記しない。CSSで勉強することCSSはコードを覚えようとするのではなく、実際に触れてみる。CSSの書式ハリボーCSSって難しそう。実際に書いてみると直感的で理解しやすいよ。Sheet(カスケーディング・スタイル・シート」の略称で、HTMLと合わせて使用されるスタイルシート言語です。文書をタグで加工ことで意味付けするHTMLに対して、CSSはデザインやレイアウトによるスタイルを整えるものです。この記事ではCSSの基本的な書式について解説していきます。CSSでできることやHTMLへの組み込み方については「CSSでできることと組み込み方【初心者向け】」の記事をご覧ください。基本書式ここからはCSSの基本的な書式について解説していきます。CSSの書式はとても単純で、「どの部分の、何を、どのようにする」という内容を書いていきます。下の画像を見て、CSSがどのように書かれているのかを確認してください。クリックで拡大1.セレクタデザインを変更する対象の要素を、セレクタを使い指定します。「どの部分の」という場所に当たります。この場合は、class属性がtitleと付いたh1要素を指しています。記述方法として、要素を指定する場合は「h1」、class属性のついたものを指定する場合は頭に.を付けて「.title」、id属性のついたものを指定する場合は頭に#を付けて「#title」のようにします。classやidについてよくわからないかもしれませんが、ここでは深く考えないで大丈夫です。セレクタを複数指定する場合は、セレクタとセレクタの間にスペースを入れましょう。2.中括弧(波括弧)セレクタの後にはその要素に対するプロパティや値を記述します。3.プロパティプロパティとはセレクタで指定した要素に対して「何を」するかを指定します。今回の例では、フォントの色を指定する「color」、文字サイズを変更する「font-size」がプロパティとして指定されています。CSSではfont-sizeのように、2つの単語をつなげる場合は「-」でつなげます。スペースをあけると正しく処理されないので気をつけましょう。プロパティは一つのセレクタに対して複数指定することが可能です。これについては後ほど解説します。値はセレクタで指定した要素に対して、プロパティで指定したものを「どのようにする」かを指定します。プロパティと値はコロン(:)で区切ります。今回の例では、titleクラスのついたh1要素(セレクタ)に対し、color(文字色を変えるプロパティ)を赤くする、font-size(文字のサイズを変更するプロパティ)を24pxにするという値がそれぞれ指定されています。5.セミコロンセレクタに対して{プロパティ:値}を指定したら、最後にセミコロン(;)を付けましょう。最後のプロパティに対するセミコロンは省略できますので、「{プロパティ:値}と次のプロパティとの間をセミコロンで区切る」という考えでもいいかもしれません。省略してしまうと、次にそのセレクタに対して新しくプロパティを追加するとき、最後のプロパティだった部分にセミコロンを付け忘れるということも考えられます。するとエラーがでてしまいます。逆に最後のセミコロンを省略することで、CSSを軽量化(ページの表示速度を早くする)できるというメリットもあります。どちらがいいかは自分の中でルール決めをしておきましょう。最後のセミコロンを手動では入力し、後から自動的に削除してくれるというツールもあるそうです。いったものを利用するのもいいかもしれません。複数の要素に対して同じスタイルを適応させたいときは、複数のセレクタを指定することができます。記述方法は「セレクタとセレクタをコンマ(,)で区切る」だけです。下の例ではh1要素とp要素に対して同じプロパティを使い、文字色を変更させています。CodePen.コメントアウトプログラムを書いていると、コードが長くなりどの部分が何の働きをしているのかが直感的にわかりづらくなってきます。それを防ぐために「コメントアウト」をするようにしましょう。記述方法はコメントアウトしたい部分を「/*」と「*/」で囲みます。下の例は別記事で使用したコードですが、それぞれがどの部分に対してスタイルを与えているものかを直感的にわかるようにしています。これは初心者向けということで細かく書いていますが、実際にここまで細かく書く必要はありません。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を使えばこんなことができる」ということを理解していきましょう。今回の例で言えば「文字色を変えられる」や「文字サイズを変えられる」などです。文字色変更」などとGoogleで検索できます。CSSで文字色を変えられるということがわかっていないと、検索をするまでにたどり着けません。検索すればコードがかけるという状態を、まずは目指しましょう。実際にコードを書いてみることが何より大切です。実際に書いてみると直感的に理解しやすく、あえて覚えようとしなくても、何度かコードを書いていけばプロパティ名も覚えます。丸暗記やノートにまとめるなどは、時間を無駄にするだけです。CSSを勉強するコツは、コードをあえて覚えようとせずとにかくたくさん触れていくことです。このブログでもこれからたくさんのHTML、CSSのコードを紹介・解説していきます。それを見て「こんな処理ができるんだ、こんなコードがあるんだ」ということを知り、実際に自分で書いてみることで、CSSをマスターすることができるはずです。pompom-stk関連記事CSSでできることと組み込み方【初心者向け】CSSでできること、組み込み方を初心者向けに記述した記事です。...タグ中の要素、属性とは?HTMLの基本的な書式こんにちは、Kosei()です。...初心者向け段落の作成方法【HTML】ブログやWebサイトを作成する上で、段落は必須です。...初心者向けリストの作成方法【HTML】HTMLでリストを作成する方法を、初心者向けにわかりやすく解説していきます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。