はじめてのHTML&CSS入門

写真を使ったレイアウト1

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
キービジュアルとして、写真を配置してみましょう。また、背景画像の効果的な使い方を学びます。
講師:
07:20

字幕

このレッスンでは、Web デザインに則した写真と画像の使い方を学びます。それでは、チャプター 04レッスン 03 のファイルをブラウザで見てみましょう。final のファイルを見てみるとここに、キービジュアルが入っています。そして、背景に薄いグラデーションの画像が入っています。begin と比べると、この様に印象が全然違います。この2つ画像の配置の仕方を学びましょう。では、begin のファイルをSublime Text で開いておきます。そして Style Sheet をまず、見てみましょう。今回は、Web デザインに則していますので、CSS は COMMON という通常、使いまわすようなエリアそして、ヘッダーのエリアナビゲーションのエリアといった具合に、コメントで場合分けをしてあります。今回は、このキービジュアルのエリアにCSS を書きますが、まず、HTML を確認してキービジュアルがどのエリアに入るかを確認します。今回は、header というエリアがnav を含んでいますので、その下main の箱の上にキービジュアルを入れたいと思いますので、ここに div id="key-visual" という箱をまず、用意しなければなりません。 そして div を閉じます。そして、その中に、キャッチコピーである文章を入れておきます。p タグを先に書いておいてp タグの内側にキャッチコピーを書きましょう。「楽しい旅をみつけよう!」というキャッチコピーを入れました。それでは、上書き保存をしてブラウザで確認をしてみます。更新をします。そうすると、一応、このエリアがキービジュアルが入る予定のエリアになりました。それでは、Sublime に戻りまして、Style Sheet を記述します。キービジュアルは id ですので、# (ハッシュ)を書いてkey-visualそして、その中ここに写真を入れます。背景として写真を入れるのでbackground を指定しまして、urlこの中身が画像の場所を指定しますがここで、フォルダも確認しておきましょう。レッスンのフォルダの中を見るとhtml 、 css 、 images フォルダがあります。images フォルダの中に2つ画像が入っています。key-visual.jpg とbg-body.jpg です。bg は、あとで body の背景として使います。今回は、この key-visual を使いますのでこのファイル名をコピーしておきましょう。 コピーをしたらSublime Text に戻ってimages フォルダの中のこの画像の名前としてペーストをします。そして、半角スペースを打ってこの背景画像は1回だけで良いということでno-repeat と打ち込みます。そして、この画像の高さは高さが 200 px なのでheight を 200px と指定してそして、key-visual の下には余白を設けたいと思いますので、margin-bottom を選んでEnterそして 30px; (セミコロン)で閉じます。そして、上書き保存をしてブラウザの方で見てみましょう。そうすると、この様に画像が入りました。そして、このキャッチコピーの部分がまだデザインされてませんので、こちらもデザインしましょう。Sublime Text に戻って今度は key-visual の中の子孫セレクタ pそして、その内側にはまず、文字の色が白 fffそして、文字と文字の間隔を空けて少しゆったりとした雰囲気を出しましょう。letter-spacing と打って10 px中央揃えにしたいです。text-align の centerそして、写真のちょっと中央位置まで余白を取りたいなと思うので内側の余白 padding-top : 70pxそして、フォントサイズを大きくしましょう。 文字のサイズはfont-size のプロパティで30px として、上書き保存。そして、ブラウザに切り替えて更新です。そうすると、この様なデザインになりました。それでは、今度はbody に背景を指定します。Sublime に戻ります。そして、上の方にCSS をスクロールしてbody というセレクタを付けました。body は今見えているウィンドウ全体を司るセレクタになっていますので、ここに背景画像を指定しましょう。back-groundそして url で画像の名前を指定しますが、images フォルダの中のbg-body.jpg を指定します。そして、横向きにだけリピートをするのでrepeat-x としてそして、背景画像が及ばない所の背景色も指定しておきます。色番号は ffffed としてそして ; (セミコロン)で閉じておきます。これで上書き保存をしてブラウザで見てみましょう。更新をします。これで、この高さの背景画像がリピート右方向 ...... X ですね、右方向が X です。これで、背景画像が繰り返し入ってサイトの雰囲気がちょっと変わりました。このコースでは、背景画像とキービジュアルの使い方を学びました。

はじめての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宛までご連絡ください。