[プログラミング]初心者が勉強したことメモ!HTML リストを作る
  1. タグの使い方!

Programming

プログラミングの勉強を始めて1か月が過ぎました。難しくもあるものの、楽しさもあります。サクサク作れるようになればどんなに楽しいことかと思います。

プログラミングの勉強は楽しいです。独学でも意外と出来るんですね。とは言ってもまだマークアップ言語の段階なのでそれほど難易度は高くないかもしれません。

リストタグの用途と使い方

今日はリストを作って順番にする<ol>タグについて学びました。便利な機能なので覚えておくとhtmlでサイトを作る際、まとめ系の見やすいサイトにしたりすることが出来ます。
 
きれいに並べて表示させることが出来るので見た目の印象もキチンとした印象を与えるものになって好感を持たれやすいサイトになるかなと思います。
 
htmlは<タグ>を使いますのでそれぞれの用途を理解することはとても重要です。見た目にすべてが出てしまうので、使い方を少しづつ覚えて行く事が出来ます。でもそんなに難しくない作業です。

リストタグの書き方

<ol>タグとreversed

実際に書いてみました。
<ol reversed start=”10″>
    <li>HTML入門</li>
    <li>CSS入門</li>
    <li>JavaScript入門</li>
  </ol>
 
覚えるポイントは
<ol>タグで囲んで<li>で囲むと連番の番号がきちんとついたリストになります。reversedタグをつけるなら逆から番号が振られるのでこれも便利な方法です。
 

See the Pen html<li>タグ by toshilog365 (@toshilog) on CodePen.

<ul>タグと<li>タグの使い方

 見やすいサイトに仕上げるためにリストに段落を付けたいと思う事があります。きれいにまとめて表示させるために使うタグです。
 
<h2>レッスン一覧</h2>
  <ul>
    <li>
      HTML入門
      <ul>
        <li>基礎文法</li>
        <li>実例</li>
      </ul>
  </ul>
    </li>

覚えるポイント

<ul>タグで囲んで <li>で囲むと入れ子の形で表せるので見やすいサイトを構築できることもわかりました。

See the Pen html <ul><li>タグ by toshilog365 (@toshilog) on CodePen.

<di>タグの使い方

サイトの細かな説明をしたいと時がありますが、そんな時に使うのが<di>タグです。

説明リスト作るときには<di>description listタグを使います。
説明をする時に使うのはdd(description detail) タグを使います。

  <h2>よくある質問</h2>
  <dl>
    <dt>質問1</dt>
    <dd>回答1</dd>
    <dt>質問2</dt>
    <dd>回答2-1</dd>
    <dd>回答2-2</dd>
    <dt>質問3-1</dt>
    <dt>質問3-2</dt>
    <dd>回答3</dd>
  </dl>

See the Pen html <di>タグ 説明リスト by toshilog365 (@toshilog) on CodePen.

まとめ

サイトの見た目や分かりやすさを表したいと思います。ユーザーがサイトに来てくれた時に出来るだけ長くとどまってくれるようにするためにも、よく整えられたウェブページに仕上げて行きたいと思います。

その為にタグの意味と使い方を理解する事は重要である事がわかりました。覚える事はたくさんあるかもしれませんがどんどん手を動かしてゆくならば、習得もそれだけ早くすることが出来る感じです。

それでは初心者ですが頑張ってマスターしてゆきたいと思います。

もしプログラミングを最短でマスターしたいのであるならば、忙しい人にはオンラインスクールがおススメです。

習得に時間がかかる事は間違いありません。短時間でマスターするためにはオンラインで受講できるプログラミング講座おススメです。無料体験レッスンをするならCodeCampがおススメです!

コメント

Translate »