はじめてのHTML&CSS入門

リストタグ(ul / ol / dl / dt / dd)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
関連性のある情報をまとめるためのリストタグを学びましょう。
講師:
07:07

字幕

このレッスンでは、新しい HTML タグlist タグを学びます。list タグには3種類あります。ですので、1つずつ見ていきましょう。まずは、チャプター 02 レッスン 06 のファイルを開きましょう。ファイルを開くと、既に「トラベルガイド」という架空のサイトの「国内旅行」のコンテンツページといった情報が入っています。見出し情報を見ていくと、「旅行情報」というコンテンツのページでその中でも「国内旅行」というカテゴリでそして、どうやら「地域から探す」「観光名所から探す」「食べ物から探す」といったメニューが得られます。この様に、同じ「探す」「探す」といった共通項を持つものはグループにしてあげるのが情報設計上、好ましいです。ですので、こちらに新しいタグを記述していきましょう。ul というタグを使います。ul は unordered list の略で「順不同のリスト」という意味ですが、同じ共通項を持った仲間を包むといった役割があると思ってください。そして ul タグの開始がここで、終了タグがどこにあるかというと、グルーピングが終わった後ということなので、</ul という風に、1つのグループを1つの ul で包んでいきます。 ですが、このままですと、1個1個の区別がつきませんので「地域」「観光名所」「食べ物」それぞれを区別するために1つ1つを list item というタグで包んでいきます。こちらは li というタグになります。ですので、1つの項目を1つの liそして、「観光名所」も同様に li忘れずに、終了も li「食べ物」の方も li の開始タグと終了の li タグの1つがい。これで、1つのグループが完成しました。それでは、次のリストに行きましょう。今度は、「人気スポットランキング」といった情報がありますが、その下の原稿では、それぞれの人気スポットが3つ並んでいます、これもグループではあるのですが、今回はランキングということで、順番というのが大事になってきます。先ほどは順不同でしたので、「地域」と「観光名所」が入れ替わっても特に問題はありませんが、ランキングとなると、1位と2位と3位と明確に順序を付けなければなりません。そういった時に使用されるタグが ol タグです。ol の o は ordered ということで順序どおり並べたい。そういった時は ol タグを使えます。こちらも、グループの終了で既に、閉じの ol タグを記述することで1つのグループのまとまりを作ることができます。 そして、1位2位3位を区別するために1つ1つをリストアイテムとして認識させたいです。ですので、開始の li タグ、そして、終了の li タグ。同様に li タグを打っていきますが、似たような記述をする時は、是非、コピー&ペーストを活用していきましょう。今回は、この li タグが繰り返されそうですので、li を Command+CWindows では Cotrl+C でコピーをとり、2つ目 Command+VCtrl+V ですね。そして、3つ目も Ctrl+V Command+V として、増やしておきます。そして、終了タグの方もコピーをとって、同様にペーストをしておけば、効率よくマークアップができるかと思います。そして、最後のリストを記述していきましょう。最後のリストは「記述リスト」と呼ばれています。タグは dl です。dl は description list です。XHTML1 までは definition list(定義リスト)と呼ばれていましたが、HTML5 では description list と呼ばれていて、ある単語などを記述して、そして、その説明をセットで記述するといったようなリストとして使われています。 そして、こちらもグループとしては1つの固まりを1個の dl で包んでいきますので、この、似たような日付の「更新情報」なんですが、「更新情報」が終わった所でdl を閉じておきます。そして、日付をタグで包みますが、今度は dt というタグで包みます。そして、行末に、</dt と、終了タグを記述します。そして、次の行には dd というタグでマークアップをしていきますので、「更新情報」の中身はdd でマークアップをします。同様に、下の日付も dtそして、行末に移動して、閉じの dt2つ目は ddそして、終了タグは / のdd ということになります。少しタグが複雑になってしまったので、整理をしてみます。まず dl は、「ここから記述リストが始まります」という宣言です。大切なのは dt と dd が1つのセットになっていることです。「この日付に、この出来事がありました。」つまり、 dt と dd は常に関連性があるということです。ですので、次も日付があって更新内容がある。この様に dt と dd を関連付けたようなリストを作りたい時はdl タグを使っていきましょう。段落とリストを使いこなすことで、より効率よく情報設計ができます。 このレッスンでは、list タグについて学びました。

はじめてのHTML&CSS入門

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

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

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

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

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