初心者向け!CSS単語解説 CSSとは?

1分でわかる当ブログ記事の概要!!

・フラッターブログ初めてのCSS単語解説!!!

・CSS単語解説はシリーズにするよ!

・超初心者や初心者の方向きかも!

・classについて!!

・今回はbackgroundcolor:●●;について!

・colorについて!

にほんブログ村 にほんブログ村へ
クリックいただけると嬉しいです!
PVアクセスランキング にほんブログ村
クリックいただけると嬉しいです

寒いと思い着込んで外に出たら暑くてアイスを食べすぎたmasakiです。

フラッターブログでは初心者向けのHTML単語講座の記事を書いています。

HTMLを最低限覚えるのはいいのですがせっかく覚えるならセットで覚えておきたいのがCSSです!

そこで今回から初心者向けのCSS単語解説という記事をスタートしたいと思います。

当記事ではCSSでかなり重要と言えるclassとbackground-colorついての解説をします

あわせて読みたい
429 Too Many Requests
HTML単語解説については⬆️⬆️⬆️⬆️⬆️!!
目次

classとは?!

まずはCSSで大事なclassについて解説していきます。

classを覚えたら半分は覚えたと言っても過言ではありません。

初心者脱出のためにもぜひ覚えておきましょう!!

classとは、正確にはクラスセレクタと呼ばれてますが基本classのままでいいと思います。

クラスは『分類』などと考えるとわかりやすいかもしれないですね!

名前を書く前の名札みたいに最初は何も記載されてないのですが、
プログラムをやる際に名前のついていないところに名前を名札に書いて貼り付けることにより、
プログラムの部品として初めて扱うことのできる物になります。

クラス名(分類名)を使った指定では、そのクラス名(名札)がつけられた部分のみに、
独自のスタイル(色や文字サイズのこと)を適用させることができます。

例えば、

フラッターブログは良いブログだ とコメントをする場合になりますが、

まずHTMLでの作業が必要です!

HTMLの作業は、
<h2 class=”flutterblog“>フラッターブログは良いブログだ</h2>

上記のflutterblogという部分がクラスになります!!

HTMLでの作業はこれだけで終わりです!!

CSSでの作業は、
flutterblogというクラスを作った後文字色を赤にしたい場合、

.flutterblog {color : red; }

これだけで文字色が赤になります!!

意外と簡単と思った方いらっしゃるかもしれません!!!

こんな感じでクラスの作り方さえわかれば意外と簡単なので覚えて欲しいです!!!

background-colorとは?

classを覚えた後は一番分かりやすくて一番大事になるbackground-colorを紹介いたします!!!

background-colorはざっくりお伝えするとそのまんまですが背景です。

例えば、

フラッターブログは良いブログだ

上記のような感じで文字の背景色を変えることができます!!

文字の印象が変わってくるのでかなり大事な工程になります。

やり方としては、

HTMLでは<p class=”flutter”>フラッターブログ</p>

CSSでは.flutter { background-color : red;}

上記の感じでCSSを入力すると背景が変わります!!

色は様々な組み合わせがあります!

例えばですが、lightgreen, limegreenなど他にも表記によって色が変わります。
気になる方はCSS 色 などで検索してみてください!!

今、ブログをやってるけどやり方がわからないという方もいらっしゃるかと思います!

CSSの入力の際は上記の太文字の部分をコピペでできるので試してみてください!!!

colorとは?

先ほどはbackground-colorをやりましたが先ほどは背景の色を変えるやり方をやりました。

背景ではなく文字を違う色にしたい場合があると思います!

そこで必要になるのが『color』です!!

color : ●● ; を利用することで色を変更することができるようになります。

やり方としては、

<p class=”flutter”>フラッターブログ</p>

.flutter {color : red;}


上記のようにやるとCSSを入れると文字色が変わります!!

文字色にもいろいろな色ができます!!

background-colorと同じように様々な色が実装できますのでやってみてください!!

いかがでしたでしょうか!

今回はclass, background-color, color についてやってみました!!

今回実施したredとかblue以外にも16進数というカラーコードでも指定できます。

覚えてきたらとか慣れてきたら調べて使用するのもいいかもしれませんね!

ちなみに#FFFFFF こんな感じの書き方になります!!

今後もやっていく予定ですのでTwitterなどにコメントなどいただけると嬉しいです!!

それでは!

ブログ日記始めました!

masakiの日記

完全感覚programmerという日記を始めたのでよかったら読んで欲しいです!

なるべく多く更新できるようにブログより更新していきます!

それでは次回の記事で!

にほんブログ村 にほんブログ村へ
クリックいただけると嬉しいです!

個人的にオススメ記事になります!!

あわせて読みたい
429 Too Many Requests
フラッターブログ
看護師がお勧めする太らない糖質の取り方とは? ~ フラッターブログ 1分間でわかる当ブログ記事について ☑糖質の働き ☑糖質の多い食べ物 ☑隠れ糖質 ☑糖質の㏠摂取目安量 みなさんこんにちはkoukiです。 近頃はコロナの影響でなかなかご...
フラッターブログ
作業用にもオススメ! ゆったり日常アニメ紹介 ~ フラッターブログ クリックいただけると嬉しいです! クリックいただけると嬉しいです 登場人物紹介 フラッターブログの住人アニメと競馬とアイドルをこよなく愛する男 フラッターブログを陰...
フラッターブログ
携帯販売員が解説!!iPhone12は買っちゃだめかも?! ~ フラッターブログ iphone12ではなくiphone11などの商品を買うのもオススメしてる記事になります!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる