サイト全体の幅・配置を変えよう

CSSを使ってデザインを変えていきましょう！

先ほど準備したCSSとオンラインショップ画面を表示しておきましょう。

サイト全体の幅を変えてみましょう。今の段階では画面の横幅いっぱいになるよう指定されています。

1. ソースの書き換え

CSSの166行目「#mainWrapper」で横幅が「width: 100%;」と指定されています。これを「width: 750px;」と書きかえ上書き保存します。

変更前

    #mainWrapper {
    	background-color: #ffffff;
    	text-align: left;
    	width: 100%;
    	vertical-align: top;
    	}

変更後

    #mainWrapper {
    	background-color: #ffffff;
    	text-align: left;
    	width: 750px;
    	vertical-align: top;
    	}

2. オンラインショップで確認

ブラウザの更新をクリックし確認しましょう。 横幅が750pxになりました。

3.

ヘッダー内の文字が収まっていませんので直しましょう。

CSSの237行目の「#navMain ul li, #navSupp ul li, #navCatTabs ul li」に「white-space: nowrap;」と記述されています。これを「/*white-space: nowrap;*/」と書きかえ上書き保存します。

変更前

    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	white-space: nowrap;
    	}

変更後

    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	/*white-space: nowrap;*/
    	}

4. オンラインショップで確認

ブラウザの更新をクリックし確認します。

文字が収まりました。