ホーム > タグ > XHTML

XHTML

「規格の策定者が解説する JIS X 8341-3:2010」と「HTML5に備えよう：DOMの超基本」に参加してきました。

先日参加してきた2つのセミナーに参加してきました。

規格の策定者が解説する JIS X 8341-3:2010

はじめに、概要やJIS X 8341-3:2004との変更点などが紹介されました。WCAG2.0の内容を含んでいる点がポイントだったのかなと思います。

実装方法や試験方法に関しては、当たり前ですがJIS X 8341-3:2010の理解が大前提みたいです。ただJIS X 8341-3:2010のみだと詳しい内容や実装方法が記載されていないので、Understanding WCAG 2.0日本語訳とTechniques for WCAG 2.0 日本語訳も合わせて読む必要があります。

今社内でチェックリストや簡単なガイドラインを作成しようとしていて、まずは内容の理解なんですが、表現が曖昧なところがあり判断に迷うことが結構あります。ただ今年中には形になるようにもっていきたいのでがんばります。

HTML5に備えよう：DOM(Document Object Model)の超基本

■DOMとは？

メモったことをずらずらと。
  • JavaScriptを使ってHTMLの中身をダイナミックに編集することができる
  • イベント（マウスをクリックしたり）をどうするか
  • スタイルを操作することが可能←今回は説明なし
  • いろんなプログラム言語でもDOMに対応（準拠）していれば、書き方が同じである（getElementsByTagNameなど）
  • HTML5の仕様書はDOMを知った上で書かれている、DOMの上に成り立っている
  • HTML5（HTML）標準では改行またはインデントもノードとして存在する

    ※IE8以前ではホワイト・スペースというノードが存在しない

  • DOMアクセサー、複数ある場合（TagName、ByName、ClassName）はgetElementsとsが付く
  • Selectors API
    • CSSセレクターを使用したアクセサー
    • IE7以前でなければ実装されている
    • Allを付けたり付けなかったりで、細かくタグを指定できる。

■イベント

  • イベントフェーズ
  • イベントの伝搬
    • 内包したdivに設定していても、まずhtmlが押されたと認識して下に伝わっていくイメージとなる
    • キャプチャ、ターゲット、バブリングと3つのフェーズが存在する
    • 実際はバブリングフェーズが多い
    • 最後をfalseにするとバブリングフェーズで、trueだとターゲットフェーズで
    • コールバック
  • IE8以前はキャプチャーフェーズを実装していなくバブリングフェーズでしか引き抜けなかった、ので
    全ブラウザに対応するとすればバブリングフェーズを使用することが多かった

■プログレッシブ・エンハンスメント

  • 概念の分離
    • JavaScript側でCSSのプロパティを編集するのはあまりよくない（BehaviorとPresentationの混在）

      スタイルはあくまでスタイルで編集するという風にした方が良いので、JavaScript側ではclassを変えるみたいな

  • あくまでもJavaScriptは脇役という考え

そもそもDOMというものを全く理解していなかったんですが、初心者向けということもあってとてもわかりやすく、DOMに対して興味が湧きました。

IEで表示確認する際に活用すると良いもの

IEでデバック、検証する際に使っているものをピックアップしました。
改めてな部分満載ですが。

xray

ブックマークレット型で見たい部分をクリックするとDOM属性を表示してくれます。
ただ、細かく数値を変更したりはできず確認するだけなので、あんまり使用することはないです。

firebug lite

よく使うのはfirefoxのアドオンでもおなじみの、firebugですね。
こちらもブックマークレット型で、機能に制限はあるものの十分です。

IE Developer Toolbar

これはIEのアドオンでリリース当時はめちゃくちゃ使ってました。
firebug liteを知ってからあまり使わなくなりましたが、たまに使ってます。

少しずつIEとは仲良くなっているものの、相変わらず苦労する時があるのですが、上記のモノは重宝してます。

Zen-Coding導入してみました。

個人的に最近目にしており、気になっていたので導入してみました。
今回dreamweaverに導入しました。

どういうものかというと（まだ慣れてないですが）、
div#container>ul.nav>li.item*3>a

で、「control+,」

<div id="container">
<ul class="nav">
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
</ul>
</div>

のように展開してくれます。
サポートしているエディタも多いので、環境にはあまり左右されずにかつ、効率的に作業できそうです。

寄付をしないでアイテムを買う「夢の病院をつくろうPROJECT」

yumenobyouin

駅前やコンビニやwebサイト等で募金を募っている場面は、何度か目にしたことがあります。たまに何に使われるのか細かく書かれていないモノがあったりしますが、やはり明確でないものは疑ってしまって行動を起こしにくいです。
ですが、このサイトはオンラインショッピングが浸透しているこの時代にあったやり方で、尚かつ何に使ってほしいかを選べるのが新しいなと思いました。

本日はコーディング作業でtableに苦しめられていました。
幅とか色とか、colgroupかtrで指定できないものは仕方なくtdやthに。もっといいやり方があるとは思うのですがまだまだ知識不足です。
まあそんなことより、tableはきちんとマークアップをすれば意図した通りに音声ブラウザに読んでもらうことができるので、しっかりと抜かりなくマークアップしたいと思います。
最近iPhoneのClock RadioでHouseばかり聞いています。コーディングスピードが1.2倍になった気がするのでお気に入りです。

IE7、8でリストに隙間ができる

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
IE7、8以外だとこんな感じでも問題ないです↓

■html

<ul>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
</ul>

■CSS

ul {
list-style:none;
}

li {
margin-bottom:2px;
}

全文を読む

Home > Tags > XHTML

最近の読書本
gremz
etc
あわせて読みたいブログパーツ
無料アクセス解析
フィードメーター - 新米デザイナーの日報|design tracks
track feed
ブログランキング・にほんブログ村へ