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

リストによるマークアップ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルサイトの原稿の中で、仲間(グループ)に出来る情報はどれでしょうか?確認しながらマークアップしていきましょう!
講師:
08:48

字幕

このレッスンではリストタグによるマークアップを学びます。HTML におけるリストタグは仲間とかグループを作るためのタグです。まずはレッスンフォルダのsite フォルダを開きましてindex.html 、こちらを Chrome にドラッグ&ドロップで開きたいと思います。開きますとサイトの完成図がでますがこの中で仲間というのはまずこのグローバルナビゲーションのことになります。これは1つ1つのナビが同格同じような意味を持っていて同じような役割を持っているそんな時はリストタグによるマークアップをします。そしてこのヘッダーの上にある「お問い合わせ」と「サイトマップ」こちらも2つでこのページのサブナビのような役割をはたしているのでこちらもリストタグでマークアップをします。スクロールをしまして今度は News & Topicsこちらも日付と内容日付と内容という風に繰り返しがありますれどこちらも1つ1つの情報はリストタグの方で作っていきます。そして最後までスクロールしてこのフッターにあるナビゲーションこちらも1つ1つが同じような’役割を持っているのでこちらもリストタグで作っていきたいと思います。 それではアプリケーションを切り替えてフォルダを表示して1階層上に戻ってそして begin と final と text はbegin がこれからレッスンで制作するファイルfinal は完成図そして text は原稿になりますのでまず begin のフォルダを Sublime に落として開いていきます。そして index.html をダブルクリックして開いておきます。そしてテキスト原稿も同時に開きたいと思いますのでテキスト原稿のフォルダを開いてtext-form のテキストもSublime Text にドラッグ&ドロップをして開いておきます。そして HTML の方を見ていきたいと思いますが現状を開いておきましょう。HTML にフォーカスしている状態で右クリック「Open in Browser」です。そうしますと、まだ HTML の情報設計の段階ですので一切装飾の方は入っていません。まずは見出し、そして段落が入った状態です。ここにリストによるマークアップを施していきたいと思います。それではアプリケーションでSublime Text の方に戻りまして原稿のテキストを開きましょう。まず、こちらにあるのがナビゲーションで使用するテキスト情報なのでこちらをコピーしてHTML に行きます。 そしてサイトではサイト名の下に入りますので、サイト名の下で改行のスペースを開けてこの様に原稿をペーストしましたらリストタグでマークアップをしておきましょう。list は ul のタグで作りますが終点はこちらの、すべてのナビの項目が終わった後に閉じの ul を記述して1つ1つの項目は list item の li というタグで包んでいきます。そして、これらをすべて包むので効率化を図りましょう。li というタグをコピーしてそれぞれの頭にこの様にペーストしておきます。そして終了タグも必要ですので終了タグ1つ目はこの様に手で打ち込みましたら、後はコピー&ペーストで増やしていきましょう。これでリストタグによるグローバルナビゲーションのマークアップが一旦完了です。そうしましたらまた現行を開いてこの上にある「お問い合わせ」と「サイトマップ」です。これはヘッダーのサブナビとして位置づけられてるものなのでこちらもリストタグで包みたいのでコピーをしてこの h1 の間の方にペーストをして同様に ul タグ打ち込んでもいいのですが既にあるものが下にあるのでこの様にコピーを駆使して入力をしてしまいましょう。li で、一個ずつを li で包んで終了タグもこの様に行末に入れてあげると一旦上書き保存をしてブラウザの方、更新してみましょう。 そうしますと、1つ目のリストこの様にマーカーでリストであることが分かるようになっています。これはブラウザが自動的につけてくれる装飾になります。それでは Sublime Text に戻りまして今度は News の部分をマークアップしたいと思いますのでNews の原稿を News の見出しの下に入れていきたいと思います。それでは原稿ファイルを開いてNews のこの様な日付とNews の内容が繰り返してる所をコピーしてペーストをします。そうしましたら、今度は ul ではなくてこの日付にこれがありました、とつまりこの2行で1セットなのでそういった情報を設計する時のタグdl タグを使っていきます。dl は記述リストということでまず内容のタイトル的なものをまず dt で包んでおきます。そして、日付に対応する何かということで今回更新内容みたいなものが dddescription の方で包んでおきます。あとは効率化を図っていきましょう。dt というタグをコピーしてペーストをしていきます。日付の前に dt です。そして閉じのタグをコピーして同様に日付の後ろに挿入をしていきます。そして dd もコピーをしてこの様にペーストをしていきます。 そして文書の後ろの方にも閉じの dd を必ず忘れないように記述をしていきます。そして後は footer のナビも原稿の方に用意してありますのでこちらをコピー、そしてペーストをします。そして、ここで Emmet の機能についてもご紹介しておきたいと思います。コピペでも十分速いのですがこの Emmet という機能を使うと文章を選択からCrtl+W でwrap というメニューを開いてul タグ、そしてその子要素の括弧を打って liそして*と打つと、この様に行数分を li で包み込んでくれるといったような機能がEmmet というものです。これは無料で導入できるパッケージですので興味のある方はぜひ導入をお薦めします。そして、上書き保存をしてブラウザの方にフォーカスそして更新そして上からスクロールをしていってdl、dt、dd で包んだエリアがこちらです。dd は自動的にブラウザがインデントを設けます。そして ul の方はマーカーがあるという状態です。このレッスンではリストタグによるマークアップを学びました。

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

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

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

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

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

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