minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 CSS基本編(超初心者向け)

皆さんこんにちは!minablog管理人のみなです。

 

今回からようやくCSSの講座に入ります!

CSS始めたばかりの方へ向けて、絶対に知っていたほうがいい基本をご紹介します。

 

今までのHTMLを復習したい方はこちらからどうぞ。

www.mkmkblog.site

 

 

CSSってなに?

CSSってなんだと思いますか?

 

CSSとは、cascading sheetsのことです。

 

ページの要素を作るのがHTML、ページのデザインを決めるのがCSSとなります。

 

HTMLだけでもウェブページとしては成り立ちますが、見やすさやデザイン性を出したいのであればCSSは必須です。

 

なお、CSSを書かなくてもある程度の体裁が整っていることがありますよね。

 

f:id:mkmkblog:20191226164400p:plain

 

この画像のように<h1>minablog</h1>で指定すると大きい文字に、<p>これはminablogです ~ </p>で指定すると小さい文字になっています。

 

これは各ブラウザが持っている標準CSSで、各ブラウザによって若干異なります。

 

これをUser Agent Stylesheetと言います。

 

CSSの基本文法

 CSSは下記のような書き方をします。

 

P{  color : red ;  }

 

《用語》

p   =セクレタ (スタイルを指定する要素)

p{ } =宣 言  (スタイルを指定すること)

color =プロパティ(宣言の左側)

red    = 値   (宣言の右側)

 

このように用語を覚えておくと便利です。

 

例えば、こんなCSSを書いてみます。

f:id:mkmkblog:20200108200455p:plain

 

このCSSは<h1>minablog</h1>に対して

 

フォントサイズを15pxへ

フォントの色を青へ

 

という指示を出しています。

 

そうするとこのように見え方が変わります。

 

f:id:mkmkblog:20200108200343p:plain

このように、1つのセクレタのなかには複数のプロパティを書いてデザインを指定します。

 

なお、同じセクレタのなかに同じプロパティを書いたときは後から書いた方が有効となります。

 

基本的なセクレタの種類

①要素の指定

<h1>とか<p>を要素というのはHTML基本編で学習しましたよね。

 

要素を指定するときにはp{  }を書きます。

 

②*の指定

*(アスタリスク)はすべての要素に対して指定をすることができます。

 

③.class名の指定

クラス名でCSSを指定できます。

 

例えば<div class="content">をしていた場合は、.content{  }と書きます。

※.(ドット)の付け忘れに注意!

 

④#id名の指定

id名でCSSを指定します。

 

例えば<div id="article">としていた場合は、#article{  }と書きます。

 

CSSを書くときにいちばん最初にすること

CSSに日本語が含まれている場合、ブラウザによっては文字化けをする場合があります。

 

それを防ぐために、CSSファイルのいちばん最初に

@charaset "utf-8" ;

を記述しましょう。

 

実は書かなくても問題はありませんが、この記述をしなかったためにCSSがうまく読み込まれないこともあります。

 

CSS基本編まとめ

これからいよいよCSSの学習に入っていきます。

 

HTMLに比べるとかなり難易度が上がっていますし、正解もひとつだけじゃないので勉強しにくい分野となります。

 

でもCSSができるようになればおしゃれなウェブページがつくれるようになり、プログラマーに向けて大きく前進することになります。

 

一緒に頑張りましょう。

f:id:mkmkblog:20191227153348j:plain