【マジで何？！】謎のCSSに簡単に触れていこう…。
CSSってなに？右も左も分からないよ。
正直、私も全く分かりません。一緒に、頑張って行きましょう。
今回は、タイトルから分かる通り、マジで何？って思っている方に対しても、理解できるように、分かりやすく説明できるか不安ですが、簡潔にまとめていこうと思います。
本題の、CSSにとは一体…。
CSSとは、HTMLの要素に対して色や大きさ、配置などを指定して、ページをデザインするための言語のことです。
Cascading Style Sheetsとは、HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
なるほど、要するにデザインをするということですね。
ファイル？！が別？？
CSSは、HTMLとは別のファイルに書くことになります。HTMLで用意した、要素に対して、CSSを用いて、「どこの」「何を」「どうするのか」を指定して、変えることができます。
HTMLと同様に、かなり重要な言語ですね。
このときの説明は、以下の通りです。
| 「どこの」の部分→セレクタ
「何を」の部分→プロパティ |
ここはものすごく重要なので、しっかりと覚えましょう。
文字色を変えてみよう！
「color:#ff0000;」のようにカラーコードで色を指定します。
ということは、カラーコードも覚えないといけないの？
いえいえ、カラーコードは詳しく知る必要はありません。
※しかし主要な色であれば例えば青色や赤色など用などは、英語でレッド・ブルーなどと指定することができます。
CSS を書くときの注意点について
CSS を書くときも、以下のようにインデントをします。
ん？わかんない、インデントって何？
字下げとは、「行頭に空白を設けて文字開始位置を他行よりも下がった位置から始めた文字組み」を指す用語である。
また、 CSS のプロパティの末尾には、コロン行末にはセミコロンを付ける必要があります。
ちょっと待って、少し詳しくゆっくり教えて。
「何を」の部分→プロパティ
これは、さっき見たやつだ！
コロン は、欧文の約物のひとつ「:」である。自然言語、数学、コンピュータ言語等に用いられる。
普段使っている、「:」これがコロンと言うんだね。逆に、セミコロンは何なの？？
セミコロンは、欧文の約物のひとつで、「;」と書き表される。その形式はピリオドとコンマとの合体であり、これらの中間的役割を担う。 なお、日本語の文章中では滅多に使われないが、顔文字などでは比較的よく用いられる。C言語やJava等、多くのプログラミング言語で必ずと言って良いほど使われる記号でもある。
あれさっきの、コロンとセミコロンってほとんど同じみたいだね。
以下も一応、今後、英語の句読点（punctuation）として、出てくるかもしれないので参考にしてみてください。
| カンマ（ , ） ピリオド（ . ） セミコロン（；） コロン（：） ダッシュ（ − ） クォーテーションマーク（“ ”） |
なるほど、自分が知らないだけで、いろんな違いがあったんですね。
【本記事のまとめ】とりあえず挑戦してみよう！
最後までご覧頂きありがとうございました。
今回は、少し CSS も学ぶにあたって頭が混乱してしまったので、この辺で終わりにしときます。
また、明日しっかりとした記事を書きなおそうと思います。具体的にはソースコードを実際に書きながら、記事を構成していければいいかなと思います。
あわせて読みたい記事
こちらの記事も是非参考になると思うので、お時間のある方はご覧ください。
