ホームページ制作 京都 / WordPress DTP

Kyoto Web Design 8acrewood blog

8acrewoodのブログです。ブログサンプルも兼ねております。

HTML5にはとりあえず、X-UA-Compatibleの指定と、html5shivの導入が無難?

Webページを制作するときにはHTML5で制作することがほとんどになってきましたが、
新しいページを作る際には、いまだにIE対策で悩みます。

「そろそろ古いIEは放っておいてもいいんじゃないか?めんどいし。でも気になる、、、」
という気分がぬぐえません。

そこで多くの人が取り入れているのがタイトルにある、
X-UA-Compatibleの指定と、html5shivの読み込みだと思います。

 

前者はレンダリング方法を指定してくれます。
IE10以前のもののレンダリング方法を最新の指定である”edge”に統一してるようです。

後者は<article>などHTML5以降の新しいタグを古いブラウザでも認識してくれるようになります。
意外と大した働きはしてくれませんし、挙動が遅くなるという噂が絶えません。

そのほかにもいろいろありますが、正直なところどれも中途半端な気がします。
Internet Explorerは日本のWindowsユーザーのほとんどが使用していると考えてもよいくらいなので、
本気で古いIEに対応させようと思うなら、XHTMLで制作したほうが良いかもしれません。
そのうちHTML5に作り替える羽目になるかもしれませんが。

HTML5のimgタグには、widthやheight属性はいらない?

ホームページを作るときに、画像は欠かせません。
画像はもちろん、imgタグや、cssのbackground-imageなどを使用します。

従来imgタグには、alt、height、widthなど様々な属性を必ず入れなくてはならなかったのですが、
最近ではheight、widthなどはエラーになるようです。

ホームページを制作する際に必須のチェッカー
W3C Markup Validation Service
でチェックすると、

Bad value 200px for attribute height on element img: Expected a digit but saw

というようなエラーが出ます。
以前は見ることのなかったエラーなので、HTML5の規定がまた変わったのかもしれません。

W3CのWeb制作概念から考えると、レイアウトなどはすべてcssで行う。
というのが基本なので、当然の変化なのかもしれません。

何より、imgタグには属性が渋滞しがちなので、ソースがすっきりしてよい変化だと思います。

まだまだ確証はないので不安な方は必ずバリデーションサービスを使用しましょう!

アンカーポイントを付けて、ページ内リンクをつくる

ホームページ制作では、ときどき縦長のページを依頼される時があります。

おそらく1ページの料金で済ませてほしいという依頼者の意向なんでしょうが、
閲覧者にとっては、多少めんどくさいページになってしまいます。

そんな時はページにアンカーリンクを作成し、
同ページ内の好きな場所へ移動できるようにしておきます。

作成方法は簡単です。

<a href=”#000″></a>
まず、上記のようにリンクボタンか何かに<a>タグをつけます。

で、飛びたい場所に、
<a name=”000″>
を貼り付けます。

また、リンク元には、”#ooo”で指定するので、
<div id=””></div>のように
idを指定した場所にも飛べます。

リンク元には、見た目にわかりやすいリストやボタンなどを作成しておくとよいと思います。

また<a>タグには色んな属性があって便利なのでぜひ勉強しておきましょう。