デジハリ：XHTML×CSS体験講座

昨晩19:30～21:30、デジハリ渋谷校にて標記の体験講座に参加

横浜校の初回の同講座を受講している。12回の一連の講座では、DreamweaverのCSSパネルの機能を利用して、ボックス構造のレイアウトを中心に学んだ。Web技術は進化し続けているので、あらためてこの体験講座に参加した。
体験講座でも、時期・講師が違えば内容も異なっていた。今回の体験講座の内容は、Yahooサイトや企業サイトでも多用されている、文字サイズの切り替え機能。jQueryというJavaScriptのライブラリを使って、Class属性を書き換えるという手法。

まずは、Web標準化について10分ほどの説明。
■Web標準化の基礎は、文書構造（HTML）と視覚表現（CSS）の分離
■Web標準化のメリット
　１．ファイルサイズの軽量化　～表示スピードUP
　２．メンテナンス性の向上　～作業効率の向上
　３．アクセシビリティの確保　～ユーザ満足度の向上
　４．検索エンジン最適化（SEO)

JQueryのサイトの紹介の後、実習。最終的にはこのように仕上がる。

　

しかし、ページを更新すると文字サイズがデフォルトに戻ってしまう。この対策は本講座の中で説明するという。体験講座として上手くできている。

■家で復習したので、備忘録として残しておく。

　

文字の「大」「中」「小」をクリックしたときの仕込み。クリックすると、body のclassを削除して、新たに書き加えるというjQueryの関数を利用する。index.htmlのこの部分とfont.cssは打ち込んだ。

　

左はダウンロードしたjquery.jsと作成したfont.jsの読み込み。bodyのclassの初期設定「font-M」、これがfont.jsとjquery.jsによって書き換えられえることになる。
右はライブラリjquery.jsの中身の一部。

　

この部分も打ち込んだ。左は、三種類の文字サイズの設定。右は、クリックされた「大」「中」「小」の背景色とリンクの下線の消去の設定。