タグ : HTML5

未だに悩むHTML5のarticleとsectionの使い分けについて調べてみた。

コーディングに携わる人にとって、HTML5 でのマークアップはそろそろ出来ないとヤバいかも?という状況になりつつあるのではないでしょうか。

HTML5 では「アウトライン」という考え方が登場して、より文書構造としてわかりやすくすることが出来るようになりましたが、その代償として article と section という悩みの種が生まれました。

Web で情報を調べても、特に情報が古いところではこのあたりの使い分けが曖昧だったり明らかに間違ってるんじゃないの?というものがあって、初心者にとってはどれが正しいのかを判断することも難しかったりします。

なので色々なサイトを調べた結果、恐らくいちばんしっかりと説明してくれているであろうサイトを見付けたのでご紹介します。

HTML5のarticleとsectionの違いを書いてみた : Web Design KOJIKA17


こういう時に section、article を使えば良いんじゃね?というように説明してくれているのがありがたいですね。

[HTML5]アウトラインで迷わない! sectionと見出しについて – WEBCRE8.jp


こちらは詳しい HTML も含めて紹介してくれているので、より具体的に使い分け方を確認することができます。

HTML5 では aside や header、footer などその他にも色々なタグが追加されているので、これをきっかけにして身に付けていきたいですね。

各ブラウザのHTML5&CSS3対応状況を確認できる便利なサイト

さあ HTML5 だ!CSS3 だ!と言っても各ブラウザ(特に IE)の対応状況を考えるとなかなか手を出すわけには・・・。

そもそも各ブラウザは HTML5 や CSS3 にどこまで対応しているの?という素朴な疑問に、わかりやすく答えてくれているサイトがありました。

>HTML5 & CSS3 Support, Web Design Tools & Support – FindMeByIP – CSS3 & HTML5 Browser Support

CSS3 のプロパティやセレクタから、HTML5 の API に各ブラウザがどれだけ対応しているのかを図で表してくれています。Mac では Safari、Firefox、Opera、Chrome の最新版、Windows は Safari、IE6~9、Firefox、Opera、Chrome で IE 以外は最新版での対応状況になっています。

まあこうして一覧で見ると、IE は6どころか9までも含めて酷い対応状況になっています。下手に OS の根幹部分と組み合わせてしまったばっかりにセキュリティ対策の問題でなかなか新しい機能を搭載することが出来ないのかもしれませんね。IE10 になるとそれもかなり解消されてくるのでしょうが、制作側からするとまた新しいチェック用ブラウザが増えるのであまり喜んでもいられません。

IE は6と言わずもう8まで無くなって欲しいなーと思っていたら、WindowsXP は IE8 までなんですね。となると WindowsXP のサポートは今のところ2014年4月までなので、最低でも2年間は残るということで、まだまだこの呪縛から逃れることは出来そうにありません。

ちょっとメモ:今って ネスケ VS IE のブラウザ戦争時より大変だよね、という話

Flash のスマホブラウザ向けプラグイン開発終了が発表されてから、何でもかんでも HTML5 で何とかしよう、という流れが加速しているように見えますが、実際のところそれってどうなの?という疑問は今でも抱いています。

3週間ほど前になりますが、そんな Flash 騒動と HTML5/JavaScript での開発について意見を述べられているサイトがあったので紹介します。
最近のFlash騒動やHTML5/JS開発についてまとめ « package a24

どちらが優れている、どちらがダメ、という極端な論調でなく冷静な意見が述べられているので、ここにあるような考え方で業界が流れていってくれれば有り難いのですが、これも色々な思惑が絡んでくるような気もします。

特に HTML5/JavaScript での Webアプリ開発は規模の大きさ・複雑さとブラウザごとの対応状況と言う点で 15年ほど前にあった InternetExplorer vs Netscape ブラウザ戦争よりも酷い状況と言えなくもありません。

上記のサイトにも、HTML5、JavaScript 共にブラウザごとの動作の違いのために

Flashに比べると数倍~の開発コストかかってしまう

と言うことが述べられています。

そもそも開発者がまだ多くないことや、Flash では気軽に作れるような動きでさえ HTML5/JavaScript で実現しようとするとそれなりのスキルが必要だということが割高な開発コストの原因の一つでしょう。優秀なオーサリングソフトが登場すれば、それも改善されるでしょうが、まだもうしばらく先の話になりそうです。

Flash もスマートフォンアプリの開発環境としても残っていくと思いますが、気軽にコンテンツを作ることが出来る、というコンセプトは完全に消滅してしまい、もはやデザイナーがデザイン業務のついでに Flash コンテンツを作る、ということも出来ないぐらいに高度化されてしまいました。

結局、HTML5/JavaScript 開発も、Flash コンテンツ制作も初級・中級レベルの技術者が入り込む余地がほとんどなくなってしまいました。これから Web 業界に行きたい!という学生にとってはどんどん厳しくなって行きますねえ。

Error: NotFound

ちょっとメモ:HTML5+CSS3コーディングの初期テンプレート

HTML5 と CSS3 でコーディングをする際の初期テンプレート案を紹介してくれているサイトを見付けました。勉強しないと、と思いつつまだちゃんと手を出せていないので、こちらも大いに参考にさせてもらいたいと思います。
続きを読む

まずはWebで情報収集。スマホ向けサイト作成に役立つWebサイトを集めてみました。

スマートフォン向けサイトの作り方を勉強しないとな~と思いつつ、なかなか手を出さずにいたのですが、同業者との会話で、既にほとんどの会社はWebサイトを持っているので、今後はプラスアルファとしてスマホ向けサイト作成の仕事が増えてくる(受注に繋げやすい)という話があって、こりゃいよいよやるしか無いか、ということでいきなり本を買うのではなく、有り難いことにスマホ向けサイトの作り方や注意点などを紹介してくれているサイトを探してみました。
続きを読む