背景色編集

  • 属性
    • 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>

        </div>
    </div>

</body>
</html>


上記のコードをHTML5対応のwebブラウザで実行すると、スクロールしても「この文字は固定.」はブラウザ画面上の同じ位置に表示され続ける。


余談だが、サイドバーを描画する場合、HTML5で追加された <aside>タグを使うと、なお一層、意味が明確になる。(※ aside などのHTML5タグについて詳しくは wikibooks『HTML/HTML5』を参照せよ。)

背景画像の並び方編集

  • 属性
    • 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の値>

関連資料編集

このページ「CSS/背景」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。