この記事を読めば簡単にCSSについて理解することができます。
CSSとはHTMLでお絵描きしたものの色塗りです。
HTMLで文字を書き、それに対して色を塗る作業
というイメージで良いでしょう。
そしてこれらHTML/CSSを会得すれば様々なメリットがあります。
- ブログのデザインを自分で行える(有料テーマ不要)
- プログラマー副業として稼ぐことができる
- 本職を年収の高いプログラマーに転職できる
前記事と合わせて2つの記事を覚えるだけで
もう君は立派なプログラマーだよ！
今回の記事でわかるのは以下の通りです。
- ・CSSとは
- ・CSSの基本の書き方
- ・実践での書き方
この記事を読む前にHTMLを取得していたほうが、
理解力が高まりますので是非こちらの記事から読んでください。
あともう少しでプログラマー
だな！
少し厄介だけど頑張って覚えよう♪
また、最低限ブログ記事を作成するために
私が使うたった4つのショートカットキーが
知りたい方はこちらです。
CSSとは：塗り絵です
HTMLで絵の形を作ったので、
次はその絵に色を塗っていく作業です。
それがプログラミング言語CSSです。
CSSは以下の画像のことをやっています。
英語多くてわからんわ（笑）
もうパスｗｗ
ちょっと待って！
難しそうに見えて簡単だから
最後まで見て！！
CSSでの基本の形はこちらです
前記事で書いた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は覚える必要が全くないです。
こちらのサイトが色の数字を教えてくれるので、
引用しましょう。
| 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で流れている通り実際に働いている現役講師や、
コースの充実さがすごく、やってよかったと本当に思っています。
詳しくはこちらのサイトで記載あるので
悩んでいる方はほんとにおすすめなので是非無料体験からでも！
口コミサイトはこちら
無料体験はこちらから
