はじめに
CSSはWebページの見た目を整えるために必要な技術です。
CSSにはプロパティと値があり、それらを組み合わせてスタイルを設定します。
しかし、初めてCSSを学ぶ人にとっては、プロパティと値が多く、どのように組み合わせれば良いのか分からないことがあります。
この記事では、CSSのプロパティと値の一覧と使い方を初心者目線で詳しく解説します。
●CSSプロパティ
CSSには多数のプロパティがありますが、ここでは代表的なものを中心に解説します。
○background-color
要素の背景色を設定します。
body {
background-color: #ffffff; /* 白 */
}○color
テキストの色を設定します。
h1 {
color: #333333; /* 黒 */
}○font-size
フォントの大きさを設定します。
p {
font-size: 16px;
}○font-family
フォントの種類を設定します。
h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}○font-weight
フォントの太さを設定します。
h1 {
font-weight: bold;
}○text-align
テキストの配置を設定します。
h1 {
text-align: center;
}○margin
要素の外側の余白を設定します。
div {
margin: 20px;
}○padding
要素の内側の余白を設定します。
div {
padding: 10px;
}○border
要素の境界線を設定します。
div {
border: 1px solid #cccccc;
}○border-radius
要素の角を丸めます。
div {
border-radius: 10px;
}○box-shadow
要素に影をつけます。
div {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}○width
要素の幅を設定します。
img {
width: 100%;
}○height
要素の高さを設定します。
img {
height: 200px;
}○display
要素の表示方法を設定します。
ul {
display: flex;
flex-direction: column;
}○position
要素の位置を設定します。
div {
position: relative;
top: 20px;
left: 30px;
}○float
要素の左右に配置を設定します。
img {
float: left;
margin-right: 10px;
}●CSS値】
CSSのプロパティには、設定できる値があります。
ここでも、代表的な値を中心に解説します。
○カラー
カラーは、16進数、RGB、RGBA、HSL、HSLAなどの形式で指定できます。
h1 {
color: #ff0000; /* 赤 */
}○単位
CSSには、px、em、rem、%などの単位があります。
div {
margin: 20px;
font-size: 1.2em;
}○キーワード
キーワードは、例えば「bold」や「none」のような単語を指します。
h1 {
font-weight: bold;
text-decoration: none;
}まとめ
CSSには多数のプロパティと値があり、初めて学ぶ人にとっては少し難しいかもしれません。
しかし、この記事で紹介した代表的なプロパティと値を覚えておけば、Webページのデザインを自由自在に調整できるようになるでしょう。
ぜひ、実際に手を動かしながら、CSSを学んでみてください。
