素材の壺

今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまでレイアウトを組む際にclass等で命名していたであろう個所もタグとして明確に用意されたわけですが、今回はこのHTML5で追加されたタグの中の<main>タグについて。

IEの存在

2019年になってもまだ尚、制作者を悩ませることのあるIEという存在。なぜ今だに検証対象に入ってしまうのか。という事を言い始めるとキリが無いのですが、クライアントから検証必須と言われれば対応するしかないのが悲しいところ。

とはいえ基本的な組み方をしていればIEとはいえそんなに独特な崩れや挙動を見せることは少なくなっていた気がしていたのですが、久しぶりにIE独自の不思議な崩れに出くわしてしまいました。

mainタグにCSSが適用されない

<main>といえば文書のメインコンテンツを表すタグで、以下のような構成はよく見かけます。

  

    ヘッダー
  
  

    
コンテンツ１
    
コンテンツ２
  
  

メインには以下のようにCSSを適用したりしています。

main {
  width: 1080px;
  margin: 0 auto;
}

この例だと横幅1080pxで中央寄せ、という感じですね。このCSSが適用されず、IEだけ崩れた状態になる、という事象に出くわしてしまったわけです。

IE流の解釈ではmainタグはインライン要素

ChromeやFirefox等のブラウザでは<main>はブロック要素として解釈されるので、<div>と同様、widthを指定しなければ横幅100％となります。しかし何故かIE流の解釈だと、<main>はインライン要素、display: inline なのだそうです。なんてことでしょう。インライン要素にwidthを指定したところで反映されず、もちろんmarginも想定通りには効きません。という事で、以下のように記述して解決する事となりました。

main {
  width: 1080px;
  margin: 0 auto;
  display: block; /* 追記 */
}

せめて新しく追加された仕様くらい統一してほしいと思いつつ、IE対応ももうしばらくの辛抱なのかもという淡い期待も持ちつつ。
IEだけmainタグにCSSが適用されない時の対処法でした。