コンテンツにスキップ

CSS/背景

出典: フリー教科書『ウィキブックス(Wikibooks)』
< 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の値>

関連資料

[編集]