CSS/背景
< CSS
背景色
[編集]- 属性
- background-color
- 値
- 数値（rgb(R,G,B) あるいは #RRGGBB）
- 色名（black や white など）
- transparent :透過
スタイルシートのコードとレンダリング例 記述例（ソースコード） 表示例 p { color: yellow; background-color: #000000; }
ヨーグルトに牛乳を加える。
背景画像
[編集]背景画像を指定
[編集]- 属性
- background-image
- 値
- url(＜画像のURL＞)
- none :なし
背景画像を固定
[編集]- 属性
- background-attachment
- 値
- scroll :背景画像もスクロール
- fixed :背景画像がスクロールしない
position: fixed;のように positionプロパティをfixed にする事について
たとえばweb広告などで、スクロールしても画面のサイドバーなどの同じ位置に広告画像が表示されるサイトなどがあるが、そのような機能を実現したい場合、fixed を指定するだけで簡単に可能である。
- コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSによる片側ブロック固定表示のコード例</title>
</head>
<style type="text/css">
.left {
width: 50%;
float: left;
position: fixed;
background: #ccccff;
}
.right {
width: 25%;
float: right;
background: #ffaaaa;
}
.kaigyo1 {
word-break: break-all;
overflow-wrap: anywhere;
}
.kaigyo2 {
word-break: break-all;
overflow-wrap: anywhere;
}
</style>
<body>
<div class="left">
<div class="kaigyo1">
この文字は固定.
</div>
</div>
<div class="right">
<div class="kaigyo2">
c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>
c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>
c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>
c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>
c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>
c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>
</div>
</div>
</body>
</html>
上記のコードをHTML5対応のwebブラウザで実行すると、スクロールしても「この文字は固定.」はブラウザ画面上の同じ位置に表示され続ける。
背景画像の並び方
[編集]- 属性
- background-repeat
- 値
- repeat :縦横に敷き詰める
- repeat-x :横方向に敷き詰める
- repeat-y :縦方向に敷き詰める
- no-repeat :1つだけ
背景画像の表示位置
[編集]- 属性
- background-position
- 値
- 数値（左から 上から）
- パーセント（左から 上から）
- left・center・right（水平方向） top・center・bottom（垂直方向）
Microsoft Internet Explorerには、水平方向の位置・垂直方向の位置のみを指定する方法がある。
背景の設定をまとめて指定
[編集]- 属性
- background
- 値
- ＜background-colorの値＞ ＜background-imageの値＞ ＜background-attachmentの値＞ ＜background-repeatの値＞ ＜background-positionの値＞