もばいりーde引きこm(y な日常

実際あんまり引きこもってない。

日々気ままにつぶやいています。
Windows・Android・iOSなど中心に、中華端末など情報収集!

CSS入門 背景の変更をする。



スポンサーリンク

レイアウトはなんとなーくこれでいいかと思ってます。

とりあえず、メニュー部分にタイトルバナーと同様に画像を当て込みました。

 

このままだと、背景が真っ白でイマイチな状態なので、背景を変えたいと思います。

素材はどこぞから無料で利用OKのところから借りるのが一番いいのではないでしょうか?ですが、今回は自分で作成してみました。

ドットでちまちまと打ち込んでますが、これくらいなら簡単だと思います。

iOSなどのアイコンと違い、シンプルな形で作成しています。

f:id:hamuchi53:20150524213341g:plain

f:id:hamuchi53:20150524213350g:plain

上のうっすーい2枚です。それぞれ名前に"background-img.gif"と"background-img2.gif"としています。

これを背景として設定します。

 大本の背景にピンク色の方を使用するつもりなので、全体に適応するためにCSSではhtmlに背景設定を行います。

---------------------------------------------

/* === html要素 === */
html {
 background-image: url("img/background_img.gif") ;
 }

---------------------------------------------

これをCSSのbody要素の前に記述しました。

このままだとメニューやメインの箇所も同じ背景になってしまうのでこちらも変更しておきます。

メニューの方に水色の背景を、メインは背景を白に設定しておきます。

 

----------------------------------------------

#menu {
 background-image: url("img/background_img2.gif") ;

----------------------------------------------

#main {
 background-color : white ;

----------------------------------------------

上記を記述して、背景を変更しました。

実際の表示を確認してみましょう。

 

背景サンプル

 

どうでしょう?ホームページ本体以外の部分がピンク色の画像背景に、メニューの所だけ背景が水色の画像背景に、メインの部分が白になりました。

これでベースの部分はほぼ完成となります。

あとは、メインの内容記載だったりリンクだったりとなってきます。

その辺りはまた別の機会に。