【CSS】 基本のベースコーディング
1. CSSファイルの先頭ではUTF-8の文字コードを指定
@charset "utf-8";
2. 細かい定義の前にまず、全体で共有する箇所を定義していく。
例えば・・・・
【フォントの種類】
●WinやMacなどのOSによって、入ってるフォントが違うので、
それぞれ指定すること。
●基本的に複数指定すること。
●英語フォントを先にかくこと。
→サイト内の英文は、英語フォントが反映される
●フォント名内に半角スペースや全角文字が含まれる場合
シングルクオテーションで囲むこと。
●最後は総称フォントを指定すること。
(ゴシック体ではsans-serif、明朝体はserif。どちらか指定)
●font-familyは基本的にbodyに指定する。
body {
font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",
"メイリオ",Meiryo,"MS Pゴシック",Arial,Verdana,sans-serif
}
【フォントカラー】
●Webデザインでは、あまり「真っ黒(#000000)」は使わない。
黒は、#222222 〜 #333333付近を使う。
【ベースとなるフォントサイズ】
まずは3種類のおさらい。
remは、CSS3から新しく追加された単位。
IE8以下のブラウザには対応していない。
レガシーブラウザを除いたコーディングであれば、
remを使うのが一般的。
remを使う際は、まずhtml要素のフォントサイズを10pxへ変更する。
主要ブラウザのデフォルトフォントサイズは、「16px」
↓
16px × 62.5 % = 10px
html { font-size:62.5%; }
こうすることで、html以下要素では
「1.2rem = 12px」のように直感的にわかりやすくなる。
【ベースとなる行の高さ】
line-heightで指定できる値は4種類ある。
●normal・・・初期値
●単位・・・px,em,remなど単位つきの値
●割合(%)・・・要素のfont-sizeを基準にした割合。
font-sizeが10pxで、line-heightが150%だと、
行の高さは15pxとなる。
基準となる要素が変わらない為、
子要素のfont-sizeが変わる場合、
都度line-heightも指定しなおさなければ、
行の高さは同じとなってしまう。
●数値のみ・・・基準となるfont-sizeにこの数値をかけた値が行の高さ。
子要素に引き継がれると基準がその子要素となるので、
都度line-heightを指定しなおす必要がない。
.content {
font-size: 10px;
line-height: 1.5; /****** 10 × 1.5 = 行の高さは15px ******/
}
h1 {
font-size: 24px; /****** 24 × 1.5 = 行の高さは36px ******/
}
p {
font-size: 14px; /****** 14 × 1.5 = 行の高さは21px ******/
}
【リンクテキストデザイン】
例えば・・・リンクの下線を無しにする、等。
a:link, a:visited, a:hover, a:active{
color: #d03c56;
text-decoration: none;
}
※ a:activeわかりにくければここ↓
https://hail2u.net/pub/test/376.html
【背景色】
上から順番を守って記述すること!
body {
background: url(path2image) no-repeat center center /cover fixed;
}
<!-- color は、初期値の透明。画像は、path2imageを使う。画像は、繰り返さない。
位置は、センター。サイズは、cover (縦横比は保持して、背景領域を完全に覆う最小サイズ)。
スクロールは、fixed(固定)。-->
・ショートハンドの場合、プロパティは「background」と書く。
・sizeだけは、positionの後に書く場合「/」がいる。
【box-sizing】
*, *::before, *::after{
box-sizing: boder-box;
}
box-sizingの初期値は「content-box」で、
paddingやboderの領域は、widthに含まれない。
boder-boxにすると、
widthとheightの指定は、paddingとboderを含めて指定できる。
box-sizing: border-boxを使う際は、古いバージョンのブラウザに対応させるために、念のためベンダープレフィックスをつけておくこと。
<ベンダープレフィックスとは>
プレフィックスとは接頭辞という意味。機能を実装する為に、ブラウザの種類ごとに指定する。
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}