GASSY’S BLOG

本業の傍らでプログラミングを習得中の、駆け出しエンジニアのブログです。

CSSの基本②

こんにちは、GASSYです。

今日は珍しく外でBLOGを書いてます。

私には5歳(今年6歳)の娘がいるのですが、

娘のバレエ教室が今週から再開となったので教室に向かったところ、

なんと今日は定休日だったっていう^^;

教室に預けてる間に隣のコンビニのイートインでBLOG更新しようと思ってましたができなくなってしまったので、

娘と公園に移動して公園のベンチでマック開けてカタカタしてます。

たまにはこういうのもいいもので、今度テレワーク外でやってみよかな、なんて。笑

 

さて、今回は前回に引き続きでCSSの基本その②です。

前回はCSSの基本構造について触れました。

今日はCSSのプロパティをいくつかご紹介したいと思います。

せっかくだし、ちょっと前に作ったサンプルHPのソースコードの中から紹介します。

f:id:gassy1985:20200506164128j:plain

f:id:gassy1985:20200509003952p:plain

文字や背景の見た目に反映させるプロパティ

background-color

ページの背景色を指定します。16真数使ったりして指定しますが、

私はカラーパレットだけを取り扱うサイトにものすごい種類の色とその表示のための値を調べて使うことが多いです。

カラーパレット眺めてるだけで結構幸せを感じるGASSYです。

無駄に時間食うときも多々あるけど。笑 

background

背景に画像とか差し込みたい時に使ってます。

こちらのページはbackground: url("https://source.unsplash.com/random") fixed;と記述することで、

unsplashという画像無料提供サイトの画像を自動的に飛ばしてます。

ランダムで画像が切り替わっちゃいますけど、サンプルページだしこれでいっかなと。。 

color

文字の色を指定します。色の指定方法はbackgroundと同じです。 

font-family

文字の書式を指定します。こちらのページはデフォルトのフォントですが、

好きなフォント探して使うのもページ制作の醍醐味だよなって思います。

真面目にやるときは書式集サイトから探して反映させます。

これまた眺めていろいろ探してるときが結構楽しくて幸せです。笑 

font-size

文字の大きさを指定します。 

font-weight

文字の厚みを指定します。font-weight:bold で太字になります。 

 

と、Macbookがめっちゃ熱くなってきてやばそうなので今回はここまで。

次回はプロパティの中で配置を指定するものを紹介したいと思います。

 

ではでは!