ケイビーエス 社員ブログ

セマンティックWeb

Webデザイナーはページを作成するとき、以前にも増してセマンティックとか、アウトラインとか、多くのことを考えながらコーディング作業をしているんですよ。それだけでなく4種類、5種類とブラウザの見え方もチェックして、ようやくページが完成となるんです。

突然いったい何を言い出すんだと思ったでしょ。それにタイトルの「セマンティックWeb」って耳慣れない言葉だし…。

今年のはじめ、会社のホームページをリニューアルしました。リニューアルだから当然見た目のデザインは変更されたのですが、実は目に見えないところでも大きなリニューアルをしたのです。

それはなにかというと HTML5 で作成したということなんです。「HTML5？　それが何？」って思う人も多いでしょう。確かに普通ホームページを見るときにそんなことを考えながら見る人はいないでしょう。そもそもそれまでのHTMLといったい何が違うの？ってことですよね。一口でいうと「HTML5っていうのは、文章構造に意味を付けたんだよ」ってことなんですが、「文章構造に意味？何のことだかさっぱりわからない」って人の方が多いかもしれませんね。

例えば一つのページがあったとします。その中には本文のアウトライン（文章の構造、階層のようなもの）をはじめ、社名やページのタイトルが書かれている部分、その他メニュー項目やリンクボタンなどがあったりします。そういった部分的な項目にそれぞれ意味を持たせて、「ここからここまでが本文（記事）ですよ」「ここの部分はメニュー（ナビゲーション）ですよ」などと、わかりやすく定義したものがHTML5なんです。

「でもそれってページを見る人にとって特別必要なんですか？」って疑問に思う人もいますよね。実は、これはページを見る人よりも「コンピュータが効率よく解釈できるようにしましょう」ってことなんです。人が判断するためのものではないんですね。じゃあHTML5で作成するとどんなメリットがあるの？……人が判断する為のものではなく、機械が判断する為のものって書いたけど、でもそうすることによって正しい検索結果が出たり、最終的には使いやすいWebサイトにするためのものってことなんですね。

私個人のサイトもリニューアル

ゴールデンウィーク中、私はずっと家にこもりっきりで、自分のホームページをリニューアルしていました。HTML5+css3で作成しましたが、それに加えモバイル用にも対応させてみました。

横幅によって見え方が違う

自分がモバイルデバイスを持っていないので、細部までの確認はできておりませんが、そこそこは見れるはずです。

ブラウザの横幅をギューと狭くしてみてください。表示が変わります。