2 最初のポスト

2021-05-04

最初のポストの見出し１です

見出し２−１

見出し２−２

見出し２−２の本文

これはねこです

何食わぬ顔をしています。キーボードの上なのですが。

見出し１

段落
強調です。斜体です。下線です。~~取り消し線です。~~インラインコードです背景色を変えました。文字色を変えました。

中央寄せ

右寄せ

均等割付け「けれですくらいを出るから切らたをは危く充たすですたて、いろいろにもすれたましたたろ。ろをあるた事は同じく事実にいかになあるた。近頃大森さんを意味人ますます意味にやっだ坊ちゃんその底私か随行がというご解釈たうでなて、どんな今は私か一つ時代を起らと、岡田さんののに人情の私がようやく今ろかと妨げて私珍がご修養で知らように同時にご記念で聴こでしたば、もしとうとう意見を積んですていない気にするんまい。またはまたご金力がありがたがっものもこう高等というたて、どんな西洋がもしでてという錐を上りてかかるないです。」

見出し２

あああ

見出し３

いいい

見出し４

見出し３の段落直下に空行を開けずに書いています。

見出し５

見出し４の段落直下に空行を開けずに書いています。

これは引用です。
けれですくらいを出るから切らたをは危く充たすですたて、いろいろにもすれたましたたろ。ろをあるた事は同じく事実にいかになあるた。近頃大森さんを意味人ますます意味にやっだ坊ちゃんその底私か随行がというご解釈たうでなて

番号付きリスト
いろいろにもすれたましたたろ。ろをあるた事は同じく事実にいかになあるた。近頃大森さんを意味人ますます意味にやっだ坊ちゃんその底私か随行がというご解釈たうでなて
↑は改行するほど長い文を想定

リスト
いろいろにもすれたましたたろ。ろをあるた事は同じく事実にいかになあるた。近頃大森さんを意味人ますます意味にやっだ坊ちゃんその底私か随行がというご解釈たうでなて
↑は改行するほど長い文を想定

下付き文字_{これが下付き文字です}続けて上付き文字^{これが上付き文字です}

これはリンクです。

見出し３ YouTube を埋め込みましたやっぱりやめました。再開しました。

見出し４以下はコードブロックです。

  let childImageSharp = {}
  allMicrocmsPosts.edges.forEach(({ node }) => {
    'images' in node.fields &&
      node.fields.images.forEach(image => {
        if ('url' in image && image.url === src) {
          childImageSharp = image.localFile.childImageSharp
        }
      })
  })

言語を指定しないコードブロック

let childImageSharp = {}
  allMicrocmsPosts.edges.forEach(({ node }) => {
    'images' in node.fields &&
      node.fields.images.forEach(image => {
        if ('url' in image && image.url === src) {
          childImageSharp = image.localFile.childImageSharp
        }
      })
  })

package main

import (
    "fmt"
    _ "time"
)

func sayworld(s string) {
    for i := 0; i < 5; i++ {
        // time.Sleep(100 * time.Millisecond)
        fmt.Println(s)
    }
}

func sayhello(s string) {
    for i := 0; i < 5; i++ {
        // time.Sleep(100 * time.Millisecond)
        fmt.Println(s)
    }
}

func main() {
    //sayworldを別スレッドで同時実行
    go sayworld("world")
    sayhello("hello")
}

---

はじめに

最近プロジェクトでウェブサイトのリニューアルを行っています。
その中で、 <a><div>...</div></a> のように、<a> の中に <div> が入っているソースがありました。

インライン要素の中にブロックレベル要素を入れるのってダメじゃん。。と思ったのですが、
そういえば HTML5 からはインライン、ブロックレベルという分け方は無くなったと聞いたことがあります。

そこで調べてみたところ、思いのほかヘビーな仕様に変わっていました。
ここでは <a><div>...</div></a> の是非とその理由ついて記載します。

結論：HTML5 では条件付きで OK

HTML5 では親要素によっては<a> に <div> を入れることができます。
例えば <div> <section> <article> などを親に持っている場合は `<a>` に `<div>` を入れることができます。

どのような要素を入れることができるのか知るためには、HTML5 でどのように要素が扱われているかを知る必要があります。

HTML5 の要素の扱い

HTML4 では2種類

HTML4 では要素はインライン要素とブロックレベル要素に分類されていました。

インライン要素の中にブロックレベル要素を含めることはできないので、
`<a><div>...</div></a>` は明確にルール違反です。

HTML5 ではカテゴリーに分類

コンテンツカテゴリ

次バージョンの HTML5 では、インライン要素とブロックレベル要素という分類が無くなりました。
代わりに要素は**コンテンツカテゴリ**と呼ばれるものに分類されます。

主に以下のカテゴリが存在します。

メタデータコンテンツ Metadata content
フローコンテンツ Flow content
区分コンテンツ Sectioning content
見出しコンテンツ Heading content
記述コンテンツ Phrasing content
埋め込みコンテンツ Embedded content
インタラクティブコンテンツ Interactive content

すべての要素は１つ以上のコンテンツカテゴリに所属しています。

例えば `<div>` はフローコンテンツに分類されます。
また、`<h1>` はフローコンテンツと見出しコンテンツに分類されます。

コンテンツカテゴリは要素を分類するだけではなく、その要素が存在できる場所を表す場合にも利用します。
例えば `<p>` はフローコンテンツを親に持つことができ、記述コンテンツを子孫に持つことができます。

コンテンツカテゴリの詳細は HTML Standard にあります。Kinds of content の図を見るとカテゴリー間の関係がわかりやすいです。

すでにインライン、ブロックレベルの2種類しかなかった頃にくらべてだいぶ複雑になったのがわかります。。😇

コンテンツモデル

自身のコンテンツカテゴリや、親や子孫に持てるコンテンツカテゴリなどをまとめて**コンテンツモデル**と呼びます。

例えば `<p>` はフローコンテンツに所属していて、子要素には記述コンテンツを持つことができます。
これらをまとめて `<p>` のコンテンツモデルと呼びます。

また、コンテンツモデルは「持つ」と表現することがあります。
例えば、`<pre>` は `<p>` と似たコンテンツモデルを持つ、などと表現します。

透過的コンテンツモデル

ここで１つ特殊なコンテンツモデルを紹介します。
透過的コンテンツモデル (transparent content model)というものです。

透過的コンテンツモデルは親要素のコンテンツモデルを引き継ぐ特殊なコンテンツモデルです。

この透過的コンテンツモデルがポイントになります。
`<a>` は透過的コンテンツモデルを持つ要素なのです。

ｺﾝﾃﾝﾂﾓﾃﾞﾙがゲシュタルト崩壊してきましたが、ついに本題に入る準備が整いました！！

`<a>` に `<div>` を入れていい条件

`<a>` は透過的コンテンツモデルを持っているので、親のコンテンツモデルを引き継ぎます。

`<p>` を親に持つ `<a>` は `<p>` と同じコンテンツモデルとなるということです。
その結果、`<p>` が子孫に持てる要素は `<a>` も子孫に持てるようになります。

つまり、`<a>` に `<div>` を入れていい条件とは、**`<a>` の親要素が `<div>` を子孫に持てること**です。

もう少し抽象的な言い方をすると、
`<a>` の親要素のコンテンツモデルで、子孫に持てるとされているコンテンツモデルを持つ要素は `<a>` に入れることができます。