CSSとは？リセットCSSも解説【CSS初心者入門】

初心者向け！CSSとは？〜CSSの基本からリセットCSSまでサクッと解説〜
こんにちは、かなきち(@kanakichi0801)です

この記事を読むとCSSとは？から、CSSの基本の書き方とリセットCSSについて知ることができるよ！

CSSとは？
CSSの基本構造
CSSの記述ルール
実際にCSSを使うと
- CSS付属品の説明※飛ばしてOK！
リセットCSSとは？
- 余談
まとめ

CSSとは？

CSSとは？、Cascading Style Sheet(カスケーディング・スタイルシート)の略で、スタイルシートとも呼ばれます。ホームページのスタイルを指定するための言語であり、CSSは、HTMLと組み合わせて使われます。

スタイルとつくように、ホームページの見た目を指定するために使用します。ホームページを作る上でHTMLが骨組であり、そのHTMLにCSSで肉付けをしていく、そんなイメージです。

CSSは、HTMLよりも覚えることが多いため、少しずつ記事の中で紹介していきます。着実に１つずつ覚えて行きましょう！ただ、CSSの略とかは覚えなくて大丈夫です私もさっき知ったので(笑)

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}

CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

CSSの記述ルール

[ルール 1]セレクタを決めたら、{}を書き、その中にプロパティと値を記述します。

セレクタ{}

[ルール 2]プロパティと値の間を:(コロン)で繋ぎます。

セレクタ{
　プロパティ: 値
}

[ルール 3]プロパティと値のセット、その終わりには;()セミコロンをつけます。 ※;(セミコロン)は忘れがちなので、忘れないように！

セレクタ{
　プロパティ: 値;
}

CSSの書き方のルールは3つ！
セレクタを決めたら{}(カッコ)をつけ、中にプロパティと値を記述する。プロパティと値は:(コロン)で繋ぐ、最後に;(セミコロン)で終わる。このルールは覚えましょう。

実際にCSSを使うと

次回の予習として、リセットCSSの説明をします。先ほどの説明で、CSSの書き方の説明は終わりです。勉強する上で実際のコードを見るのが一番！

ということでどーん！

@charset "utf-8";
/*--------------------------------------------------------------
   RESET
--------------------------------------------------------------*/
html{color:#000;background:#fff}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-size:inherit;font-weight:inherit;}
legend{color:#000}
*{zoom: 1;}
img{vertical-align: bottom;}
:focus{outline:none;}

これがCSS、種類としてはリセットCSSです。

ファイルの作り方は、以下の記事で説明した手順と同じです。テキストエディタに上記のソースコードをコピペして.cssをいう拡張子で保存します。保存したファイルのことをCSSファイルと言います。 blog.mimipen.net

CSS付属品の説明※飛ばしてOK！

@charset "utf-8";は、文字化け防止用のコードです。
以下は、役割がわかるようにタイトルとしていれています。※こちら任意ですので書いても書かなくても大丈夫です。

/*--------------------------------------------------------------  
   RESET  
--------------------------------------------------------------*/

リセットCSSとは？

リセットCSSとは、ブラウザの初期スタイルをリセットするCSSのことです。

ブラウザにはそれぞれ違ったスタイルが組み込まれています。初期のスタイルが残っているとブラウザごとに見え方が違ったり、コーディングに支障が出るので、それをリセットCSSで打ち消す、または整えます。

ホームページを作る前には必ず、リセットCSSを読み込ませると覚えましょう。

余談

[2020 リセットCSS]などで検索をすると以下のようなサイトがたくさんあります。
2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

これを使わないとダメというのはありませんが、コードが少なくシンプルでわかりやすいので、私は YahooのリセットCSSを使用しています。

また、そのまま使うのではなく、半角を削ったり自分なりに少し書き換えています。

なぜ半角スペースを削るのか？
目には見えませんが半角スペースにも半角スペースを表す情報が詰まっています。コードを減らして表示速度をあげることはコーディングでもっとも重要なことです。そのため私たちは日々、無駄なコードを削ったり、時には圧縮をかけたりして、いかにホームページを早く表示させるかを追求する必要があります。

まとめ

今回は、CSSからCSSの書き方、リセットCSSの触りを解説しました。 HTMLはホームページの骨組みで、CSSはそこに肉付けをしていくイメージで使用します。そしてホームページを作る前には必ずリセットCSSを読み込みましょうね。

2019年リセットCSSなどでググるとたくさん出てくると思いますが、試してみないと自分のコーディングに合うものかは分かりません。参考までに上記のリセットCSSはシンプルで分かりやすいのでおすすめです。

次回から一緒にホームページを作って行くよ！(多分)
そこで使用するデザインデータをチラ見せ！