素人がゆく～HTMLの道～ step5 【リスト要素～後編(ulとli)～】

HTMLの５歩目

HTMLの５歩目

HTMLに関する勉強ブログもついに第５回となりました！

まだまだ始まったばかりで、まだまだ基礎編ではありますが、よければ一緒に学んでいきましょう！

今回からは試験的に、画像数を減らして作成いたします。読みにくいと思われたらコメントなどで教えていただければ幸いです。

※この「素人がゆく～HTMLの道～」では「HTML素人の僕と皆さんで一緒に学べる」をコンセプトに作っていきます。

素人の僕なりに気になったところを深堀りしていければと思いますので、是非一緒に学んでいきましょう❗

前はなにしたっけ？

まずは、前の回にした学習内容の復習です。

前回の項目は今回学ぶ内容の前編なので、しっかりと復習しておきましょう。

○リスト要素

文章を箇条書きにしたい時に活用する。

「リスト要素」には、<ol>と<li>,<ul>と<li>の組み合わせがある。

<ol type=A>
　<li>
    <a href=https://halmal-culture.com/html1/>step1</a>
  </li>
  <li>
    <a href=https://halmal-culture.com/html2/>step2</a>
  </li>
  <li>
    <a href=https://halmal-culture.com/html3/>step3</a>
  </li>
</ol>

　　　　「属性」の”type”を使うことで箇条書きの仕方を変更できる！

詳しく知りたい方はこちらもどうぞ↓

素人がゆく～HTMLの道～ step4 【リスト要素～前編(olとli)～】

今回は「リスト要素」について紹介していきます！「HTML素人の僕と皆さんで一緒に学べる」をコンセプトに作っていきます。

今回は何をするの？

「ul」と「li」

「リスト要素」の中でも、「ul」と「li」の組み合わせについて紹介していきます。

それでは早速「ul」を使って書いたテキストがこちら。

あまり何が変わったかわからないですよね笑

そんなわけで前回使用したものはこちら。

「数字で箇条書きにするか」、「黒点で箇条書きにするか」だけの違いですね。

コードについても、勘の良い方なら前のコードとどう違うかわかってるかもしれませんね。

今回使用したコードがこちら。

<ul>
　<li>
    <a href=https://halmal-culture.com/html1/>step1</a>
  </li>
  <li>
    <a href=https://halmal-culture.com/html2/>step2</a>
  </li>
  <li>
    <a href=https://halmal-culture.com/html3/>step3</a>
  </li>
</ul>

「ol」を「ul」にしただけなんです！

用途別で使い分けていくのが良さそうですよね。