minablog

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

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

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

 

小学生でもわかるHTML/CSSタグ講座ということで、CSSの基本を学んでいきます。

 

今回ご紹介するのは"長さの単位"と"ボックスモデル"、そして"borderプロパティ"について勉強していきましょう。

 

難しいことはなく、簡単に挑戦することができます。

 

前回の講座 CSS基本編①についてはこちら。

www.mkmkblog.site

 

そして過去の講座一覧を見るためにはこちらのまとめページをご覧ください。

www.mkmkblog.site

 

目次

 

長さの単位

長さの単位はいくつかありますが、その中でいちばん使う3つの単位を覚えておきましょう。

 

・px:絶対単位。ピクセルと読む

・em:相対単位。エムと読む

    要素のフォントサイズを親要素として、1em=100%となる

・%:相対単位。パーセントと読む

 

これらが最もよく使う単位です。

 

pxと%はわかりやすいですがemは相対単位となるため、親要素のサイズを確認しておきましょう。

 

ボックスモデル

ボックスモデルとは、HTMLで記述された要素には長方形で表される枠が自動で作られます

 

この枠をCSSで調整することでボックスを大きくしたり小さくすることができるのです。

 

しかし、その長方形の枠は複数に分かれているため、適切な場所を選んでサイズを指定する必要があることに注意しましょう。

 

さて、ボックスモデルについて下の図で確認します。

f:id:mkmkblog:20200214105520p:plain

 

図のように、表示領域・境界線・余白(margin/padding)の3つが揃っていることでボックスモデルが作られています。

 

それぞれ詳しく見ていきましょう。

 

content:表示領域

読み:コンテント

 

要素自体を表すので、例えば<div>Hello World</div>と記述した場合はこの"Hello World"部分がcontentとなります。

 

width:幅

読み:ウィス

 

意外と皆さん読めないみたいなので読み方もちゃんと確認しておきましょう。

 

要素の幅を表すため、先ほどの長さの単位を使って指定します。

 

height:長さ

読み:ハイト(ヘイトではありません)

 

要素の長さを表し、長さの単位を使って指定します。

 

boeder:境界線

読み:ボーダー

 

表示領域の外側にあり、境界線の内側、外側には余白が作られています。

 

boederプロパティを使うことで境界線を黒い線として表示させたり、破線にするなどデザインを変えることができます。

 

borderプロパティに関する詳しい説明は記事の下に記述しています。

 

padding:境界線内側の余白

読み:パディング

 

境界線の内側にある余白のサイズを指定することができます。

 

paddingの一括指定プロパティ

《上下左右それぞれ指定する場合》

padding : (上)  (下)  (左)  (右)

 

《上下と左右が同じ数字になっている場合》

padding : (上下)  (左右)

 

margin:境界線外側の余白

読み:マージン

 

境界線の外側にある余白のサイズを指定することができます。

 

marginの一括指定プロパティ

《上下左右それぞれ指定する場合》

margin : (上)  (下)  (左)  (右)

 

《上下と左右が同じ数字になっている場合》

margin : (上下)  (左右)

 

 borderプロパティ

よく使うborderプロパティ

・none:なにも表示しない

・solid:1本の実線

・double:2本の実線

・dashed:破線

・dotted:点線

 

おしゃれなデザインのborderプロパティ

・groove:立体的な線。くぼんで見える

・ridge:立体的な線。隆起して見える

・inset:領域全体がくぼんで見える

・putset:領域全体が隆起して見える

 

borderの一括指定プロパティ

border : (線の太さ)  (線のスタイル)  (色) ;

 

《Example》

border : 1px dashed red ;

➢意味:線の太さ1pxで赤色の破線を表示する

 

borderの角を丸めるプロパティ

ページ内にボックスを作った場合など、角を丸めるためのプロパティです。

 

角を丸めたほうが見ている側としては優しい印象に見えますので、サイトの雰囲気に応じて使えるようになるとより良いデザインになります。

 

border-radius : 〇px ; 

 

《Example》

f:id:mkmkblog:20200214110605p:plain

 

CSS基本編のまとめ

長さの単位やボックスモデルはCSSのプロパティのうち一番使います。

 

これらさえ押さえてしまえば一般的なサイトをコーディングする際のイメージがつきますので、確実に押さえておきたいところです。

 

基本編が終了したら、次はリストマーカーの勉強に入りましょう。

 

リストマーカーについてはこちらに詳しく書いてありますので是非ご覧ください。

www.mkmkblog.site