CSS実践(2) 「色の指定」「背景」「ボックスモデル」
1. はじめに
本記事では、CSSの
「色の指定」「背景」「ボックスモデル」
について記載する。
2. 色の指定
色指定の方法
・RGB値で指定する方法 ・カラー名で指定する方法
RGB値で指定する方法
【サンプル】
h1 {
color: #aa0000;
}
【表示例】
【RGB値で指定する方法】
【10進数と16進数】
10進数と16進数の定義
10進数
数値の表現形式のうち、「0」から「9」までの10種類の数字を使って数値を表現する形式のこと。
10を基数とし、10倍ごとに位取りを行う。0から9までの10個の数字を使い切ったところで桁が上がり、より大きな数字を表していく。
16進数
ひとつの桁において0〜9、A〜Fと並ぶ16個の数値を扱うことができる。
Aが10進数における10に相当し、Fは同じく10進数の15に相当する。
Fの次は位取りをして1桁上がり、10となる。
RGBのバリエーション
・10進数で指定:rgb(255,0,0) ・%で指定:rgb(100%,0%,0%)
カラー名で指定する方法
・赤:red ・緑:green ・青:blue
参考
MDN color:https://developer.mozilla.org/ja/docs/Web/CSS/color_value
3. 背景
背景の目的
・要素の背景色を指定する。 ・要素の背景に画像を指定する。
要素の背景色を指定
【サンプル】
h1 {
background-color: #ccc;
}
要素の背景に画像を指定
背景全体
【サンプル】
<style>
h1 {
background-image: url(images/dot.png);
}
</style>
【表示例】
上記例だと、画像を繰り返し表示しているので、繰り返し表示しない方法がある。(以下例)
背景を一部に反映
【サンプル】
<style>
body {
background-image: url(images/dot.png);
background-repeat: no-repeat;
}
</style>
【表示例】
・no-repeatとすることで、繰り返し表示を解除することができる。
・マークアップされた文字や画像などデフォルトでブラウザ画面の左上になるため、
表示例のように画像が左上になる。画像の位置も設定可能。(以下例)
【サンプル】
<style>
body {
background-image: url(images/dot.png);
background-repeat: no-repeat;
background-position: center;
}
</style>
【表示例】
・今回だと位置をセンターにしているが、rightやleftとすることで右や左の位置にすることも可能。(今回は省略)
要素
【サンプル】
<style>
body {
background-image: url(images/dot.png);
}
</style>
4. 使い分け
Q.HTMLのimg要素と、CSSのbackground-imageの使い分けは?
↓
・img要素:重要な画像 ・background-image:背景画像。装飾
5. おわりに
Author And Source
この問題について(CSS実践(2) 「色の指定」「背景」「ボックスモデル」), 我々は、より多くの情報をここで見つけました https://qiita.com/Stack_up_Rising/items/f18030147275f4c2f7be著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .