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>でリストの項目を作成できる

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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