HTML5 ですか!

こんばんは!

ゴールデンウィークもおしまいですね。 いかがでしたか?
私はカレンダー通りでした。 っで、休みの日はずーっとサイト作ってました。
今年あたりから、みんなHTML5で書きますよね? 私もいまから練習です。

これ、本職のほうでやっている、きっちきちの報告書的な本を作ってるみたい!

題名があって、序、目次の<nav>までが、<header>かな。
章、節、項、目、それぞれに見出しと本文がはいって、<section>と<article>。
本文に付随する、図版、写真、表が、<figure>。
参考文献、外部資料なんかが、<aside>。
索引を<nav>にして、奥付あたりが<footer>のイメージです。

このこたちの目的は、結局のところ、
検索エンジンに、サイトの構造をはっきり解らせるってことですよね?
ブラウザーが理解できるかどうかが問題ではないんだよね?

と思ったので、いろいろと参考にさせて頂いた結果、今回は、
セクションを構成するための要素には、
それ以外の役割をもたせないって方法をとりました。


html5サイトリニューアル_01

こんな感じで!
ひとつ入れ子になっちゃうけど、CSSは<div>に付けました。
なので、HTML5未対応でも安全です。


html5サイトリニューアル_02

いちおう、HTML5だよって。
たぶん、ふつうにHTML書いていれば、
スペルミスでもないかぎりおめでとうっていわれるんじゃないかしら?


html5サイトリニューアル_03

IEの下位バージョンでも破綻なくできたら、(この方法ではあたりまえじゃん!)
せっかくなので、CSS3を使ってみます。


html5サイトリニューアル_04

へぇ~。


html5サイトリニューアル_05

これが・・・。


html5サイトリニューアル_06

こんな感じ!

ボタンにグラデーションをかけてみました。
透明なボードの表現は、ずっとやりたかったんです。

たのしいかも!

今回は、基本的なHTML5と、簡単なCSS3でした。
いろいろ出来ておもしろい!という反面、
いつになったらストレスなく新しい仕様で作れるのかなぁ・・・。
たーくさんいる、XPな人(私のBOOTCAMPも!)が、
マシン買い替えなっきゃいけないんだよね。
そのころには、また、仕様が変わってるんだろうなぁ。

私がWebの勉強を始めたときは、
ちょうど、XHTML+CSSのWeb標準に変わる直前って感じで。
Appleのサイトがリニューアルして、
私の【G4 Quick Silver】で容赦なく、ズタズタな表示になったとき、
Macなのに、Appleのサイトがちゃんと見られないなんて!って愕然としたけど、
これもありかも・・・とも思いました。
他のブラウザーを入れるか、OSバージョンアップするか、
思い切って買い替えるかって考えますもん。
でも、そのためには、
このサイトがどうしても見たいって思わせるようなサイトを作らないといけませんね。

魅力的なコンテンツってなんだろう?
みなさま、すてきなサイトをたくさんお願いします!

リニューアルしたサイトは、【ブルーサブ】ダイビングスクール です。
ダイビングを始めたいという方はぜひ!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

11 | 2023/12 | 01
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

月別アーカイブ