カテゴリー: CSS

オンマウス時の画像ロールオーバーと云えばDHTMLで実装するもので javascriptの記述は必須と云う固定観念に塗り固められていましたから、 数年前ブログの隆盛と共にテーブルデザインからCSSへとデザイン上の主流が移り変わり始めた際、 同機能をCSSのみで実装出来ると知った時には軽いショックを受けたものでしたが、 今となっては極々普通の方法として知られ、 当初何処から当情報を得たかは最早判然しない様な現状も申し訳ない乍、 今その方法を見ても実にシンプルで使い勝手が良く、 多少古いブラウザでは表示にチラつき抔問題のあろうとも、 IEも7が主流となり始めては、随分と業務上でも気軽に使用出来るようになったように思います。 上記では縦長のGIF画像を作成し、オンマウス時に表示座標をずらしてロールオーバーを実現しています。
リンク先は昨日4月30日のアーティクル ウゴウゴルーガ風ブックマークレット からウゴウゴルーガ繋がりです。
上記パーツを囲い込む彩色範囲の角丸には当ブログ2008年3月13日の 角丸 記事でご紹介のjQuery系の機能を利用しています。

投稿した画像が使用テンプレートのアーティクル部分の設定より大きいと スクロールバーが右、若しくは下に表示されるのは時には困るものだと思います。 デザイン抔はブログシステム提供側に豊富にテンプレートが用意されていれば、 屡変えたくなるのが人情ですけれど、 その時使用のテンプレートのアーティクル幅に専用に合わせる設定では 折角提供される様々なデザインの切り替えの度に設定を変更しなければならず、 出来ればその様な行為は控えたいものです。

其処で登場いただくのが当アーティクル標題のプロパティoverflowです。 懸念のIMGタグをネストしたDIVタグに此のプロパティを設定します。 一昨日は4月12日の記事 SaaSでRuby on rails開発Heroku.com の画像を利用してみるとこうなります。 画像のプロパティを右クリックしてご覧いただければ、 横幅は520px程ある画像であり、 一目で右側部分が非表示になっているのがお分かりかと思います。
具体的なHTMLソースは下記のようになります。 この様な設定にしておけば画像データは其の儘に、 以降デザインを取り換えた時に違和感あれば当該記事のdivタグのwidth属性を少し弄れば良いだけになります。 勿論ひとつひとつ設定し直すのは手ですから、 専用のクラス名を設定し、テンプレートに一行書き加え一網打尽と云うのが CSSの旨味である処だと思います。

CSSのoverflowプロパティについては サイト「 World Wide Web Guide 」の W3G>CSS>表示と配置>overflow に詳しい説明が掲載されています。

また、比較の為に追記部分にoverflowプロパティを設定しない画像を設置してみます。 画像は3月24日の記事 INTERNET ARCHIVE で使用したものです。
直ぐ下の［続きを読む］をクリックしてご比較ください。

• こんにちは
• さようなら

私の名前は hanamaru です。
私のお兄ちゃんは honmaru です。

私の名前は hanamaru です。
私のお兄ちゃんは honmaru です。