« 多摩美術大学情報デザインコース作品展 2008へ | トップページ | コミュニケーション:インタビュー実習報告全体発表会 »

2008年3月 2日 (日)

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

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

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

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

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

080301css01 080301css02

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

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

080301css11 080301css12

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

080301css16 080301css13

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

080301css14 080301css15

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

|

« 多摩美術大学情報デザインコース作品展 2008へ | トップページ | コミュニケーション:インタビュー実習報告全体発表会 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/178689/10872147

この記事へのトラックバック一覧です: デジハリ:XHTML×CSS体験講座:

« 多摩美術大学情報デザインコース作品展 2008へ | トップページ | コミュニケーション:インタビュー実習報告全体発表会 »