スクールサイトリニューアル

またまた久しぶりの記事エントリーとなりました。 早いものでもう師走突入。 スクールの講義も、12月18日が今年最後となります。 さて、話題は変わりますが、 11月26日にスクールのWebサイトをリニューアルしました。 http://www.jagra.or.jp/school/ スクールのWebサイトは従来よりスタッフによる内製で制作しているのですが、そもそも、今回のリニューアルのキッカケとなったのは、H1要素を整理するためでした。 昨年サイトを作った時はCSSを勉強し始めたばかりで、同ページに複数のH1タグを使用していたんですね。 元々DTP育ちの私…通常の文章内では、大見出しが複数あっても何ら不思議はないので、同じ感覚でいたのですが、Webの世界においては、H1要素はページ内の見出しの中で“最も重要な要素にのみ使用すべき”ということで、H1をページ内に一つ使用するよう改善した方がいいとご指摘を受けたのでした。 Webページを作成したことのある方なら、誰しも経験済みかと思いますが、H1要素にあたる部分に画像を使用したいというのは、よくある話だと思います。 デザイン上、見出しは一番目立つ部分でもありますからね。 しかし、文書構造において見出しレベルをH1,H2,H3...で設定することは非常に重要でもあり、H1を使用せず見出しに画像を使ってしまっていいのかしら？と悩むわけです。 そこで、見出しに画像を使いつつ、H1要素をHTML内に記述できる方法はないかと考える中で、CSSを使い、「display:none」や「visibility:hidden」で外見上はH1を見えなくしてしまうという技や、「text-indent:-9999px」などであり得ない位置に見出しを飛ばすという苦肉の策が講じられることがあります。 余談ですが、「display:none」と「visibility:hidden」の違いについて。 両方とも、要素を見えなくするという効果は同じですが、visibility:hiddenを使用した場合は、要素が本来占めるであろうスペースが“空欄”として確保されます。存在はしているけど見えない状態。 対して、display:noneを使った場合は、存在ごと見えなくなるので、空欄も生じません。 閑話休題。 同じように、私も見出しに画像を使用したいと思ったのですが、今回はjQueryの「ReplaceImg」というプラグインを使用してみました。jQueryを実際に使うのは初めて！ こちらのプラグインを使用すると、JavaScriptでテキストを画像に置き換えることができるのです。これは本当に便利。 http://h2ham.seesaa.net/article/110623171.html プロのWebデザイナーにすれば、もはや常識となっているであろうこのjQueryは、JavaScriptのライブラリなのですが、私のようにWebを自前制作している方や、元々Web専業ではない企業内Web担当者の中には、まだまだご存知ない方もいると思います。 jQueryプラグインを使用すると、CSSでは難しいさまざまな効果を実現することができますので、興味のある方は下記を覗いてみてください。 jQuery自体は、下記の英語サイトで配布されています。 http://jquery.com/ 日本語のリファレンスはこちら。 http://semooh.jp/jquery/ 英語のサイトになりますが、最新のjQueryプラグインが紹介されています。 http://aext.net/2009/11/5-fresh-and-useful-jquery-plugins-were-born-in-november-2009/