今更ながら、HTMLで新しく知ったタグの使い方を紹介します @TECH CAMP #18

　どうも、最終課題となるフリマアプリのクローンサイトの制作で忙しい、とだです。コード書いたり勉強したりとやらなきゃいけないことが多い！どうしよう！遊びたい！！！

　とにかく小ネタでいいからアウトプットをしなければと、今日は初心に帰って勉強し始めの頃に学んだHTMLについて(並行してhamlについて)アウトプットしようと思います。

今まで知らなかった要素、結構ある

　今日の小ネタは、最終課題でviewファイルをマークアップしていく中で覚えたことです。今までほとんど<div></div>で全て作り上げていたようなもんなんですけど、流石にちょっと…という事で勉強したことを紹介します。

<section></section>

　HTML5から追加されました。ブロックレベル要素です。<section>タグで囲まれた部分が、Webページの一つのセクションであることを示します。セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。具体的には導入部分、バナー、新着情報などを記載するときに使います。汎用的なセクションを表すため、使いどころがわかりづらいですが、ヘッダー<header>、フッター<footer>、ナビゲーション<nav>、記事<article>、等の具体的なわかりやすい部分に対応するもの以外の場所で使えるものだと覚えておこうと思っています。また、セクションの内容の見出しをつけることができるものであるかも<section>を使うかの判断基準になります。つまり、<section>と<h1>等のタグは一緒に使うことが多いということも覚えておくといいかもしれません。

−HTML5タグリファレンス

: 汎用セクション要素 - HTML: ハイパーテキストマークアップ言語 | MDN

<span></span>

  インライン要素です。特に<p>タグの中で使うことが多いタグです。「SPAN」とは、単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。<div>タグと違って前後に改行が入らないのも特徴です。<p>タグで、ある文を書いたときに強調したい単語、例えば色を変えたい、太字にしたい等にCSSを当てるために使われたりします。

spanタグとは｜コーディングのプロが作るHTMLタグ辞典

<br>

　インライン要素です。「BR」とは「Break」の略で、改行を行うためのタグです。終了タグなしで使います。似たタグに<p>タグがありますが、文章を明示的に改行するためには<br>タグを用います。自分はこれを知らなかった時、テキストエディタでそのまま改行していましたが、きちんと<br>タグを使うことによって間違いなく綺麗に改行された文章がページに表示されるようになったので、知れてよかったと思いました。

hamlでの利用例

.main
 %section.firstView
   .firstView__content
     %h2.firstView__content__copy
       %br 人生を変えるフリマアプリ
     %p.firstView__content__text 
       FURIMAはだれでもかんたんに出品・購入できる
       %br フリマアプリです
     .firstView__content__btn
       = link_to '#' do
         .applebtn
           = image_tag 'app-store.svg'
       = link_to '#' do
         .googlebtn
           = image_tag 'google-play.svg'
 %section.introduction
   %h2.introduction__title 
     FURIMAが選ばれる3つの理由
     .introduction__sub
   %ul.lists
     %li.list
       .list__img
         %span.number 1
         = image_tag "pict-reason-01.jpg"
       %h3.list__sub
         %span 3分
         ですぐに出品
       %p.list__explanation
         スマホで入力するだけで簡単に出品できる！
     %li.list
       .list__img
         %span.number 2
         = image_tag "pict-reason-02.jpg"
       %h3.list__sub
         %span シンプル
         で使いやすい
       %p.list__explanation
         めんどくさい入力は必要なく、検索も購入もスムーズ！
     %li.list
       .list__img
         %span.number 3
         = image_tag "pict-reason-03.jpg"
       %h3.list__sub
         手数料
         %span 業界最安
       %p.list__explanation
         最大3%でお得に出品&購入！
 
 

　hamlでは閉じタグが要らないので、コードがよりスッキリした見た目になるので好きです。

終わりに

　とにかく今回は小ネタを、ということで久しぶりになってしまいましたが紹介しました。まだまだ今後もアウトプットすべきものが出てくるはずなので、きちんとまとめた上で紹介したいと思います。