Account Suspended This Account has been suspended. Contact your hosting provider for more information.

画像置換問題その後。 で、あなた今回のリニューアルで例の画像置換問題(CSS有効で画像無効)部分についてはどうしたのという話。別ブログの方でもその問題に関する雑感は書いてたんだけど、今回こっちのブログで使った方法はこんな感じ。 今回のデザインは普通のheaderっぽいものがなくて、左上の方がh1だったりするわけですが、とりあえず背景画像(jpg)とロゴ部分の画像(gif)を用意して、こんなソースにしてみました。 XHTMLソース <h1 id="sitelogo"> <a href="http://redline.hippy.jp/">REDLINE MAGAZINE | webデザインに関するさまざまな情報掲載サイト <img src="http://redline.hippy.jp/images/temp/logo_01.gif" alt="REDLINE MAGAZINEトップページ

うまく文章にまとめる自信がないので思想回路にそった展開で書いてみる。 display:noneの読み上げ問題等は別として、text-indentを使った画像置換はCSSが有効な状態で画像は非表示という閲覧環境下では何も表示されないという現象がおき、アクセシビリティ的にやばいという前提で。 画像置換、結構利用している私 →画像置換の問題が何かは理解した上で使っているつもりだが･･･ →そもそも画像無効ってことはimgタグで入れたものに対しても画像は表示されない。Altが入っていればなんとかなるという目線ではＯＫということ。 →画像置換じゃなくてタイトル等は普通のテキストでいいやんと言われても日本語でそれはフォント的に厳しい気がしている。 →ということはやはり置換画像の後ろにテキストを忍ばせておくのが現状ベストということか →特にロゴやナビ部分はそうすべきなんだろうな →でも･･･空のspan

ここ2年ぐらいで、Appleのサイトは積極的にCSSとかAJAXとか新しい技術を採り入れ始めていて、最近はCSS関連のイベントで「AppleサイトのCSSを解析する」みたいなスピーチをされた方もいるらしく、サイトの存在自体がおもしろくなってきたと思う。特に個人的にスゴイと思うのは、全体一発リニューアル！とかやらずに「少しづつ、かつ抜け目なく」新しい技術をサイトに注入して、まるで生物が進化するかのようなアップデートをしているところ。一発リニューアル！が難しい大企業系サイトとして、ここまで柔軟かつデザインドリブンな運営方法は学ぶべきところが大きいと思う。 とはいってもAppleではiPhone登場時、アップルジャパンでは新iMac登場時に、10年近く使い続けたタブデザインを新しくし、珍しく全ページに渡る更新を敢行。それでもう、早速Firebugなんかで構造をチェックしていたのだけど、グローバル

ドットインストール代表のライフハックブログ

Google のウェブログ公開ツールを使って、テキスト、写真、動画を共有できます。

Kevin Yank氏によって執筆されたCSS tablesに関する記事が2月28日(米国時間)、SitePointに「Table-Based Layout Is The Next Big Thing」として公開された。IE8がリリースされた以降のWebデザインのテクニックを検討するうえで興味深い内容だ。 現状では複数カラムデザインを持ったのWebページを制作する場合、古典的にはHTMLのtable要素とCSSによるサイズ指定を組み合わせたり、CSSを使う場合でもトリッキーな指定を行わなければならない。最新のCSSの機能を使うとIE6/7などで表示されない問題があるからだ。 こうした状況はIE8の登場からかわることになりそうだ。すでに主要なWebブラウザには導入されているCSS tablesの機能がIE8に導入されるためだ。このため、IE8の普及にあわせて従来の複雑な記述を、CSS tab

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

Home Archive エラスティックレイアウトは採用しない方がいいのでは エラスティックレイアウトは採用しない方がいいのでは 2008年02月25日 category:Design Comment(6) Trackback(0) エラスティックレイアウトとは エラスティックレイアウトとはコンテンツの幅をemで指定することで、文字の拡大、縮小に合わせてコンテンツの幅も変化するレイアウトのことです。例えばこのブログも現在のデザインはエラスティックレイアウトになってますし、Yahoo!も先日のリニューアルでエラスティックレイアウトになってますね。（2008/5/19追記：現在このブログはエラスティックレイアウトではありません。） 試しに、このブログやYahoo!で文字サイズを変更すると、コンテンツの幅が変わるのがわかると思います。（Yahoo!は拡大では幅が変わるけど、縮

A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント

CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS

追記あり IRCで知人から HTML及びCSSは習得が難しい言語か！の記事について、僕の意見を聞きたいと言われました。僕もだいぶ前から、マークアップエンジニアとして働いている人の考えに思うところがあったので反応してみます！あっと、ちなみに、記事はHTMLについて話されていますが、CSSも含めて意見を述べさせていただきます。 まず、僕の考えを端的に伝えるために、当時のIRCでのログを編集して貼り付けます。改めて読み返すと言葉足らずだったり、脱線しているところもあるので、後に補足しますね。 (wu^-^) HTMLとかCSS勉強したいひとは (wu^-^) なぜ勉強したいかってところが大事 (wu^-^) HTML言語そのものが面白いなんて思う人は稀なのは確か (wu^-^) 何か作りたいものとか (wu^-^) 表現したいものがあって (wu^-^) HTMLはその道具にすぎなくて (wu^

免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら