メモ

メモを入力してみよう!


Lesson 06「リストを作ってみよう!」

学習概要

ul,liタグを使ってリストを作ってみよう!
リストはホームページのメニューなどにも使われているよ!

補足

コメントはありません

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 06「リストを作ってみよう!」 の内容※SEO用のため読めません

前回と同じくフォルダを作成しましょう。[ test ]フォルダを開き新規フォルダの作成を行います。
フォルダを作成したら最初に作ったHTMLファイルを中にコピーします。それではコピーしたファイルを編集していきましょう。
bodyタグの中にこちらのコードを書いてみてください。ファイルの編集が終わったら保存をしファイルを開いてみましょう。

[ ・1つめ ・2つめ ]と書かれたリストが表示されていれば完成です。

はいではコードの説明をしていきたいと思います。まずリストというものを作るにはbodyタグの中にulタグというものを使ってリストを作っていきます。ulタグの中にliタグというものを使っていきます。

今回liタグが2つ付いてます。liタグ、1つつける事にリストが1つ作られるような形になってます。なのでliタグの中に文字列を入れていただければそれがリストとして表示されるような形になります。

実際に画面を見てみると[・1つめ]という書かれたリストが表示されて[・2つめ]と書かれているリストが表示されているという形になってますね。このリスト、実際どんなとこで使うのというところなんですけども、例えばホームページのメニューこういうところはリストで作られてるんですね。

こういうリストっていうのは結構対応しますので覚えていただければと思います。もうひとつ補足なんですけれども、今回このリスト形式というものul、liタグを使って書きましたけれども、こういう風にですね実際画面の方を見てもらうと、[・]がついて[ ・1つめ ・2つめ ]という形でリストが表示されてます。

それならば例えばpタグ、パラグラフのタグを使って[・]つけて[ ・1つめ ・2つめ ]ってやっちゃってもいいんじゃないのって思われるかもしれないんですけれども実際画面上で表示させてみてもそんなに変わりはないんです。ただコンピューターの中の方表では見えないんですけれども中の方で理解されている内容っていうのは厳密に言えば違ってきます。どういうものかと言うとul、liタグを使った場合にはこれはリストですよ、でリストとして1つめというもの2つめというものがありますよ、という形で理解されてます。

ただpタグを使った場合、そのタグの中身はパラグラフ、段落になってますよ、段落としての役割を持ってますよ、という意味になります。その段落としてその中に文字列があって[ ・ ]があって1つめですよ、2つめですよ、という形の理解になってます。なので普通に人が見るぶんにはそんなに変わりはないんですけれども、コンピューターの中で理解されてる内容が違ってきますよ、っていうことになります。なのでGoogleの検索とかでもこういうタグを見て実際検索に引っ掛けたりしてますので、タグによって役割とは違ってきますのでそういうところをしっかり理解していただいて、ちゃんとタグをつけていただければと思います。

はい、いいかがだったでしょうか。ul、liタグを使ってリストを作っていくっていうことですね。実際に違うタグを使っても同じような見た目にはなりますけれども、意味は違うんだということを覚えておきましょう。