CSSの書き方
▼よく使うプロパティ
プロパティには様々な種類があります。
下で紹介しているのは改変する際によく使うだろうと思われる場所だけなので、他にも色々知りたい方は参考サイトをご覧下さい。
私も良く使う基本的なものしか覚えていないので、分からなくなったら結構下のサイトを頼ります。
何度も使うものは、端末内に自分の分かりやすい単語で辞書登録しておくと、作業がとても楽になります。

《参考サイト》
スタイルシートリファレンス(目的別)-HTML クイックリファレンス
スタイルシートリファレンス(ABC順)-HTML クイックリファレンス
プロパティ一覧-TAGindex

文字サイズ
font-size:数値px;
※数値には、px、%やem(基準のサイズを1として○倍)などが使えます。

フォント
font-family: フォント名;
※フォント名に日本語やスペースが入る場合は、""で括る必要があります。英単語のみの場合はや総称ファミリの場合は必要ありません。
フォントについては別ページで詳しく説明しています。
フォントの仕組み

▽""で囲む場合と囲まない場合の例
font-family: "Arial Black";
font-family: "メイリオ";
font-family: Arial;
font-family: sans-serif;

文字色
color:色コード;

背景色
background-color:色コード;

線の色や形
border: 線の太さ 線の形 色コード;
※線の太さは、pxやem(文字数)などが使えます
※線の太さ、線の形、色コードはどの順番で書いてもOKです。

▽線の形
none→線なし
solid→実線
double→二重線
dotted→ドット線
dashed→破線

線の色や形(個別)
border-width:線の太さ
border-color:線の色;
border-style:線の形;

border-top: "上"の線の太さ 線の形 色コード;
border-right: "右"の線の太さ 線の形 色コード;
border-bottom: "下"の線の太さ 線の形 色コード;
border-left: "左"の線の太さ 線の形 色コード;

内側の余白
padding: 数値px 数値px 数値px 数値px;
▽書き方は全部で4種類あります
padding: 数値px;→[上下左右]
padding: 数値px 数値px;→[上下][左右]
padding: 数値px 数値px 数値px;→[上][左右][下]
padding: 数値px 数値px 数値px 数値px;→[上][右][下][左]

内側の余白(個別)
padding-top: 上内側の余白;
padding-right: 右内側の余白;
padding-bottom: 下内側の余白;
padding-left: 左内側の余白;

外側の余白
margin: 数値px 数値px 数値px 数値px;
▽書き方は全部で4種類あります
margin: 数値px;→[上下左右]
margin: 数値px 数値px;→[上下][左右]
margin: 数値px 数値px 数値px;→[上][左右][下]
margin: 数値px 数値px 数値px 数値px;→[上][右][下][左]

外側の余白(個別)
margin-top: 上外側の余白;
margin-right: 右外側の余白;
margin-bottom: 下外側の余白;
margin-left: 左外側の余白;

横幅
width: 数値px;
※各幅設定の数値pxの部分には、px以外にもem(文字数)や%などの単位を使うことが出来ます。

最小の横幅
min-width: 数値px;

最大の横幅
max-width: 数値px;

縦幅
height: 数値px;

最小の縦幅
min-height: 数値px;

最大の縦幅
max-height: 数値px;

行間
line-height: 数値;
※数値にはレイアウト上必要な場合を除き、【単位はつけない】方がいいです。
文字を一部だけ大きくするレイアウトを作った時、行間は元の文字の大きさの分しか開きませんので上下の文字が重なる原因になります。
PREV][NEXT
×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -