CSSまとめ

cssを毎回忘れてしまうため、自分用にまとめています。
超初心者が使うような基礎項目が多いため、cssに触れたことがある人には不向きかと。

コメント

/*ここにコメントを記載する*/
CSSファイル内にコメント記載が可能。

文字

文字色変更
color: red
文字色の変更が可能。
color: #ff0000
colorコードによる指定も可能。

文字のサイズ指定
font-size: 100px
文字の大きさをpxで指定可能。

太字指定
font-weight: 100px
文字の太さをpxまたはキーワードで指定可能。
font-weight: normal
標準指定。400pxと同等。
font-weight: bold
太字指定。700pxと同等。
font-weight: lighter
親要素より一段階細い。
font-weight: bolder
親要素より一段階太い。

フォントの種類変更
font-family: serif
フォント名を指定可能。
font-family: "Lucida Grande"
フォント名にスペースがある場合は、""で囲う。

ボーダーライン
border: 10px solid red
線の太さ、線の種類、線の色が指定可能。

背景色

background-color: #ff0000

幅

要素自体の幅の指定
width: 500px
要素の横幅をpxで指定可能。
height: 200px
要素の縦幅をpxで指定可能

要素の余白(内側)の指定
padding: 10px
上下左右に余白を追加可能。
padding-top: 10px
padding-bottom: 20px
padding-left: 30px
padding-right: 40px
上下左右のそれぞれの余白を指定可能。
padding: 10px 20px 30px 40px
短縮版。

要素の余白(外側)の指定
margin: 10px
要素の外側に余白を作ることが可能。

リスト

list-style: none
リストの黒点をなくす→・これ
float: left
リストの並べ方を指定可能。

要素の表示

表示/非表示
visibility: visible
表示指定
visibility: hidden
非表示指定。スペースは確保される。

表示方法
display: block
ブロック要素
display: inline
インライン要素

要素の配置

position: static
標準配置。block要素は上から、inline要素は左詰め。
position: relative
相対配置。本来の位置からの指定。
position: absolute
絶対配置。

テーブル

border-collapse: collapse
セルの線を重ねる。
table tr:nth-child(3) td:nth-child(2) {}
3行2列目のセルのスタイルを変更。