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

HTMLの４歩目

HTMLの４歩目

HTMLに関する勉強ブログ第４回です！

ほか記事の作成もあるためゆったりとした歩みではありますが、気長に待っていてくださると幸いです。

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

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

前はなにしたっけ？

前回に引き続き、前の回にした学習内容の復習を軽くやっていきます。

○リンク要素

タグ付けしたテキストがリンクを表していることを示す。

これだけでは別ページとつなげることは出来ない。

<a>”素人がゆく～HTMLの道～ step1″</a>

　　　　アンカー要素とも呼ばれているから、タグに使う文字は”a”

○属性

要素ごとに使用できる「属性」が複数あり、すべて含めるとかなりの数がある。

普段使いする「属性」は覚えておくのが吉。

<a href=https://halmal-culture.com/html1/>”素人がゆく～HTMLの道～ step1″</a>

　　　　上記で言えば”href”が「属性」に当たる。”href”の後ろにはURLを記述する。

今回は何をするの？

今回は「リスト要素」について紹介していきます！

前回紹介した「リンク要素」に語感は似ていますが、別記事なので読むのやめないでくださいね笑

こちらの要素は名前の通り、文章を箇条書きにしたいときに使用します。

次項から詳細を紹介していきます。

リスト要素

「リスト要素」にはタグが複数あり、「ul」,「ol」,「li」があります。

「リスト要素」はこれまでの要素とは異なり、組み合わせで使用します。組み合わせとしては「ul」と「li」、「ol」と「li」のパターンで使用します。

「ol」と「li」

前回の「リンク要素」とも組み合わせるとこんな感じになります。

上述の「リスト」を記述したコードはこちら。

<ol>
　<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>

コードだけ見ると、なんだかプログラムっぽくなってきた！って感じしますよね！

ちなみに上述のコードで前方に空きを作っていますよね。この空きのことを「インデント（字下げ）」と言うそうです。

「インデント(字下げ)」を行うことの意味としては、コードが長くなり複雑化した際に、タグの親子関係をわかりやすくするためです。

さきほどのコードに前回学んだ「属性」を組み合わせるとこうなります。

最初の文字がアルファベットになりましたね。コードは以下の通りです。

<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>