はじめてのHTML&CSS入門

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ECサイトの商品紹介のように、写真とテキストをレイアウトする方法を学びましょう。
講師:
05:54

字幕

このレッスンでは CSS を使って写真とテキストをレイアウトしてみましょう。それでは、チャプター 04 レッスン 04 のファイルを開きます。ブラウザで final のファイルを見てみるとスクロールをしてみたら、この様に「人気スポットの紹介」というエリアがあってここに、伊勢神宮の写真とテキストベネツィアの写真とテキストという風になっています。この様なレイアウトを実践していきましょう。それでは begin のファイルを開いてみます。今は、写真があってテキストとなっていますが、まだ、やはりデザインがされていない状態ですね。では Sublime Text でbegin のファイルを開いて編集をしていきましょう。まず HTML のファイルから見ていきます。HTML で見てみるとこの「伊勢神宮」というエリアがあります。ここが <section ... "image-box"というもので、括られています。そして、その下には image-box がもう1個あって「ヴェネツィア」というエリアがあります。そして、この2つの box を<section id="place" という箱で包んでいます。 それでは CSS を書いていきましょう。CSS はエリア分けに書いていますが、この中でも main という箱に当たりますので、main の箱に記述をしていきます。まず、余白を調整してみましょう。#main の中にある h3 見出しにmargin-bottomそして 15px と入れておきます。見出しと、その下のコンテンツをちょっとだけ離してみました。また、 id 名の中にtext というクラスがありますがこちらについてもmargin-bottom として余白をとってみます。この結果をブラウザの方で見てみましょう。アプリケーションを切り替えてChrome を更新します。そうすると、ここの余白と「人気スポット ...」の下に余白ができたのが分かるかと思います。それでは、今度は image-box について装飾をしていきます。Sublime Text に戻って新しいセレクタを書きましょう。まず main の箱の中のimage-box というクラスです。. (ドット)はクラスを表しています。そして、まず、背景を入れていきましょう。background: #fff (白)そして、内側の余白を 20pxそして、罫線も引いてみましょう。 border を 1px 実線で色は #dea という色にしておきましょう。そして、箱に丸みも付けてみましょう。CSS3 の border-radius で10px という丸みを付けておきます。そして、箱と箱つまり「伊勢神宮」の箱と「ヴェネツィア」の箱を離したいので外の余白 margin-bottom 30px を指定しておきます。これで上書き保存をして一度、ブラウザに切り替えて確認をしてみましょう。ブラウザを更新します。そうすると、1個1個の箱が白くなって罫線が付いて、丸みが付いてあとは、この右側にテキストが行ってくれたらと思います。では Sublime Text に戻って今度は、新しいセレクタをmain の方に書きます。#main の中にあるimage-box の中に入っているimg 子孫セレクタです。そして、その中に「イメージ、つまり画像をちょっと左の方に浮かしてください」ということでfloat: left; を入れておきます。そして、写真とテキストが横に並んだ際写真と画像の間の隙間を作りたいのでmargin-right を20px 入れておきます。そして、上書き保存をしてブラウザで見てみましょう。 切り替えて、更新です。そうすると、写真とテキストは無事に並びまして、余白も、ちゃんと反映されていますが何故か、箱が縮んでしまっています。これは、イメージが float しているので高さが無くなってしまいこのテキスト分の高さで延びるのを止めてしまったんですね。なので float は解除しなければなりませんのでSublime Text に戻りこの img を含んでいる親の箱のimage-box にoverfloaw: hidden; をかけてあげましょう。そして、上書き保存をしてブラウザの方を切り替えて更新をするとこの様に、ちゃんとイメージの高さ分ボックスが延びてこの様にレイアウトすることができました。このレッスンでは、写真とテキストのレイアウトについて学びました。

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