リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。 remote.html サンプルの (X)HTML コードは下記の通り。 <div id="rollover"> <ul> <li id="food"><a href="#"><em>焼き肉</em></a></li> <li id="sneaker"><a href="#"><em>オニツカタイガー ファブレ74/0123</em></a></li> <li id="beer"><a href="#"><em>仕事の後のビール</em></a></li> <li id="coffee"><a href="#"><em>缶コーヒー
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない (webデザイナーのナナメガキ さま) ↑このサイト、tb も飛ばせないしコメントも書き込めないので言及するのも正直バカバカしいのだが。←とか書きつつダメモトで tb 飛ばしたらエラーにならなかった。慌てて訂正 ((((((((((((/;^^)/ 外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position:absoluteで外枠のh5の左上に合わせ、widthとheightを100%にしてh5の要素を被ってしまうというかなりトリッキーなことやってますね。一応ほとんどのブラウザに対応。問題としては、MacのIEだけ文字を拡大すると画像からはみ出てしまうのと、背景が透明な画像は使えないことぐらいか
しごと場から会場が結構近かったので、CSS Nite Vol.5を見に行ってみました(実は前回も見に行ってたり)。いろいろと興味深い話を聞けました。 Vol.8のゲストは森田雄さん、Vol.10のゲストは神崎正英さんに決定したそうで、今後も楽しみにしてます。 さてそのCSS Niteの中で、鷹野さんにより画像置換《image replacement》についてのプレゼンテーションがありました。ここでの画像置換というのは、HTMLでは文字《テキスト》になっている部分を、スタイルシートにより画像に置き換えて表示させる技術のことです。spanタグを間に入れて display:none; としてみたり、或いは text-indent:-9999px; とかしたりするアレです。その利点と欠点を(自分なりの解釈で)述べてみると、以下のようになるでしょうか。 利点 HTMLから(装飾のための)画像情報を分
画像置換と呼ばれる一連のテクニック群があります。これはHTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法を指します。たとえば、テキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させます。詳しくは、Dave Shea氏の記事「Revised Image Replacement」を参照してください。 画像置換は、マークアップに一切手を加えることなく画像を別のものに差し替えることができることから、デザイン変更が非常に容易という利点があります。またこの手法に少しばかり手を加えれば、JavaScriptに頼ることなくCSSのみでロールオーバー効果を得ることができるため、ナビゲーションのボタンに利用されているのをよく目にします。 しかし画像置換は、CSSが有効か
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
You Can Hire Freelancer Here It is a long established fact that a reader will be distracted by the readable content of a page John Hissona passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If youThere are many variations of passages of Lorem Ipsum available, but the majority
Safariの実体参照の扱いに関する話の続き的な話。static and distribution.のおお、忙しい...にある、 XHTML1.1として解釈していないのは間違いなく、さらにxmlns属性で参照されているはずのnamespaceを見に行っていないためエラーとなっている。 ※註: エラーの内容は、"Entity 'trade' not defined." という文について、ねこめしにっきのSafari は XML Namespace を参照しない？でCSSやDOM実装などからの言及がされてます。が、それよりも何よりも実体参照と名前空間URIとは何の関係も無いというだけで終了する話なのでは、という気がします。 XML文書で名前空間宣言が使われていなくても、文書型宣言(<!DOCTYPE ... >というやつ)が示す文書型定義《DTD》で実体が宣言されていれば実体参照は使えるし、逆
This is a collection of experiments, methods, tips and tricks related to HTML, CSS, and JavaScript that may or may not come in handy some day. Some of these techniques are based on ideas of my own, others are based on stuff that I’ve come across on the web, on mailing lists, in books, and other places. Please note: Most of these techniques are very old and obsolete and are left here mostly as exam
Are you looking for a team of highly-skilled web design experts to transform your businesses online presence? Wouldn’t you love to get a design that stands the test of time, is easily scalable, and that your audience loves for its functionality and ease of use? Tim Vansas Designs is run by an expert group of web designers with diverse mindsets and skills. Our experience and expertise enable us to
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
