プログラミング初心者の方のほとんどが通る道となるHTMLとCSSのうちのCSSの方を今回は紹介していきます。
CSSにはいろんな書き方があり、思っている以上にできることがたくさんありますし奥が深いです。今回はCSSの説明と簡単な書き方から、反映方法までを紹介していきます。
- CSS用のファイルを用意
- HTMLから読み込む
- 書き込む
CSSとは？
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は正式名称が長いんですが、省略されてCSSと呼ばれています。
HTMLとCSSはいつもセットで出てきます。なので、HTMLをまだ学習してないんだったら先にHTMLそのあとCSSでいいと思います。
簡単にCSSが何かと説明しますと、色や文字のサイズや要素の位置を変えたりできます。人でいう化粧とか服とか整形でしょうかね。色々と作り変えて見た目を変えることができちゃうんですね！
この文字が赤いのもCSSで書かれているためです。
CSSがあるだけで見た目をキレイに整えたりできちゃうんですね！
CSSを書いてみよう！
- CSS用のファイルを用意
- HTMLに読み込む
- 書き込む
１〜３の手順でCSSを書いていきたいと思います。まず始めにサンプルのHTMLとCSSのファイルを表示させときます。これを参考に、説明していくので最初に目を通しといてください。それとHTMLのファイルは先に作成した前提で話していきます。もしHTMLを知らない方は下の記事を参考に、先にHTMLをしといてください！
もしテキストエディタを用意したい人は下の記事を参考にしてください！
1.CSS用のファイルを用意
上のサンプルのようにindex.htmlのファイルとstyle.cssのファイルを作ります。
CSSのファイル名はなんでもいいですが、最後は『.css』にしてください。
『〇〇〇〇.css』
このファイルをindex.htmlと一緒の場所に保存してくださいね！またはCSSのフォルダを作ってその中にCSSのファイルを入れることも可能です。（こっちの方がよく使う）下を参考にしてください。
同じディレクトリの場合
ファイル名
index.html
style.css
別のディレクトリの場合
ファイル名
index.html
css
style.css
とりあえず簡単な方は同じディレクトリの場合なんで簡単な方からやってみましょう！
＊cssのフォルダを作った場合はHTMLから読み込むパスが少し変わるので気をつけてください！
2.HTMLからCSSを読み込む
CSSはHTMLから読み込む場合と直接HTMLに書き込むやり方の２つがあるんですが、ファイルを分けたほうがキレイなので、今回は別のファイルに分けるやり方でしますのでHTMLからCSSファイルを読み込む必要があります。
HTMLには<head>のタグ内に呼び込むための記述をしていきます。その書き方は、
同ディレクトリ
<link rel=“stylesheet“ href=“./style.css“>
別のディレクトリ
<link rel=”stylesheet” href=”./css/style.css”>
この書き方は、どうなってるのって考えなくてもこのまま覚えちゃいましょう！考えてても時間が勿体無いので、数学の公式みたいに覚えちゃって大丈夫です！
読み込む時に重要となるのは、『href=””』この部分でもしCSSが反映されていないときはこの部分が間違っていると覚えてもらって間違いないです。『./フォルダ名/ファイル名』の書き方でフォルダが無い時は『./ファイル名』だけですので注意してください！
3.CSSを書き込む
CSSの書き方は、HTMLの要素の名前やタグを指名してその部分に対して表示などを変えていきます。簡単にいうと、『A君赤色に変わって』と命令してA君を赤色に変えます！
HTML
<div class=”a”>A君</div>
CSS
.a {color: red;}
こんな感じです。書き方は、
名前の指定 {指示: どうするか;}
名前の指定
.a(.はclassの意味）
#a(＃はidの意味)
div(タグに直接も可能）
指示は様々
color（文字の色）
background-color（背景の色）
bold（文字の太さ）
border（ボーダーに関すること）
どうするか
red（色の指定）
900（数値で太さの指定）
1px solid #000（太さ 線の種類 色の指定）
CSSは表示の仕方を変えるだけでもものすごい種類があるので全部は紹介しきれないんですが、その都度やりたことに関して検索すれば紹介してくれるとこあるので、つまずくたびにどんどん検索しましょう！
最後にサンプルで書いてたのを表示したのを紹介します。
表示方法はHTMLのファイルをダブルクリックしたら反映されてるはずです！
まとめ
HTMLと同じく簡単に最初は表示をできますが、実際にCSSを使って書いているとあとあと難しくなります。書き方にも色々あって今勉強しただけでは不十分ですが、ここまでやり切ると、次のステップに上がりやすくなるので頑張ってやりきりましょう！
メンターがついてくれるプログラミングスクールはおすすめなのでよかったら下の記事も参考にしてください！
