はじめてのHTML&CSS入門

レイアウトの準備をする(div)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSでレイアウトするために、各セクションをdivタグでマークアップし、名前をつけてみましょう。また、コメントアウトの方法も合わせてご紹介します。
講師:
05:43

字幕

このレッスンではdiv タグによるセクション分けとコメントアウトの方法について学びます。chapter 2 lesson 10 のファイルを開きます。ファイルを開くと既にトラベルガイドのコンテンツが入っています。Web ページを作るにあたってこれから装飾を CSS で施すのですが分かりやすくセクションを区切っていきます。それでは、div タグというタグを打ち込んでみましょう。「トラベルガイド」という上の部分で<div一旦括弧を閉じておきます。そして、このトラベルガイドはサイトの上の部分に当たるところです。そしてトラベルガイドの下で終了の div を打っておきます。そして、このエリアに名前を付けてみましょう。開始の div の内側で半角スペースを打ちid=""そして header と入力しておきます。この id は名前という意味でこの div は division です。この div はheader という名前が付けられました。そして、この終了のdiv の後ろで改行をし/#headerそしてCommand を押しながら /Windows では Ctrl を押しながら/ を押してみましょう。 このように <!----という風に灰色の情報が入りました。この灰色の情報はコメントアウトと言い人間のメモ書きというものです。これから幾つも div を作りそして名前を付けていきますので混乱しない様に適宜メモを取っていくような使い方をします。そして、そのまま次のul というタグをナビという名の箱でセクション分けをしたいと思います。<div id="nav" でナビです。Web サイトにはナビゲーションと呼ばれる各ページへのリンクが張られたエリアがあります。このように ナビとセクション分けをしました。終了はナビのまとまりが終わったところですのでul の下で /divそして /#navそして、Command 、Ctrl を押しながら /コメントアウトをしておきます。この # は id と全く同じ意味です。それでは、このサイトについてというエリアをやはりセクション分けをします。このエリアは、id main としたいと思いますので<div id=mainこの名前は任意で付けます。自分の分かりやすい名前であったり他の人が見てもなんとなくそのエリアがどういうエリアか分かるように名前を付けていきます。 メインのエリアは「情報を収集する」という下までをメインとしたいと思いますのでこちらで終了の div タグを打ちましてコメントをやはり書いていきます。/# もしくは ハッシュを打ち込みmain そして、Command / でコメント扱いします。そして「便利なリンク集」はサブのコンテンツという扱いにしたいと思いますのでこちらで、div は名前をid=""そして subサブと名前を付けてそして終了のタグはこちらで、div そしてやはりコメントを付けたいと思います。/#subそして Command もしくは Ctrl+/ でコメントアウトです。そして最後のコピーライトの部分はフッターというサイトの一番下にあたるエリアを指定したいと思いますので<div id="footer" そして、終了の部分で</div を閉じましてこちらは /#footerそして Command+/ でコメントアウト。この様にたくさんの div を使いましたがこの div を使うことでまとまりを作るそして、それを CSS でレイアウトや装飾をする際に非常に役立ちますので div で分けるそして、分かりにくくなったらコメントを使うという事をぜひ実践してみましょう。 このレッスンでは、div タグとコメントアウトについて学びました。

はじめてのHTML&CSS入門

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

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

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

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

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