①HTMLマークアップ練習

HTML基礎

HTMLは、Webサイトの文章に意味を持たす言語になります。
今回の動画では、Webサイトの文章にどういった意味か？を適切に付ける内容になります。
適当に指定してしまうと、サイト構造的に問題が出てしまいますので、適切なマークアップをするように心がけましょう。

この動画で使用しているテキストデータ

https://docs.google.com/document/d/1RgdqZv8gqCEXnjg5meUm0jKOfrrovJfgs1kwFeEn4i0/edit

◎動画内で使用している拡張機能
html5-outliner
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja

今回書いたコード

<header>
    <h1>チワワが可愛すぎてつらい</h1>
    <p>最終更新日：<time datetime="2022-1-30">2022年1月30日</time></p>
    <img src="./img/main.jpeg" width="500" alt="正面をみている茶色のチワワの画像">
  </header>

  <main>
    <section>
      <h2>チワワの外見</h2>
      <p>身体の大きさは概して小さいが、均一ではない。毛色も多種多様である。多くの国のケネルクラブでは「体重6ポンド（約2.7キログラム）以上はショードッグとして失格」としか規定されていない（JKCにおいては実情に鑑みて「2.8キログラム以下」であった数値が「3キログラム以下」に変更された）。近年の小型化ブームにより、（特に日本では）飼い主側に小型の個体を求め、賛美賞賛する傾向が強くなりつつあり、供給側もそれに応えてどんどん小型化しているという犬種の健全化という観点からは大変危険な実情がある。
        鼻吻はやや詰まっており、大きな瞳は毛色と同様に黒や茶褐色などの様々な色が認められる。体温調節を担う耳は頭部に対して大きく、僅かに外側へ反ったたち耳。短毛種のスムースコートにパピヨンやポメラニアンを交配して作られた長毛種のロングコートがある。また、チワワならではの特徴としてはアップルドームと呼ばれる額が挙げられる。その名の通り、リンゴのような丸みを帯びた形に由来するものである。</p>


      <a href="https://ja.wikipedia.org/wiki/%E3%83%81%E3%83%AF%E3%83%AF" target="_blank" rel="noopener">チワワの解説にリンクする</a>
    </section>


    <section>
      <h2>チワワの種類について</h2>

      <ol>
        <li>ロングコート</li>
        <li>スムースコート</li>
      </ol>

      <section>
        <h3>ロングコート</h3>
        <p>全身の被毛が長いタイプのことをロングコートと言います。また、耳・首元・四肢・尾・お腹周りには豊かな飾り毛があるのが特徴で、<em>日本ではロングコートの方が人気が高い傾向</em>にあります。毎日のブラッシングが必要なので、スリッカーなどで被毛のお手入れをしてあげましょう。</p>
      </section>

      <section>
        <h3>スムースコート</h3>
        <p>飾り毛もなく、全身の被毛が短いタイプがスムースコートです。また、ロングコートに比べると被毛のお手入れもしやすいと言われています。<strong>ちなみに、スムースコートはアメリカで人気が高い傾向</strong>にあります。ロングコートよりは被毛のお手入れがしやすい傾向にあります。</p>
      </section>
    </section>

    <section>
      <h2>チワワの毛色の種類</h2>

      <ol>
        <li>単色（ソリッドカラー）</li>
        <li>2色（パーティーカラー）</li>
        <li>トライカラー</li>
      </ol>

      <section>
        <h3>単色（ソリッドカラー）</h3>
        <p>1色のみで構成される単色の毛色のことを、ソリッドカラーと言います。クリーム、レッド、フォーン、ホワイト、セーブルなどの毛色がこれに該当し、チワワの場合は、単色と言っても顔周りなどのごく一部に別のカラーが混じることもあります。</p>
      </section>

      <section>
        <h3>2色（パーティーカラー）</h3>
        <p>ブラック＆ホワイト、フォーン＆ホワイトなど、ベースとなるカラーに白色の差し色が混じることが多い毛色です。ホワイトの部分は胸部やあごの下辺りに入ることが多く見られます。また、チョコレートタンなどのベースとなる2色の毛色で眉毛のような斑点が入ったタイプもパーティカラーに分類されます。</p>
      </section>

      <section>
        <h3>トライカラー</h3>
        <p>チョコレートタン＆ホワイト、ブラックタン＆ホワイトなど、ベースとなる2色の毛色の特徴に加えて、眉毛のような斑点が入り、3色の毛色を持つチワワをトライカラーと言います。</p>
      </section>
    </section>
  </main>

  <footer>
    ナビゲーション
  </footer>

講座を完了したらクリックしてね！

HTML基礎

①HTMLマークアップ練習

HTMLコーディングの役割について知ろう

エディターを準備して便利機能を使おう

VSCの使い方を知ろう！

ファイルを作成してみよう！

基本となるHTMLを書いてみよう

HTMLの基本のタグについて知ろう！

aタグの使い方について学ぼう

imgタグを使って画像を表示させてみよう

パスについて理解しよう

①HTMLマークアップ練習

②HTMLマークアップ練習〜アウトラインタグについて理解しよう〜

コンテンツモデルについて理解しよう

【理解度チェック】HTMLマークアップ課題

tableタグについて理解しよう！

お問い合わせフォームについて理解しよう！

拡張機能「Markuplint」の活用方法