みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

CSSの基本からおすすめのリセットCSSまでサクッと解説〜

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

かなきち

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



CSSとは?

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

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

CSSは、HTMLよりも覚えることが多いため、少しずつ記事の中で紹介していきます。着実に1つずつ覚えて行きましょう!ただ、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を読み込ませると覚えましょう。

余談

[2019リセットCSSおすすめ]などで検索をすると以下のようなサイトがたくさんあります。
shiru-web.com

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


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

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

まとめ

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

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

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

コーディング練習用デザインデータ
コーディング練習用デザインデータ(圧縮版)


このサイトを作って行くよ!引き続き、参考書を買わずに独学で勉強できる記事をメインで載せていますのでよろしくどうぞ!

最後までご覧いただきありがとうございます。この記事がいいなっと思ったら、ぜひ読者登録もお願いいたします!



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)