~Hobby~

CSSとは?誰でも理解できるCSSの書き方【簡単プログラミング】

この記事を読めば簡単にCSSについて理解することができます。

CSSとはHTMLでお絵描きしたものの色塗りです。

HTMLで文字を書き、それに対して色を塗る作業

というイメージで良いでしょう。

そしてこれらHTML/CSSを会得すれば様々なメリットがあります。

  • ブログのデザインを自分で行える(有料テーマ不要)
  • プログラマー副業として稼ぐことができる
  • 本職を年収の高いプログラマーに転職できる
ちょこデニム
ちょこデニム

前記事と合わせて2つの記事を覚えるだけで

もう君も立派なプログラマーだよ

今回の記事でわかるのは以下の通りです

  • ・CSSとは
  • ・CSSの基本の書き方
  • ・実践での書き方

この記事を読む前にHTMLを取得していたほうが

理解力が高まりますので是非こちらの記事から読んでください

デニ男
デニ男

あともう少しでプログラマー

だな!

ちょこ男
ちょこ男

少し厄介だけど頑張って覚えよう♪

また、最低限ブログ記事を作成するために

私が使うたった4つのショートカットキーはこちら

CSSとは:塗り絵です

HTMLで絵の形を作ったので次はその絵に色を塗っていく

作業です。

それがプログラミング言語CSSです。

CSSとは
HTMLに色を塗ること

CSSは以下の画像のことをやっています。

デニ男
デニ男

英語多くてわからんわ(笑)

もうパスww

ちょこデニム
ちょこデニム

ちょっと待って!

難しそうに見えて簡単だから

最後まで見て!!

CSSでの基本の形はこちらです

HTMLで書いたグループ{ 英語で指示を記載:どうしたいかの値を記載; }

前記事で書いたHTML(h1とかp)を{}の前に置き、

その中に自分のやりたいことを指示します。

その他CSSのルール

  • ・ここにHTMLを{}
  • ・{}の中に指示を書く
  • ・大文字NG
  • ・指示の後には;
  • 自分でつけたHTMLクラスの名前の前には.を
デニ男
デニ男

覚えること多すぎるし

意味わからないww

ちょこ男
ちょこ男

ゆっくり少しづつ理解していこう

CSSの書き方/手順

CSSの種類はお使いのPC等により数は異なりますが、

HTMLの時同様に主要なもの以外は覚える必要ありません。

例を混じえて解説します

①指示を出したいHTMLを決定する

まずはどこのなにをどう変えたいか決めます。

なのでh1やらpやら自分の変えたいHTMLの文字を

{}の前に置きます。

例)

h1を変えたい! h1{}
pを変えたい! p{}

②どこの部分を変えたいか

まずはなにを変えたいか決めました。

次はどこを変えたいかです。

これは{}の中を変えていきます。

例えば背景の色を変えたいと思ったら

h1{background:色;}と書きます。

ここの部分は文字の色を変えたいならfont-colorだし

文字の大きさを変えたいならfont-sizeだし、様々です。

どれも意味わからない英語を使っているわけではなく、

文字ならfontだし、背景ならbackgroundで

場所を英語で指定しているのです。

さらに例を出すと

右への指定はright左への指定はleftです。

デニ男
デニ男

英語だから意味わからなかったけど、

そうやってたのね~

ちょこ男
ちょこ男

ここを理解できればだいたい

把握できるよね~

例)

指示を出したい場所をh1とする

文字の大きさを変えたい h1{font-size:}
背景に画像を載せたい h1{background-image:}

③どういう風に変えたいか

ここまで理解できればあとはその指定されたものを

どんな風に変えたいかです。

例えば

文字の色を赤にしたいとすると

h1{font:#red;}

となります。

ここも難しく考える必要はなく、

自分が赤に変えたいのなら赤と英語で記載するだけです。

ただし気を付けなければいけないのは

色を指定したい時のルールで色の前に#を

つけなければならないルールがあります。

またはrgb()で表す方法もあります。

例)

指示を出したい場所をh1とする。

背景を赤にしたい h1{background-color:#red;}
文字を赤にしたい h1{font-color:#red;}
ちょこデニム
ちょこデニム

英語だから難しく思っちゃうけど

実はこんなに簡単なんだよ~

ちょこ男
ちょこ男

文の最後に;つけるの忘れないでね

私が頻繁に使用しているCSS7選

CSSの種類はHTMLに比べてとても多く存在するので

種類も大量に使っています。

今回は実践で使うものの上位7つを今回はご紹介します。

背景色変更:background-color

例にも多様しましたが、これはかなりの頻度で

使います。

上記しましたが、色を変える時のルールは以下です。

  • ・色の前に#
  • ・色を#で書かない時はrgb(,,)で表記
  • ・redやblue等で良い色もある

色の数字、rgbは覚える必要が全くないです。

こちらのサイトが色の数字を教えてくれるので

引用しましょう。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表
h1の背景を赤にしたい h1{background-color:#red;}
h1の背景を灰色にしたい h1{background-color:#808080;}

文字の大きさ変更:font-size

文字を変える時にも

少しだけルールがあります。

  • ・指示の後に単位(pxかrem)を書く
  • ・smallやlargeでも表示可能

私は単位をpxで使うことが多いですが、

remや%の表記の人もいるので間違いに注意。

h1の文字の大きさを20pxにしたい h1{font-size:20px;}
h1の文字の大きさを1.5remにしたい h1{font-size:1.5rem;}

左寄せ・右寄せへの変更:text-align,margin

ちょっとくっつけたい時や、ぴったりくっつけたい

時に自由に変更できます。

表記の方法はメインで使うのは2種類あり

text-alignかmarginで幅の変更を行う方法です。

h1の文字を左に寄せたい h1{text-align:left;}
h1の文字を右に寄せたい h1{margin-right:0;}

ちょっとだけ空間を開けたい:margin,padding

上記でmarginを使用しましたが、これは

指定のものをどれくらいの空間開けるかを指定します。

指定の際はmargin:上,右,下,左の順で書けば四方の

間隔の指定ができます。

似たものでpaddingというものもあります。

しかし最初はmarginのみの使用で良いと思います。

ちなみに違いは文字からの空間の広さかそのクラスの

外枠からの広さかの違いです。

h1を左から少しだけ開けたい h1{margin-left:10px;}
h1を上下では10px、左右では20px感覚を開けたい h1{margin:10px,20px,10px,20px;}

横幅を変更:width

pxや%での指定が可能です

h1のサイズをいまの半分にしたい h1{width:50%;}
h1のサイズを20pxにしたい h1{width:20px;}

高さを変更:height

横幅の時と同様のルールでpxや%を使う

h1の縦幅をいまの半分にしたい h1{height:50%;}
h1の縦幅を20pxにしたい h1{height:20px;}

CSSを重ねて使う:position

重ねて使うことで◎やチェック等複雑な形のものが

作れるようになります。

h1とh2を重ねたい h1{position:relative;}
h2{position:absolute;}

まとめ:理解するまでひたすら実践あるのみ

いかがだったでしょうか??

やっていることはお絵描きの塗り絵です。

あとはどれだけ実践で思った

作りたいものを作れるかです。

他サイトを真似して作ってみるとか、

一つオブジェクトを作ってみる等して

是非自由にCSSをできるようになりましょう。

これらを覚えた後は実践と反復練習をすると

どんな場面でも使えるようになります。

私がHTMLを覚えるための勉強教材は

本とオンラインプログラミングスクールでした

本ではこちらがおすすめです

この本は2019年に発売したのですが、

現在(2021年)の楽天デザイン・グラフィック部門ランキングでも1位

をとっているとても人気のある1冊です。

この本を読んでおけばHTMLとCSSの使い方は

完璧に覚えることができます。

また、その他ページデザインに関することや

画像無料素材ページや優れたデザインのページを

知ることができます。

買って損はない最強のHTML&CSS入門書籍です!!!

また本を購入する前にコチラの記事でレビューや、

記事のまとめ、wordpress用に補足情報もたくさん記載して

あります。

購入前に是非一度読んでから購入した方が良いです。

ちょこデニム
ちょこデニム

この本をきっかけにプログラミング

って意外とできるかも?ってなりました♪

デニ男
デニ男

プログラミングを初めて一冊目の本

がこの本だったゾ

ちょこ男
ちょこ男

わかりやすく、画像もいっぱいあるから

読みやすいよ

プログラミングスクールはこちら

こちらでプログラミングを受講し、私は覚えました。

cmで流れている通り実際に働いている現役講師や、

コースの充実さがすごく、やってよかったと本当に思っています。

詳しくはこちらのサイトで記載あるので

悩んでいる方はほんとにおすすめなので是非無料体験からでも!

口コミサイトはこちら

無料体験はこちらから
ちょこブロ
タイトルとURLをコピーしました