カテゴリー:CSS

記事本文

この記事をお勧めしたい方

プロパティって何があるの?とお困りの方!




今日もお疲れです!
ビギナー中里です!


今回はCSS基礎編の最後、本当によく使うプロパティ
10個ほど紹介したいと思います。



本記事で得られるスキル

  • CSSを書く上で必ず使うプロパティの知識



前準備

p
タグで囲まれたテキストを1つ用意しましょう。
この要素にCSSプロパティを設定していきます。

<p>ここにスタイルが当たります。</p>

ここにスタイルが当たります。






ではいきましょう!
※今回は特別にセレクタに直接スタイルを指定します










background-color
まずはわかりやすくするために背景色をつけてみます。


p {
background-color: #ffffff;
}

ここにスタイルが当たります。



#ffffff
という白を表すカラーコードを指定しました。

色はwhiteなどの英単語でも指定することができますが、カラーコードを使うと
より自由に色を指定することができます。
WEBカラーピッカー」などで検索してみると便利なサイトが見つかります。





border
白背景だけでは分かりづらいので、境界線も引いてみます。


p {
border: solid 1px #4a77d3;
}

ここにスタイルが当たります。


※以降、スタイルは差分のみ記述していきます。



border
というプロパティの中に、スペース区切りで3つの値が書かれていますね。
ここでは
solid
に続く2つの値に注目しましょう。

1px
は線の太さの指定、
#4a77d3
が線の色を指定しています。
数値を変更して太さや色が変わるのを確かめてみると良いでしょう。





color
文字色も変更しておきましょう。


p {
color: #4a77d3;
}

ここにスタイルが当たります。



境界線の色に合わせてみました。





font-size
今度は文字サイズを変更してみます。


p {
font-size: 24px;
}

ここにスタイルが当たります。



数値で大きさを指定します。





font-weight
さらに太字にしてみましょう。


p {
font-weight: bold;
}

ここにスタイルが当たります。



bold
で太字、標準は
normal
です。





text-align
テキストを中央揃えにします。


p {
text-align: center;
}

ここにスタイルが当たります。



left
で左寄せ、
right
で右寄せの指定できます。





width
少しを狭めてみましょう。


p {
width: 450px;
}

ここにスタイルが当たります。



数値で幅を指定します。





height
高さも変えてみましょう。


p {
height: 50px;
}

ここにスタイルが当たります。



同じく数値で高さを指定します。





padding-(方向)
height
ではテキストが垂直中央にならず、なんだか気持ち悪いですね。
内側の余白を調整することで良い感じにしてみましょう。
height
の設定は消しておきます。


p {
padding-top: 20px;
padding-bottom: 20px;
}

ここにスタイルが当たります。



内側上下に20pxの余白が取れました。
padding-(方向)
の方向をleftやrightに変えれば左右の余白を取ることもできます。





margin-(方向)
外側の余白もとって、要素の周りの隙間を広げてみます。


p {
margin-top: 50px;
margin-bottom: 50px;
}

ここにスタイルが当たります。



今度は要素の外側上下に50pxの隙間が取れました。
padding
と同じく、rightやleftで左右の余白を取ることもできます。










今回はここまで!
お疲れ様でした!



CSSプロパティは名前と効果が直感的で、すぐに覚えられそうではありませんか?
まずはこんなプロパティがあるんだ、というところから覚えていきましょう。


実は、今回紹介したプロパティでも、値の指定の仕方によって効果が変わります。
カラーコードや数値は紹介した通り、borderのsolidや、pxなどの単位も変えられそうですね。

また、要素によってはスタイルが当たらないものもあります。

この辺りはCSS中級編以降で触れていこうと思います




さて、次からはHTMLの中級編に入っていきますよ!
ではまた!