HTML入門講座|リストについて学ぼう

HTML
うさタブ
うさタブ

今回はHTMLでリストを作ってみるッピよ~

ユウキ
ユウキ

リスト?

うさタブ
うさタブ

箇条書きともいうッピね~! 実際みてみると分かるッピ!

必要なもの

  • じゃがいも
  • にんじん
  • たまねぎ
  • お肉

手順

  1. お肉以外のすべての材料を洗って、皮をむき、食べやすい大きさに切ります
  2. 次に鍋に油を引いて、たまねぎ、お肉、にんじん、じゃがいもの順に炒めます
  3. 炒めおわったら水を加え、中火で煮込みます
  4. 沸騰ふっとうしたらアクをとり・・・
ユウキ
ユウキ

なにそれ? カレーの作り方・・・・?

うさタブ
うさタブ

こういうのがリストという見本ッピヨ!

ユウキ
ユウキ

あー、なるほど

この記事で学べること
  • ホームページでのリストの作り方
  • 1,2,3,4,・・・など数字でのリストの作り方

箇条書きリストを作ってみよう

必要なもの

メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザ

●リストを作ってみよう

うさタブ
うさタブ

それではまず●リストを作ってみるッピよ~

うさタブ
うさタブ

<body></body>の間に下のコードを入れてみるッピ!

<ul>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>
サンプルコード
<html>
<head></head>
<body>

<ul>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>

</body>
</html>
ユウキ
ユウキ

お! さっき出た●のやつが出てきた!

<ul>リストの解説

うさタブ
うさタブ

<ul>●のリストを作るタグッピ!

<li>項目を作るタグッピね~!

うさタブ
うさタブ

解説すると、

<ul>●リストを作ります

<li>項目はデータ1</li>項目を終わります

<li>データ2</li>

<li>データ3</li>

</ul>●リストを終わります

という意味ッピ!

ユウキ
ユウキ

こんなタグがあるんだな~

数字リストを作ってみよう

うさタブ
うさタブ

次は、

数字のリストを作っていくッピよ~!

うさタブ
うさタブ

<body></body>の間に

<ol>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ol>

と入力するッピ!

ユウキ
ユウキ

また<li>のタグ

さっきの●リストでも使わなかった?

うさタブ
うさタブ

数字のリストも、●リストも、

項目は同じ<li>タグで作れるッピよ!

最初のやつが●か数字かを変えるだけッピからナ!

ユウキ
ユウキ

なんだかややこしいな~

うさタブ
うさタブ

こういうものとおぼえていくしかないッピ・・・

まあ一度覚えれば他でも応用が効くぶん、楽といえば楽ッピネ~!

ユウキ
ユウキ

お、できたぜ!

サンプルコード
<html>
<head></head>
<body>

<ol>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ol>

</body>
</html>

<ol>リストの解説

うさタブ
うさタブ

<ol>数字のリストを作るタグッピ!

うさタブ
うさタブ

<li>はさっき解説したのと同じ、項目を作るタグッピネ~!

うさタブ
うさタブ

解説すると、

<ol>数字のリストを作って下さい

<li>項目はデータ1</li>項目を終わります

<li>データ2</li>

<li>データ3</li>

</ol>数字のリストを終わります

という意味ッピ!

ユウキ
ユウキ

あんがい簡単なんだな! オレにもできそうだぜ!

全体のコードの確認

<html>
<head></head>
<body>

<ul>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>

<ol>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ol>

</body>
</html>
学習のまとめ
  • <ul>で・のリストを作成できる
  • <ol>で数字のリストを作成できる
  • <li>でリストの項目を作成できる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

HTMLプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました