Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

少し変なSVGのフォールバック方法

imgタグ等でSVGを使用すると、ベクター画像のため拡大しても粗くならなくていいですね?ですがSVGは下記のようにIE8に対応していないので、IE8用のフォールバック対策が必要です。


今回は、そのフォールバック方法を3つほど取り上げて紹介したいと思います。

  • 1.image要素を使ったフォールバック
  • 2.CSSハックを使ったフォールバック
  • 3.Object要素を使ったフォールバック

1.imageタグを使ったフォールバック

IE8がsvgタグを認識しないことを利用したフォールバックです。

<svg width="445" height="319">
	<image xlink:href="/themes/callisto@blog2015/sample/images/header_logo.svg" src="/themes/callisto@blog2015/sample/images/header_logo.png" width="445" height="319"/>
</svg>

下が実行結果になります。

CSSハックを使ったフォールバック

下のように\9をCSSのプロパティの末尾につけることで、IE8のみにスタイルを適応させることができます。

.logo{
    background: url(/themes/callisto@blog2015/sample/images/header_logo.svg) no-repeat;
    background: url(/themes/callisto@blog2015/sample/images/header_logo.png) no-repeat\9;
    max-width: 445px;
    padding-bottom:45%;
}
<div class="logo"></div>

下が実行結果になります。

3.Object要素を使ったフォールバック

object要素のタイプをSVGに指定して、IE8に認識させないフォールバック方法もあります。

<object type="image/svg+xml" data="/themes/callisto@blog2015/sample/images/header_logo.svg">
  <img src="/themes/callisto@blog2015/sample/images/header_logo.png">
</object>

下が実行結果になります。

まとめ

個人的には、これらのフォールバック方法の中では、変な要素を利用しない分、2番のやり方がスマートだと思います。
ただ、SVGに対応していないブラウザではsvg画像をJavaScriptでpng画像に置き換える方法が一番いいとは思います。
それはまた別の機会に解説しますね。


見出しレベルについて調べてみた

今日は名古屋マークアップ勉強会に参加してきたので、自分が今回調べたHTML5のアウトラインについてブログに書きたいとおもいます


HTML5のアウトラインのルールを理解していますか?

見出しレベルに関する知識が曖昧だったのでブログに書いておこうとおもいます。
私はそもそも、h1 -> h2 -> h3と順番に見出しレベルを記述しないといけないとおもいこんでいました。しかし下のようにhタグを記述しても良いようです。

<h1>あああああ</h1>
<h2>いいいいい</h2>
<section>
    <h2>ううううう</h2>
    <h4>えええええ</h4>
</section>
<h5>おおおおお</h5>

この場合の見出しレベルはどのようになるとおもいますか?

  1. ああああ
    1. いいいい
    2. ううううう
      1. ええええ
    3. おおおおお

こうなるんですよ。ここで、いいいいいおおおおおが同じ見出しレベルになるというのは驚きじゃないですか??
実は上のソースは下のソースの用に解釈されています。

<h1>あああああ</h1>
<h2>いいいいい</h2>
<section>
    <h2>ううううう</h2>
    <section>
        <h4>えええええ</h4>
    </section>
</section>
<section>
    <h5>おおおおお</h5>
</section>

では、ここでアウトラインが決定されていくルールをまとめたいと思います。

ルール

  1. 見出しレベルが正しくないと、SECTIONが暗示的に挿入される
  2. SECTIONで開始する見出しタグはなんでもいい
  3. SECTIONで囲われると、見出しレベルが1つ下がる

1.見出しレベルが正しくないと、SECTIONが暗示的に挿入される

<section>
    <h1>あああああ</h1>
    <h1>いいいいい</h1>
</section>

セクションには大見出しが1つだけなので、上のソースは成立しません。ですのでブラウザは下のように解釈します。

<section>
    <h1>あああああ</h1>
</section>
<section>
    <h1>いいいいい</h1>
</section>

このように、無理矢理、sectionを分割するんですね。
では、下のケースはどうでしょう?

<section>
     <h5>あああああ</h5>
     <h2>いいいいい</h2>
</section>

このケースでも同じことが言えます。大見出しである、h5からh2に見出しレベルが変化することはありえないので、下のように解釈されます

<section>
     <h5>あああああ</h5>
</section>
<section>
     <h2>いいいいい</h2>
</section>

2.SECTIONで開始する見出しタグはなんでもいい

これはどういうことかというと、sectionの中は必ずh1で始まる必要はないということです。
下のソースのようにh4で始まってもかまいません。

<section>
    <h4>あああああ</h4>
</section>

3.SECTIONで囲われると上のSECTIONの大見出しより見出しレベルが1つだけ下がります。

<h1>あああああ</h1>
<h2>いいいいい</h2>
<h3>ううううう</h3>
<section>
    <h3>えええええ</h3>
</section>

例えば、上のようなソースの場合、いいいいいえええええは同じ見出しレベルになります。
ここで注意して欲しいのが、sectionの中がh1だろうが、h2だろうが見出しレベルは、上の大見出しのレベルより1つ下がるだけなのです。
つまり下のようになります。

  1. あああああ
    1. いいいいい
      1. ううううう
    2. えええええ

どうでしょうか?結構SECTIONや見出しレベルだけでも結構覚えることがたくさんありますね。
なお、見だしレベルは以下のサイトにソースを貼付けるとテストすることができます。
ご自身の目でソースを書いて見だしレベルの確認をしてみてください。
https://gsnedders.html5.org/outliner/

感想

ただ個人としては、いくらブラウザがSECTIONを暗黙的に解釈してくれたとして、それにたよってHTMLを書くと思わぬところでアウトライン構造が崩れたりするのであまり、今回のサンプルのような記述はおすすめできません。
その見だしの重要度に応じてそれに応じたレベルのhタグを指定するのが好きです。

参考

HTML5 のセクショニングとアウトラインアルゴリズムの再確認
https://gsnedders.html5.org/outliner/


divとsectionとarticleの区別がいまいちつかない

HTML5では、実に多くのタグが使えますね。これらタグはただ単にパーツとして使えるばかりではなく、機械に自分のサイトを読んでもらう時に有効です。
なので、divしかつかわないのは、機械に自分のサイトを伝えるボキャブラリーがないことと同義だということです。
そういう自分も宿題でHTMLのテンプレートを作ったが、div divしてるね。といわれたので悔しいので今日はHTML5のタグについて調べる日とします。

article

タグは、独立したコンテンツを示すための要素です。
articleには、ニュースサイトの記事、ブログや掲示板の投稿など、再利用・再配布可能なコンテンツを入れます。

section

セクションとは章や節や項のように、見出しとそれに関する内容というように階層構造(※アウトライン)になる範囲を定義する領域になります

さて、それぞれの要素の意味も解説しましたし、そろそろ本題に入っていきましょう。
これらの要素をどのように区別していけばよいのでしょう。

divとそれ以外の要素の見分け方

HTML5のマークアップ(1) article、section、divの使い分けによると、
divと、article/sectionの区別は簡単なようです。
ある装飾を実現するためのブロック要素にはdivを使えということだそう。
意味のある塊に対してはsection/articleを使いましょう

sectionとarticleの見分け方

どのサイトを調べても、

それだけで、独立して成り立つ内容ならarticle要素を使え

としか書いていません。困りましたね。
しかし、やっとわかりやすい記事を見つけました。
こちらです。
もう悩まない!HTML5の「section要素」と「article要素」の違いについて
ここには、

「RSSフィードで読み込んで、一つの記事として成り立つかどうか。」

で判断すればわかりやすいと書かれています。なるほどgunosyの記事一覧をイメージすればいいんですかね。

他にもHTML5は学ぶことたくさん

caption要素なんて知ってますか??

captionはテーブルのキャプションを示す要素で、tableの中に1つ目の小要素として記述することが出来ます
<table>
<caption>Atlas.jsのプロパティ一覧</caption>
<tr>
    <th>isSmartPhone</th>
    <th>basicConstructor</th>
</tr>

</table>

上のような記述ができて、このテーブルがなんであるかを説明するための要素だそうです。
いや〜HTML5の勉強は果てがないですね。頑張ります。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド