はじめてのHTML&CSS入門

背景を装飾してみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSで背景に色や画像を設定してみましょう。
講師:
06:14

字幕

このレッスンではCSSによる背景の装飾について学びます。まずはチャプター3レッスン7のファイルを開きましょう。またフォルダの中身を確認してみましょう。フォルダには bg_main.png という画像ファイルそして html そしてスタイルシートの3つのファイルが入っています。ではスタイルシートに戻りましょう。早速スタイルシートを記述していきましょう。body の line-height のプロパティの後ろで改行をし背景を設定していきます。background-color と打って色を指定できます。#eee と打ちましょう。ではコマンドSで上書き保存。そして html を開き context menu を開いてブラウザで見てみましょう。このように真っ白から薄いグレーに背景が変化しました。では Sublime Text に戻ります。今度はスタイルシートを開いてid main の内側に記述をしていきましょう。background-image ということで背景画像を指定するプロパティです。背景画像を指定するときはurl() として画像の url を設定します。bg_main.png というファイルがありましたのでその通りに入力をします。 それでは上書き保存をしてアプリケーションを切り替えブラウザで開きコマンドR コントロール+Rで更新をしてみましょう。そうしますとメインのエリアにノートの紙のような背景画像が入りました。では Sublime に戻りましょう。今度は background の他のプロパティを見ていきます。background-repeat というプロパティを指定してみましょう。値の方は no-repeat と入れてみます。そして上書き保存アプリケーションの切り替え更新をしてみます。そうしますと先ほどまでメイン全体を覆っていた背景画像が一個だけになりました。つまり背景画像は初期設定では自動的に敷き詰められるのですがbackground-repeat プロパティを指定することで一回だけというような指定ができるようになります。また Sublime に戻ります。それでは更に background-position というプロパティを試してみましょう。background-position そして値の方は今回は bottom right と記入しましょう。CSSでは上下左右を top right bottom left の4種類で設定をします。 今回は上下の二択で bottom つまり下そして left か right かの二択はright という風に指定をしてみました。それでは上書き保存アプリケーションの切り替えそしてブラウザ上で更新をしてみます。そうすると main という全体の箱の中で右端 そして下に移動しました。このように背景画像は今回のように敷き詰めるような背景画像ではなくワンポイントとして使えるような背景画像は単体で好きな場所に移動するといった使い方も可能です。では Sublime Text に戻ります。最後に footer についても背景色を指定してみましょう。background 今回はハイフンを入れないでbackground: として指定してみましょう。この場合は今まで使ってきた-imageや-colorなど一括で指定できるようになります。例えば#色番号を指定することもできますしこの後ろに repeat や background image も複数記述できるようになっています。そして背景に濃い色が入るとデフォルトの文字色、黒では見づらくなりますので文字色も同時に指定しておきます。colorプロパティで#fffは真っ白を表しています。 では上書き保存 アプリケーションの切り替えそしてブラウザの更新です。このようにfooter部分は濃い背景色が入り文字色は白くなったことが確認できます。このレッスンでは背景に関するCSSを学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日
再生時間:3時間35分 (38 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。