上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。
Web制作にとても大事な【CSS】について学ぶよ
CSS?カスタード・スーパー・ショートケーキかな〰
なんだか美味しそうだね💕
ええっ！？違うけど……（笑）
CSSとは
CSS(Cascading style sheets) カスケーディングスタイルシートと呼びます。
Cascadingは英語でCascadeの現在進行系です。滝が幾段にも重なっている状態だそうですが、少しわかりにくいとおもいます。簡単に言うと物事がだんだんと連鎖すると覚えてください。こういった意味からCSSは優先順位が決められており後から入力したものが優先順位が高くなるようになっています。
Style sheetsは文章はそのままで色や位置をかえることのできるシートです。
WebページにおいてHTMLは【文章】CSSは【見た目である装飾】にを使われます。
CSSは見た目を大きく変える事がでるんだね
CSSで出来ること
- 余白を調整
- 背景を変更
- 文字の色やフォントを変更
CSSは出来ることが多い分、基本がとても大事になってきます。ここをしっかり抑えておくことで作業効率があがります。基本の形はしっかり頭に入れておきましょう。
CSS基本の形
CSSでは基本の形が重要となります。セレクタ（どの部分を変更するのか）・プロパティ（何を変更するのか）・値（どのように変更するのか）この3つが大切です。ちなみに下記の図の【｛｝】波括弧【：】セミコロン【；】セミコロンの3つの記号も使いますので覚えておきましょう。
HTMLとCSSを使った文字と装飾
HTMLには【<h1>そろばん検定５級を受けます</h1>】と入力します。
CSSには【h1{color:red;}】を入力します。
実際にVSコードというものを使ってコードを書いていきますがその説明はここでは省きます。
※基本的にコードは半角英数字を使用しますがここも実際使う時に説明します。
HTML・CSSに入力
CSSがある場合は赤文字で文字を表現することができました。
このようにCSSは文字の色を変更できます。他にも文字の大きさ・文字の位置・フォントの変更など様々な事が出来るようになります。CSSのプロパティも何種類もあります。必要な時に調べて使っていけばいいので焦らずに１つづつ覚えていきましょう。
CSSを理解すると沢山の事が出来ることになるんだ
Web上の魔法使いになれそうでワクワクしたよ💕
夢が広がるとてもいい考え方だね
次回はWebの仕組みについて学んでいきます。
今回は装飾をWeb上に表現するCSSについて学びましたが、Webの仕組みを知ることでHTMLやCSSを使う理由が明確になります。これからの学びがよりWeb制作を楽しいものにしますのでWebの仕組みの知識も身につけていきましょう。
