HTML入門トレーニング

順不同リスト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
順不同のリストを定義するための、ul要素について学びます。
講師:
06:35

字幕

このレッスンでは、順不同のリストを 定義する為のulリストについて学びます リストはコンテンツを整理する 非常に便利な方法です htmlにはコンテンツの内容に応じて 様々なリストの種類が用意されています ここでは順不同リスト、 つまり順番に左右されない 箇条書きなどに使えるリストを 紹介していきます 現在画面では、コードエディターで サンプルファイルのhtmlを 開いている所です このhtmlの中を見ると、 まだマークアップされていない部分が ある事に気付きます この 何もマークアップされていない部分に対して、 順不同リストを作成していきます さて、リストを作成する為には リストタグの親を作成する必要があります そしてその親はこれから作るリストのタイプ、 種類によって内容が変わっていきます ここでは順不同リスト、 順番が関係のないリストを 作ろうとしていますので、 ここでは、ulというタグを作ります 実際に書いていきましょう この、マークアップしたい全体に対して リストタグの、親のタグを作ります ここでは、順番が不動、 順不同のリストを作るため、 ULタグでマークアップしたい テキスト全体をくくります ここで順不同リストは 一つ一つのアイテムを一覧として扱う それだけの為ではない、 という事を覚えておきましょう 順不同リストは、一つ一つのアイテムを 並列のリスト、一覧、 或はグループとして扱いますので、 例えば、ナビゲーションなどにも 使う事ができます ナビゲーションでは 一つ一つのリンクアイテムに対して リンクが設定されており それらのリンクは、 一つのリスト、一覧と捉える事ができます このような場合でも、 順不同リストを使ってマークアップする事が 適切という風に考えられます このような事を念頭に置いて、 一つ一つのアイテムをリスト項目として マークアップしていきましょう リスト項目としてマークアップする為には、 必要な事が2つあります 一つは、親のタグです ここでは既に順不同リストとして リストタグの親をマークアップしました そして2つ目はリスト項目を liというタグを使って マークアップする事です ここでは一つ一つのアイテムを、 liタグを使って マークアップしていきましょう liというタグで、 一つのリスト項目をマークアップします これでこのulリスト、順不同リストの中で、 item one という文字列が一つの項目 一つのリスト項目として認識されました 同じように他の項目についても マークアップしていきましょう 開始タグをコピーして、 全てのリスト項目を一つ一つliタグで このようにマークアップをします 分かりやすいようにインデントをしておきます これで、この選択している部分が、 ul、順不同リストとして マークアップされました 1つ1つのリスト項目は、 このliタグでマークアップされた部分です さてここでリスト項目の中身を見ていくと、 一つ気付く事があると思います アイテムの中身はitem one、two threeとなっていますが threeのあとは3.1、3.2、3.3、 そしてitem fourとなっています つまりこれは、 全体として一つのリストに見えますけれども、 このitem 3.1から3.3は このitem threeに属している 子供のリスト、 こういう風に言えるかと思います このような場合、リストを入れ子にして マークアップする事ができます どのようにするでしょうか? ここではこの、item3.1から 3.3をインデントして、 このitem threeのリスト項目の 子供に設定します そのためまず、 このitem three を囲う liタグの終了タグを このようにして item3.1、3.2、3.3を含む全体を 囲うようにマークアップします こうする事でこの子供の、 item3.1から3.3のリスト項目が このitem threeのリスト項目の 子であるという事が明確になります 更にこれに対してこのitem threeの リスト項目に属するリストは 同じ順不同リストである、 という事が分かるように リストタグの親、 ulタグをマークアップします そしてこの子供のulタグは、 item3.1で始まり、3.3で終わるため このようにマークアップします こうする事でリストが2つ、 入れ子になりました 親のリストにはitem one、 item two、item three、 item fourがリストアップされており item threeのなかには、 item3.1、3.2、3.3が 子供のリストとしてレスト、 入れ子になっています このようにリストを入れ子にする時は liタグのマークアップの仕方が 少し変則的になりますので この書き方をきちんと 覚えておくようにしましょう このように順不同リストを使う事で 単に箇条書きを作るだけではなく メニューやフォームの要素、 或は製品情報など、 様々の情報を一覧化、 グループ化する事ができます このレッスンでは順不同のリストを 定義する為のulリストについて学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

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

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

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