HTML&CSSでWebサイトを作ってみよう!

セクションを分けて、IDを設定しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5からはセクションの概念が大切です。sectionタグとdivタグで切り分けて、IDをつけておきましょう。コメントアウトの仕方も合わせて学びましょう。
講師:
07:28

字幕

このレッスンでは div とセクションタグによるセクション分けについて学びますhtml は文書構造の他にも文書を第一章、第二章ですとかそのようにセクション分けを意味として持たせることができます。これをすることで文書構造がより明確になりますので一緒にマークアップをしていきましょう。それでは、begin のフォルダーをSublime Text に落として開きます。そして、index.html をダブルクリックで開いておきます。そして、このセクション分けは明確な正解というものがなかなか難しいです。各サイト、各ページによってセクションの数は変わってきます。じっくり考えながらセクション分けをすることが重要です。また、分かりやすいセクションもあります。それが例えば、ヘッダーであったりフッターというサイトの上部そしてサイトの下部のエリアがとても分かりやすいセクションですね。まずはそこからセクション分けをしていきましょう。まず、body の下の9行目ここに header というタグを打っていきましょう。header そしてCSS で使いたいと思うのでid をあらかじめふっておきたいと思います。id 属性header と入れておきます。 そして、終了がどこになるかというとナビも包んで閉じたいと思いますのでこのグローバルナビの後ろで閉じておきたいと思います。それでは、ここで終了タグheader を閉じておきます。そして、ここで必ずセクション分けをしたらコメントをしておきましょう。そうしますと、非常にわかりやすくなります。今回は、id header をこの様に#header そして閉じを表す / を付けてあげてそして、Sublime Text のショートカット、Mac は Command+/Windows は Ctrl+/ でコメントアウトしておきます。これで、ここまでがヘッダーですというメモを残すことができました。そして、フッターも先にマークアップをしておきましょう。フッターはニュースが終わった後こちらのエリアがフッターになりますのでこちらに footerそして id=footer と名前も付けておきましょう。そしてコピーライトの表記の後ろでfooter タグを閉じてそして /#footer と打ってコメントアウトしておきます。次はナビゲーションです。ページの主要なナビゲーションつまりグローバルナビゲーションはnav タグを使ってセクション分けをしておきます。 こちらのホームが含まれているul の方をnav nav タグでid は nav と設定しておきます。そして、終了は ul が閉じた直後nav としておきます。そして、/#nav そして、ショートカットMac は Command+/Windows は Ctrl+/こちらでコメントアウトしておきましょう。そして、今度は下にスクロールをしてこちらのメッセージのエリアです。会社のキャッチコピーやメッセージを伝えているところなのでこちらのエリアを包むために箱を作ってあげたいと思います。まず、section というタグを作ります。そして、メッセージはここの p で終了ですのでここで section を閉じておきます。そして、このエリアには後でCSS で装飾をかけていきますのでここにレイアウト専用のdiv タグを作っておきたいと思います。div タグはそのタグ自体に意味はないです。CSS の手助けをする為に作るという意味合いで使っています。そして、id はmessage と入れておきます。これがdiv タグの開始で終了は section を包むところで終了させてそしてここで終了のメモ書きをしてコメントにしておきます。 次は、この4つの仮想コンテンツへのリンクの部分ですがこちらは全てをまずレイアウトで使いたいので先に div タグで包みたいと思います。div=content という名前を付けた箱を作って4つ分を包んで終了のdiv を打っておきます。そして、コメントを content 終了ですという風にしておきます。そして、このひとつひとつのリンクのブロックがセクションと言えるのでこちらを section タグで包んでいきたいと思います。そして、こちらに閉じのsection を入れます。後は同様にこの3つも同じで繰り返していきたいと思いますのでこのようにコピーを上手く使っていきましょう。ただ、閉じタグを忘れないようにしましょう。開始タグを作ったら必ず閉じタグが必要です。div id content の閉じの div 上でセクションが閉じますね。そして、ニュースのエリアもsection を使ってみましょう。ニュースを section というタグで包んでいきます。そして、section に id を振っておきます。id=newsそして、dl の後ろでsection を閉じておきます。そして、上書き保存をしておきましょう。 このブロック分け、セクション分けはhtml 上では何も見た目は変わりません。しかし、文章の意味は確実に変わっていますので必ずこのように情報構造をエリアでもまとまりでも見えるようになりましょう。このレッスンでは、セクションタグについて学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

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

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

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

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