By takai

昨日HTML5のブログに久々にまとめて書き込みをしましたら、
twitterのほうに色々ご意見をいただきました。

ウェブサイトをHTML5に作ったところで、
クライアントさまには理解されない話だとか、地方では先の先の話だとか・・・

正直HTML4やXHTMLからHTML5に構築言語が変わったところで、
APIや動画を埋め込むような案件でもない限り、
クライアントさま、一般のお客さまにはどうでもいい話には違いありません。

単純にHTML5になったから制作サービスの値段をあげられるか、
そういう話でもないと思います。

でも私たち制作サイドがHTML5で構築することができるようになれば
たとえばスマートフォンサイトの制作サービスもしかり、
新しいビジネスチャンスも拡がるということです。

事実、以前にも書きましたが、
ヘアサロンや美容のお店やカフェの情報を得るのに、
一般のユーザーさんはいまパソコンを立ち上げて調べているでしょうか？
街角や電車のなかで、スマートフォンでピュッと探したりしていませんか？

今現在の私たちがたずさわるウェブサイト案件はパソコンサイトが当たり前ですが、
HTML5が正式勧告されるだろう2014年、
あと3年先もウェブサイトはパソコンが主流だと断定できるでしょうか？

3年前、堀江さんはともかくスマートフォンがこんなに普及すると思っていましたか？
iPhoneが登場して、あっという間でした。

3年後、クライアントさまも今とおんなじ発想でウェブサイトをご注文されるかどうか、
たぶん私は違うんじゃないかなと思うのです。

少なくとも私たちは先端技術にかかわるお商売をしています。
進歩するものを扱うなら私たちも勉強を怠らず進歩についていかなきゃ、
新しいこと考えて、新しいサービスを考えていかなきゃ。
そう、別にそういうことってどんなお商売、どんなビジネスにもいえるとことだと思うんです。

By takai

HTML5は動画がimg srcみたいに直接貼れちゃうとか、
マウスで絵がかけちゃうみたいな、
これまでのHTML4やXHTMLでできなかったことばっかり関心がいってしまっていますが、

そもそも実際問題、動画はともかくとしてマウスで絵がかけることが
基本、ビジネスユースのウェブサイトばっかし作ってるのに、使いみちないやろって話ですよ。

そんなことは追い追い誰かがビジネス用にいいものを開発してくれるだろうし、
いまは考えなくてよいことです。

さて前回はHTMLコーディングするときは文章の「章節」を意識しましょうという話をしましたが、
具体的にはHTML5では<section>という「章節」をあらわすタグが登場することになっています。

そこで現在、皆さんはまだ普段はCSS2+XHTMLで構築しているでしょうが、

<div class=”section”>

を使って、章節を意識してつくるように変えていきましょう。
大見出し(たとえばh1)とその本文全体を<div class=”section”>で囲って、

そのなかの中見出し(たとえばh2)とその説明になる文章をまた<div class=”section”>で囲って、
さらに小見出し(たとえばh3)があれば、またその説明部分と<div class=”section”>で囲って、
入れ子の構造も可で、どんどん使いましょう。

<div class=”section”>そのもののCSSは、共通のmarginやpaddingくらいしか設定できないでしょうが、個々に別々のデザインをしたければ、idをあてて設定すればよいと思います。

来たる日に向けて<section>タグの実践練習しておきましょう。

By takai

HTMLというのは「文書」ファイルです。

文書というのは新聞や本・雑誌、メモにいたるまで、「文章で書かれたもの」ということです。

そもそも米軍のなかで交信する電子文書が発展して現在のHTML、ひいてはインターネットがあるのです。

「文章」というのは「見出し」と「本文」がセットになっているものをいいます。
新聞で「見出し」がなかったら、なんだかわからないくらいとっても読みにくいですね。

だからHTMLも「見出し」と「本文」がセットになって何組かあって、構成されるものなのです。

CSSでデザインするとき、h1の見出し、h2の見出しはどんなデザインにするか考えますよね。
かれこれ10年くらいWeb制作の現場にいるひとは、tableレイアウトのときは見出し全部画像で作って、
ほんまに大変でしたよね。

そういう意味ではCSSレイアウトへの転換はその負担を劇的に軽減して、SEOがどうのこうのもありますが、僕らの仕事も効率が上がって今日があるという感じです。

CSSデザインのコーディングが上手な人は、見出しと本文のセット、
「文章」の章節を見極めてデザインすることができるひとです。

そういうひとほどHTMLをちゃんと理解していない、
見出しの順位付けを徹底してできていないページデザインをもらうと、
ものすごく迷惑な感じをうけてしまいます。

HTML5では『HTMLというのは「文書」ファイルである』という理屈が
これまでのHTML4やXHTMLより色濃く、原点回帰している印象があります。

ですから、ページデザインのpsdやpngを見て、
ここからここまでが1章節、ここからここまでが1章節と、
これまでそんなふうに考えていなかったひとは、是非意識してコーディングを考えるようにしましょう。

By takai

↑Let’s see in various browsers. Let’s see the source.

HTML5では、長々とDOCTYPE宣言を悩んで書く必要がない。
metaタグも短くて簡単。

brもhrもスラッシュを入れて閉じる必要もないし
厳格なソースを書かなきゃいかなかったXHTMLに慣れてしまっていると、ずいぶん拍子抜けする。
(XHTMLの書き方をしてもべつにかまわない。）

新たに登場したのは、sectionやら、articleなどというタグ。
それぞれが「（文章の）節」や「記事」という意味で、
HTMLは「文書ファイル」だったという、あるべき姿に回帰したと考えられる。

これまではレイアウトや装飾のためにdivで領域を決めて、左右にfloatさせたり、
色付けしたりしてきたけれど、

sectionやarticleでタグに囲まれた領域が今度は文章構造で、ちゃんと意味付けもされ、
その重要度を検索エンジンが読み取るのだそうである。

ただ、8以前のInternet Explorerはsectionやarticleを全く理解しないので、
javascriptで有効なタグにしてやって、

// html5.js
document.createElement(‘section’);
document.createElement(‘article’);

↑Let’s see in IE6～8. Let’s see the source.

かつ、block要素化してやらないと、CSSがまともに効かない。

section,article{
display: block;
}

↑Let’s see in IE6～8. Let’s see the source.

By takai

ナビゲーションをのぞく大枠なデザインはhtml5.jsとIE9.jsを読み込んで整えました。

※ IE6のレイアウトは調整していません。醜くてすみません。

ボタンの角丸は再現できませんが、グラデーションはCSS3 PIEで見せることができます。

PIE.htcファイルをアップロードして、スタイルシートの記述の最後に

と書き足します。
PIE.htcへのurlパスは相対パス記述しないこと。絶対パスかフルパスで書いてください。

でも、IE9には使えません。
普通に考えて、おかしいですよね。

By takai

グローバルナビゲーションのボタンを表現しているCSSです。

なんとか、ならんものでしょうか！
WYSIWYGで、デザイン見ながら作れるDreamweaverの拡張機能、至急求む。

HTML5のラストコール（策定完了）が5/24で、（といっても、きっと何度もラストコールするのは慣例のこと。）
これに追随して同時期にCSS3もラストコールがあるみたいなのですが、ブラウザごとの書き分けは無くなって統一してくれないと困りますね。

By takai

若い制作者の方は普通にそうするものだと思ってきただろうが、これまでウェブサイトの見出しをGIFやJREGでつくってきたのは、そもそも2.1までのCSSにはテキストの表現に限界があったからである。

Mac SafariやWindowsもXP以降の「メイリオ」フォントなど、単なるテキストも、綺麗にアンチエイリアスのかかったヴィジュアル的にも綺麗なものになって、一般ユーザーのかたのブログも素人っぽさがなくなって、私たち制作で食べている者がつくるものと遜色ない見栄えになってきた。

事実、クライアントさまから修正のご依頼が多い見出しやボタンは背景だけ作っておけば、十分過ぎる見栄えになる。

CSS3ではその見出しやボタンの背景もPhotoshopやFireworksに頼るまでもなく、角丸やグラデーション、ドロップシャドウもできてしまう。
（・・・ということになっている。）
ほとんどウェブサイトが完成に差し掛かっているのに、クライアントさま側のお心変わりで、ナビゲーションボタンの修正をするときのあの悲しい思いにもおさらばできて、「やりまっせー」とニコニコ承れそうだ。

パソコン環境は回線速度が上がって、ブラウジングにはほとんどストレスを感じない状況になったが、スマートフォンなどのモバイルでは画像のローディングに時間も容量も消化されてはたまったものではない。
そういう意味で、写真をのぞくその他のイメージがすべてCSSで表現されることは大変意義がある。

携帯電話はメーカーや機種ごとに独自のHTMLだったけれども、スマートフォンはPCと同じ条件も制作できる。
パソコンのホームページを立ち上げるついでに、オマケ的にケータイサイトを開設するのが、クライアントさまにとっても、制作する僕らですら当然のように思ってきた。

しかしユーザーは現実、なんでも手始めにパソコンのホームページでほしい情報を探しているだろうか。
街なかを移動中に、モバイルでその近くでカフェを探したり、行きつけのサロンの予約を入れたりはしないだろうか。
街なかに限らず、職場や自宅でも何か他のことをしながら、モバイルサイトを見ていないだろうか。

ホームページを開設するのも、ユーザーがクライアントさまの情報を一番どの環境で見ているのか、それをクライアントさまが選ぶ、また僕ら制作する側が適切な環境をご提案させていただく時代になっているのである。

HTML5+CSS3は時代の要求だといえるだろう。

By takai

こちらはウェブエントリーズが近将来のサービス化にむけてCSS3+HTML5の実験を行う場所です。

それぞれの実験がご覧になっているブラウザによっては正しい表示をしていない可能性もありますが
ご了承下さいませ。

ここでの実験(このブログのデザインや機能も含めて）がその即座にお客様のご要望にお応えするサービスになるわけではありません。
お客様に自信を持ってご提供できるまで検証を繰り返します。

現在お客様にご提供できるサービスにつきましてはオモテのページをご覧ください。

なにぶん、CSS3+HTML5についてはビギナーなので、
知識ある同業のWebデザイナーさん、プログラマさんからのご指摘やヒントなども歓迎いたします。
当ブログに連動するtwitter(@entrys_html5)、Facebookページにお寄せください。