スポンサーサイト
-- / -- / -- ( -- )
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-- : -- : -- | スポンサー広告 | page top↑
ホームページのHTML5化
2015 / 08 / 08 ( Sat )
雨が降りそうで、雷ばかりで、全然降ってくれないので、
今朝は水やりをしましたが、少しだけ涼しくなってくれましたね。
雑草取りが追い付かないので、雑草にたっぷり水をやってしまいました^^;

さて、仕事のホームページ作りですが、
結局、職場から提供されているテンプレートを使ってしまったので、
完全にHTML4以前の仕様で書かれてるんです。

せっかくなら、最新のHTML5準拠にしたいと思い、
頑張って、HTML5化しました!

初めの宣言のところを
<!DOCTYPE HTML PUBLIC "-//W3C//...
という長たらしいのから、シンプルに
<!DOCTYPE html>
とするだけで HTML5 になるんですが、
もちろんそういう意味ではなく、
新しく導入されたセマンティックス(意味づけ)という思想を
反映したものにしたいという意味です。

検索エンジンなどのソフトウェアが見ても、
どの部分に何が書かれているかを理解できれば、
有意な情報を収集しやすいということのようですね。
まあ、Googleのビッグデータ化に貢献させられてる
という気がしなくもないですが、
自分の掲載した情報が有意義に扱ってもらえるのだったら
悪い話じゃないですよね。

ところが、この思想は分かるのですが、
実際にどう実装すればいいかは結構難しかったです。
いろいろ調べてみて、結局分かったことはこんな感じにすればよいということ。
(例によって、間違ってるかもしれません)

<header>
<h1>ページの見出し(ヘッダ)</h1>
</header>

<nav>
選択メニュー(ナビゲータ)
</nav>

<article>
ここから具体的な記事が始まる

<section>
<h1>まとまり1の小見出し</h1>
ひとまとまりの内容
</section>

<section>
<h1>まとまり2の小見出し</h1>
ひとまとまりの内容
</section>

<section>
<h1>まとまり3の小見出し</h1>
ひとまとまりの内容
</section>

</article>

<footer>
フッタ(著作権表示など)
</footer>


難しいなあと思ったのが、section と article の違い。
article の中に複数の section があるというのが普通らしいです。

あとは、section と div の違い。
section はあくまでも意味的に独立したひとまとまりになっているものであって、
題名がつけられるかどうかがポイントみたいです。
というわけで、section の中には、h1 見出しがあるのが理想的らしい。

単にレイアウトのためだけに、ひとまとまりを定義したいときは
従来通り div を使うべしとのこと。

とりあえず、理解したのはこんなところです。

あとは、HTML5 とは関係ないのですが、
デザインレイアウトの CSS をかなりいじりました。
これはもっと難しかったです。
少し変えるだけでどんどんレイアウトが壊れていくんですよね・・・
あちこち試行錯誤しながら、なんとか収めました^^;

最近は、本名で検索すればすぐ見つかるようにはなりました。
本名珍しいので、当たり前ですよね^^;
専門分野のキーワードで検索しても見つかるようにしたいですよね!

それから、顔写真を入れたいのですが、
あんまり仕事っぽくないスナップ写真にしたいなあと思いつつ、
よい写真が見つかりません。
どこかお出かけした時にでも、使えそうな写真を撮ろうと思います(笑)
スポンサーサイト
14 : 18 : 53 | 日常 | コメント(0) | page top↑
<<初めてのヨガ | ホーム | ♪ 省エネ奏法>>
コメント
コメントの投稿














管理者にだけ表示を許可する

| ホーム |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。