「これからCSSを独学しようと思っている。効率的に学習をしていきたいので、実務でよく使うCSSプロパティのまとめがあると嬉しい！」
と考えている人に向けて、今回は「実務でよく使うCSSプロパティまとめ」について紹介します！
僕は現在、大阪のWEB制作会社で働いています。
これまで半年ほど制作の現場で働いてきた中で、実務でよく使うCSSプロパティがあることに気づきました。
今回は以下の5つの項目に分けて、よく使うCSSプロパティを紹介していきます！
・fontに関するプロパティ
・レイアウトに関するプロパティ
・余白に関するプロパティ
・テキストに関するプロパティ
・画像に関するプロパティ
・見た目に関するプロパティ
当ブログを読むことで、あなたは実務でよく使うCSSプロパティのまとめを知ることができ、且つ無駄のない効率的な学習をすることができます！
これからCSSを学習していきたい人は、是非参考にしてください。
CSSとは？
ほとんどの方がご存知ではあると思いますが、軽くCSSの説明をしますね。
CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、WEBページの見た目を整えるための言語です。
HTMLで文書構造などを作り、CSSで色をつけたり、レイアウトを変更したり出来ます。
「CSSはWEBサイトの見た目を整えるために必要な言語なんだな！」だけ覚えたらOK！
fontに関するプロパティ
まずはfontに関するプロパティの紹介から！
fontはWEBサイトを作る上で、必ず使います。
font-size
フォントのサイズを指定するプロパティです。
font-size: ~;
font-weight
フォントの太さを指定するプロパティです。
font-weight: ~;
font-family
フォントの種類を指定するプロパティです。
例、ヒラギノ、ゴシック、メイリオなど
font-family: ~;
レイアウトに関するプロパティ
レイアウトに関するプロパティです。
これから紹介するプロパティを使いこなすことで、色んなパターンのレイアウトを作ることができますよ！
display
要素の表示形式を指定するプロパティです。
特に、要素を横並びにする「display: flex;」は案件ごとに毎回使いますよ！
display: ~;
position
要素の位置を指定するためのプロパティです。
特に、要素を相対的な位置に配置する際に使う「position: relative;」と「position: absolute;」を使います！
あとは、固定headerを実装する際に「position: fixed;を使うことも多いですね！
position: ~;
z-index
要素の重なり順を指定するプロパティです。
「z-index」は、「position: fixed」などのプロパティと一緒に使うことが多いですね！
z-index: ~;
text-align
ブロック要素の水平方向の配置を指定するプロパティです。
特に中央寄せにする「text-align: center;」をよく使いますね！
text-align: ~;
box-sizing
「要素の幅と高さの中にpaddingとborderを含めるかどうか」を指定するプロパティです。
特に、要素が画面からはみ出ないように「box-sizing: border-box;」を指定することが多いですね！
box-sizing: ~;
align-items
要素の垂直方向の位置を指定するプロパティです。
特に、「align-items: center;」を指定して、垂直方向に中央寄せすることが多いですね！
align-items: ~;
justify-content
flexboxの水平方向の指定するプロパティです。
特に、均等に間隔を開ける「justify-content: space-between;」や、中央寄せにする「justify-content: center;」をよく使いますね！
justify-content: ~;
flex-direction
フレックスコンテナの主軸の方向を指定するプロパティです。
特にレスポンシブデザインをする際に、要素を縦向きにする「flex-direction: column;」を使うことが多いですね！
flex-direction: ~;
border-radius
要素の境界の外側の角を丸める際に指定するプロパティです。
特に、「border-radius: 50%;」を指定して、SNSアイコンを均等に丸める実装をよくしますね！
border-radius: ~;
余白に関するプロパティ
余白に関するプロパティです。
WEBサイト制作をする上で、余白は必ず指定します！
margin
要素の外側の余白を指定するプロパティです。
margin: ~;
padding
要素の内側の余白を指定するプロパティです。
padding: ~;
max-width
最大の横幅を指定するプロパティです。
WEBサイトのインナー幅を指定する際によく使いますよ！
max-width: ~;
テキストに関するプロパティ
テキストに関するプロパティです。
テキストに変化を持たせる上で、重要なプロパティとなってますよ！
line-height
行の高さを指定するプロパティです。
line-height: ~;
letter-spacing
文字と文字の間のスペースを指定するプロパティです。
見出しなどでよく使いますね！
letter-spacing: ~;
text-decoration:
テキスト線の色・スタイルを指定するプロパティです。
あらかじめ「text-decoration: none;」をリセットCSSに書いておき、デフォルトで表示される線を消す使い方をよくしますね！
text-decoration: ~;
画像に関するプロパティ
画像に関するプロパティを紹介します！
画像を使わないWEBサイトは、もはや存在しません！
background-image
背景に画像を指定するプロパティです。
WEBサイトのファーストビューの背景画像を指定する際に、よく使いますね！
background-image: url(画像のパス);
background-size
「background-image」で指定した背景画像のサイズを指定するプロパティです。
特に、画像をちょうどよく覆うサイズにしてくれる「background-size: cover;」はよく使いますよ！
background-size:値;
background-position
背景画像の表示開始位置を指定するプロパティです。
特に「background-position: center center;」で、背景画像を中央に持ってくる実装が多いですね！
background-position: ~;
height
画像や要素の高さを指定するプロパティです。
特に「height: 100vh;」を使って、背景画像を画面一杯に広げる実装が多いですね！
height: ~;
width
画像や要素の横幅を指定するプロパティです。
画像の場合は、「width: 100%;」を指定して、画像を横一杯に広げる使い方をよくします！
width: ~;
見た目に関するプロパティ
見た目に関するプロパティです。
WEBサイトにメリハリをつけるためにも、大事なプロパティですよ！
opacity
要素の不透明度を指定するプロパティです。
ボタンのhoverした時の色の変化をつける際によく使いますね！
opacity: ~;
background-color
要素の背景色を指定するプロパティです。
background-color: ~;
border
線のスタイル・太さ・色を指定するプロパティです。
「border」で要素全体を線で囲ったり、「border-bottom: ~;」でテキストの下にアンダーラインを引くことが多いです！
border: ~;
color
文字の色を指定するプロパティです。
color: ~;
まとめ
以上が、「実務でよく使うCSSプロパティまとめ」でした！
WEB制作の現場では、同じプロパティを何回も使うことが多いです。
これからWEB制作会社に入りたい人や、個人で案件をとっていきたいと考えている人は、実務でよく使うCSSプロパティから学習することをおすすめしますよ！
学習の参考になれば嬉しいです！
