CSSもHTMLと同じで、よく使うものを覚えておけば、意外と簡単にかけます。ただ、CSSの方が色や配置など指示を出すものが多いので、最初は混乱しやすいですね。
僕も最初の頃は、「これはなんの指示を表す言葉だっけ」「ここの余白を増やすにはどこを設定したらいいんだっけ」と迷ってしまうこともありました。
ポイントをまず抑えることで、そう言った悩みを減らしていきましょう。
CSSで何ができるのか
細かく言ってしまうと、色々出てくるんですが、大まかにいうとこんな感じです。
文章の装飾
文章、文字の色・太さ・大きさ・下線の種類など、ただの黒文字を装飾することができます。
ワードやエクセルだとボタンを押すことで色々文字の編集をすることができると思いますが、そのボタンの代わりにCSSで指示を出して変えていくイメージです。
画像やまとまった文章などの位置決め
HTMLで画像を入れることはできるんですが、ページの右側に配置するかとかの指示まではできません。
そこで出てくるのがCSSです。段落のかたまりだったりリストの位置だったりさらには枠線で囲んだりと言ったことも同じくCSSを使うことで解決します。
CSSでのルール
CSSの書き方の形はこちら。
ピンク色の部分を”セレクタ”、青色の部分を”プロパティ”、オレンジの部分を”値”。
この3つを書くことで指示を出すことができます。
セレクタ
HTMLのどのタグの部分かを書くところです。 <h2></h2>で挟んでるところならh2を。<p></p>で挟んでるならpと書きます。
プロパティ
書いたセレクタに対して何を指示するのかを書きます。ここの指示が抜けていると、どんなに次で説明する値が合っていても反映されません。
よくある間違いとして、
- 綴り間違い
- 全角で書いてしまってる
- 似たようなプロパティと勘違いしている
などがあります。
僕はよく綴りを間違えてて、しかもそれに気づかず「え、何が間違ってるのかわからない」という状態を何度も経験しました笑
値
プロパティに書かれた指示を具体的にどうするのか、を書いていきます。
プロパティで「color」と書いたなら具体的に何色にするのか (red,blue,など)
文字の大きさなら、20px,30pxなど具体的な指示を出していきます。
CSSを勉強して、自分の価値をあげよう
CSSがなかったら、素っ気ないただの文章と画像の羅列になるんです。
それを自由自在に変更できるのが、CSS。
そして、そんなCSSは誰でも扱える訳ではなく、今回紹介したような注意点や知識を知らないといけません。HTMLとCSSどちらもマスターできれば、自分で稼ぐという選択肢も見えてきます。
