アフィリエイト用サイトを作成するために「HTML5&CSS3入門」ってカテゴリーを新たに作りました。
別カテゴリーが必要なほどの情報量です。
サイトの表示サイズについて少し書きましたが、そんな簡単な問題ではありませんでした。
HTMLはテキストのタイトルや見出しといったものを指定する役割があり、CSSはそれらのレイアウトや色などを指定する役割を担っているらしい。
なんのこっちゃ。
って思うのは私だけでしょうか。
インターネット黎明期は、タイトルとかをタグで設定するだけで、文字が大きくなったりしてちょ～便利ってなったんだろうけど、HTML5ではさらに厳密になりましたってのが理解不能。
章や節といったまとまりは「section」とか、内容が独立したコンテンツを表示する場合は「article」とか。
文字を大きくしたり空白を開けたりすれば事足りるようなものでしょ。
そんな事を考えてると、C言語とObjective-Cを同時に勉強しはじめた時もおんなじような事を考えてたっけ～って思い出しました。
とにかく面倒くさがりで、効率が悪いな～って思うとイライラするんです。
男でも更年期障害ってあるんかな？
ともかく、サイトを作るには覚えるしかないわけです。
イライラと戦いながら少しずつ進めて行くしかありませんな。
そこで、まずはすべてのHTMLファイルで共通する部分をテンプレート化する事にしました。
参考にさせて頂いたサイトは以下の通りです。
アシアルブログてっく煮ブログHTMLファイルで共通化する部分は、
・ドキュメントタイプの定義HTML5より前のバージョンでは色々と書かなければいけなかった見たいですが、HTML5では次の文章はHTMLですよって宣言だけで良いみたいです。
・文字エンコーディングの指定UTF-8が推奨されている。らしい。
・reset.cssへのリンク設定ブラウザ毎にデフォルトのCSSが設定されていて、望んだレイアウトにならない場合があったりするので、一旦それをリセットするためのCSSファイルへのリンクを設定。
・ベースとなるCSSファイルへのリンク設定基本的なレイアウトに必要なCSSファイルへのリンクを設定
・viewportの設定表示するデバイスの解像度に応じてコンテンツサイズや拡大率などを設定する。
・jQueryの設定javascriptのライブラリの１つ。CDNを利用するための設定。便利なんだとか。なにがどう便利かは、使えるようになるまでは実感出来ないのでしょうけど。
・Modernizrの設定こちらもjavascript。CDNを利用するための設定。ブラウザがHTML5&CSS3の新機能に対応しているかどうかを判別してくれるそうです。
・IE向けの設定IEはここ数年利用してませんが、HTML5とCSS3への対応が遅れている？（もしくは敢えてしないのか）らしく、別途対応が必要のようです。
以上の８項目です。
アメブロにコードを貼るのは難しいみたいなので、単純にコピペしてみました。
何かの記事で、「Webサイト上に貼付けられているソースコードもウィルスだ！」なんて書かれていたのを思い出しましたが、iPhoneアプリの開発でかなり助けられた経験上、分かる人にはくだらないほど初歩的なコードでも誰かの役に立つかもしれませんのでさらしてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>template</title>
<!-- reset.cssの設定 -->
<link rel="stylesheet" media="screen" href="reset.css">
<!-- base.cssの設定 -->
<link rel="stylesheet" media="screen" href="base.css">
<!-- Viewportの設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- jQuery,jQuery Mobileの設定 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<!-- Modernizrの設定 -->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<!-- IE向けの設定 -->
<!-- [if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<p>
テンプレート
</p>
</body>
</html>
間違いなどご指摘いただけるとありがたいです。
