まずうずうずしてかなりなんとなくPoketボタンを追加する事にしました。
これは凄く簡単で公式にいってボタンのタイプを選んでコードを張るだけ。
ただしここで問題が一つ。上下に改行がかかってしまう点。
google先生に相談したところ修正方法は非常に簡単。
元からある.pocket-btnクラスがあるのでcssに「.pocket-btn{display:inline-block;}」を追加するだけです。
次。試験的にとあるページだけをHTML５にするよ！
何を直すの？
■HTML宣言部分が短くなるよ
HTML4.01
HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
↓"http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
■文字エンコーディング宣言が短くなるよ
HTML4.01
HTML5
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
↓HTML5
<meta charset="utf-8" />
■スタイルシート・スクリプト部分にtypeが要らなくなったよ
HTML4.01
HTML5
<link rel="stylesheet" href="mystylesheet.css" type="text/css" />
<script type="text/JavaScript" src="read/system_master.js"></script>
<script type="text/JavaScript">スクリプト内容</script>
↓<script type="text/JavaScript" src="read/system_master.js"></script>
<script type="text/JavaScript">スクリプト内容</script>
HTML5
<link rel="stylesheet" href="mystylesheet.css" />
<script src="read/system_master.js"></script>
<script src="read/system_master.js"></script>
<script >スクリプト内容</script>
■ヘッダー・ナビを置き換えるよ
HTML4.01
HTML5
ヘッダーIDをheaderタグへ、メニューIDはnavタグへ置き換わるよ。ヘッダーとメニューidに定義していた内容はそのままheaderとnavタグに定義するといいよ。
<div id="header">
<div class="lefthead"><h1>サイト名</h1></div>
<div class="righthead"></div>
<div class="blockclear">
<div id="menu">
<ul>
<li><a href="index.html"><img src="image/homeselect.jpg" alt="ホーム"></a></li>
<li><a href="gallery.html"><img src="image/gallery.jpg" alt="絵"></a></li>
<li><a href="http://ブログ" target="_blank"><img src="image/weblog.jpg" alt="ブログ"></a></li>
<li><a href="about.html"><img src="image/about.jpg" alt="このサイトについて"></a></li>
</ul>
</div>
</div>
</div>
↓<div class="lefthead"><h1>サイト名</h1></div>
<div class="righthead"></div>
<div class="blockclear">
<div id="menu">
<ul>
<li><a href="index.html"><img src="image/homeselect.jpg" alt="ホーム"></a></li>
<li><a href="gallery.html"><img src="image/gallery.jpg" alt="絵"></a></li>
<li><a href="http://ブログ" target="_blank"><img src="image/weblog.jpg" alt="ブログ"></a></li>
<li><a href="about.html"><img src="image/about.jpg" alt="このサイトについて"></a></li>
</ul>
</div>
</div>
</div>
HTML5
<header>
<div class="lefthead"><h1>サイト名</h1></a></div>
<div class="righthead"></div>
<div class="blockclear">
<nav>
<ul>
<li><a href="index.html"><img src="image/homeselect.jpg" alt="ホーム"></a></li>
<li><a href="gallery.html"><img src="image/gallery.jpg" alt="絵"></a></li>
<li><a href="http://ブログ" target="_blank"><img src="image/weblog.jpg" alt="ブログ"></a></li>
<li><a href="about.html"><img src="image/about.jpg" alt="このサイトについて"></a></li>
</ul>
</nav>
</div>
</header >
idは唯一クラスみたいなものだよ。なのである程度構造的なサイトであればきっとこんな感じだと思うよ。ヘッダーidがありその中にタイトルロゴそして各ページへ飛べるメニューリンク。<div class="lefthead"><h1>サイト名</h1></a></div>
<div class="righthead"></div>
<div class="blockclear">
<nav>
<ul>
<li><a href="index.html"><img src="image/homeselect.jpg" alt="ホーム"></a></li>
<li><a href="gallery.html"><img src="image/gallery.jpg" alt="絵"></a></li>
<li><a href="http://ブログ" target="_blank"><img src="image/weblog.jpg" alt="ブログ"></a></li>
<li><a href="about.html"><img src="image/about.jpg" alt="このサイトについて"></a></li>
</ul>
</nav>
</div>
</header >
ヘッダーIDをheaderタグへ、メニューIDはnavタグへ置き換わるよ。ヘッダーとメニューidに定義していた内容はそのままheaderとnavタグに定義するといいよ。
■フッターを置き換えるよ
HTML4.01
HTML5
また、それを踏まえた上でさらに付け加えると (C) は©の事を表しこれがつまりCopyrightの事なので「Copyright (C)」と書くと二重にCopyrightを書いていることになりますので実は(C)だけで良いです。
そしてさらに正しく言うならば本来は©の表記を要求されるものなので(C)よりも©を使うのが良いです。
それから「All Rights Reserved.」も必要ありません。これについてはwikipediaが詳しく書いてあったのでそちらを参照してください。
年については左がサイト開始年で右が更新年です。これも書かなくても良いですが開始年だけはかく書いておいて良いかもしれません。
要約すると書くなら「©2004 著作者」だけで構いません。
じゃあなんで長く書いたままなのかって？最初に書いた通り書かなくてもいいものなので表記については周りに合わせているだけです。
<div id="footer">
Copyright (C) 2004-2014 著作者 All Rights Reserved.
</div>
↓Copyright (C) 2004-2014 著作者 All Rights Reserved.
</div>
HTML5
<footer>
Copyright (C) 2004-2014 著作者 All Rights Reserved.
</footer>
そういえばコピーライトについてなんですが実は書かなくても著作権は守られる為構わないのです。
Copyright (C) 2004-2014 著作者 All Rights Reserved.
</footer>
また、それを踏まえた上でさらに付け加えると (C) は©の事を表しこれがつまりCopyrightの事なので「Copyright (C)」と書くと二重にCopyrightを書いていることになりますので実は(C)だけで良いです。
そしてさらに正しく言うならば本来は©の表記を要求されるものなので(C)よりも©を使うのが良いです。
それから「All Rights Reserved.」も必要ありません。これについてはwikipediaが詳しく書いてあったのでそちらを参照してください。
年については左がサイト開始年で右が更新年です。これも書かなくても良いですが開始年だけはかく書いておいて良いかもしれません。
要約すると書くなら「©2004 著作者」だけで構いません。
じゃあなんで長く書いたままなのかって？最初に書いた通り書かなくてもいいものなので表記については周りに合わせているだけです。
ヘッダーとフッターの間のコンテンツ部分については少しごちゃごちゃしてたのでまた今度にします。
0 件のコメント:
コメントを投稿