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

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

うさタブ
うさタブ

上手くできたッピか?

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

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

スポンサーリンク

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

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

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

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