CSSの基本③

こんばんは、GASSYです。

最近はもっぱら本業で手一杯。

副業したいなって思ってましたけど、時間の使い方や何をやるか、

改めてしっかりした設計が必要だよなと痛感しています。

時間は有限。その時間を何に換えたいのか。

最近は本業やりながらちょっとした時にそのことを考えてしまいます。

本業はライスワークであることはもちろんですが、

結構貴重な経験をたくさん積ませてもらってるよなって思います。

その経験を生かしつつ、自分のやりたいことや興味のあることをベースとして、

副業で何かしらやりたい！って気持ちだけはあるのですが。。

これは改めて考えをまとめていきたいなと思います。

さて、今日はCSSの基本第三回目です。

今回はレイアウトの配置とかその辺りを指定するプロパティを紹介していきます。

前回同様、以前簡易的に作成したサンプルページのソースコードを参照頂きながら紹介したいと思います。

配置などレイアウトを調整する主なプロパティ

padding

ボックスの中の幅を調整してくれるプロパティです。

サンプルページで例えるとヘッダーの「GASSY BLOG」という文字と、

その文字を囲っている黒い四角の枠との隙間の距離を指定して余白をつけています。

margin

ボックスの外側に対して幅を持たせてくれるプロパティです。

よく使うプロパティですが今回私のソースコードでは使ってない。。

display

レイアウト配置でめっちゃ使います。

gridっていうプロパティの方がわかりやすい みたいなんですけど私はまだ使い切れてないです。

このプロパティを使ってflexとか組み合わせることで要素の配置がしやすくなります。

text-align

テキストの配置を揃えてくれます。私のソースコードだと、

フッターの配置をtext-align:centerとして中央揃えに指定しています。

position

要素の位置を固定したりするのに使います。

私のソースコードだと、フッターの位置を固定するためにposition:absoluteとしています。

と、本日はここまで。

CSSってやりだすと結構楽しくて実はいろんなことができます。

今回紹介したものも、正直使いこなせるようになるまでかなり苦労しましたが、

CSSは目の前で変化がすぐに出るので比較的楽しんでやれるんじゃないかと思います。

もっともっとわかりやすいページたくさんありますので、

興味を持たれた方は是非試しにWebサイトのトップ作ってみてはいかがでしょう＾＾

ではでは！