HTML5のタグを整理してみる

HTML5のタグを整理してみる

今さらですが、HTML5の追加タグについて、解説書やブログ記事など人によって使い方がことなるので、もう一度整理してみることに。

DOCTYPE宣言や文字コード指定、IE旧バージョンやスマホ対応など、<head>タグ内の設定については割愛します。
当方で利用している headタグのテンプレはこちらでご確認を。

まずはややこしいセクショニングのタグについて。

main / article / section / aside

どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。

Webデザインの進化?2015

このサイトは備忘録サイトなので、昔のデザインも残してます。

例えば当サイトこちらのページのメイン画像。
2010年頃までは、Flashがまだよく使われていたので、こんな感じのデザインになってました。このアニメーションもモバイル端末じゃもう見えないのでしょう。

Googleカレンダーの埋込とカスタマイズ

サイトにGoogleカレンダーを埋め込んでスケジュール表のようにする方法です。

たいした改良はできませんが、デフォルトよりはマシになると思います。

「gcalendar-wrapper.php」がマルウェアと判断されるようになったため、純粋なGoogleの埋め込みコードにしたほうが良さそうです。(2017/01/14追記)

Googleサービスの仕様が変わると正しく表示されなくなるかもしれませんのご注意ください。

Syntax Highlighter

記載したソースコードを見やすくしてくれるやつです。
プログラムなどの解説サイトなどでよく使われているますね。

こんな感じの。

<p id="code">
   表示したいHTMLソース
</p>
p#code:before {
   content:"表示したいCSSソース";
}
var msg = '表示したいJavaScriptソース';
document.getElementById("code").innerHTML = msg;

一般のサイトではあまり使わないと思いますが参考までに。

通常のHTMLページに「Syntax Highlighter」を導入する方法はこちらのサイトなどを参考にしてください。

通常(HTML)版のサンプルはこちら。

URL(URI)パラメータの文字列デコード

GETパラメータでエンコードされた文字列をデコードする方法(javascript)

var str = decodeURI("エンコードされた文字列");
document.write(str);