こんにちは、かなきち(@kanakichi0801)です

CSSとは？

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

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

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

CSSの基本構造

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

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}

セレクタ：どこのデザインを変更するか(※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ファイルと言います。

WEBページを超簡単に作成する方法

この記事は、みみぺんプログで書いていた記事(ホームページ制作を10分で体験！HTMLをコピペで簡単にページ作成)の内容を…

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はシンプルで分かりやすいのでおすすめです。

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

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

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