はてなブックマーク

この記事は「after 疑似要素で CSS ロールオーバー」の続きです。 このサイトの定番ネタです。「え、いまさら？」という声が聞こえてきそうな気がする画像置換ですが、今回は3年ほど前に大流行した「テキストをCSSの背景画像で置き換えて、text-indentですっ飛ばすアレ」にCSS3の要素を加えてじゃっっかん今風?にしたものです。 ちなみにこの手法は、大流行から1年ほどで「テキストをtext-indentで飛ばすのはアクセシビリティ的によくないし、CSSの背景画像じゃなくて画像と代替テキストという自然な(本来の)マークアップをすべき」みたいな思想が広まって一時期廃れたかに思われましたが、近年の表示速度最適化ブームに乗って、CSS Spriteを実現する手段として復活を遂げている、という経緯があったような気がします。いや、詳しくは忘れちゃいましたが;P あいかわらず今回もCSS Nite

テーマ選び 今回何を話そうかひたすら悩みました。HTML5の要素とかCSS3のプロパティとかセレクタとか･･･結構マニアックなネタもあったのですが、それだと何いってんのコイツ、となってしまいますし、何よりいま使えないネタは興味もってもらえないかもしれない･･･とか色々悩みました。結局できるだけ業務でも使えるTipsがいいなぁとか波が来ないので全然まとまらず、結局1日前にやっと決まりました。 マークアップをしている方で、inline-block を知っている方は確認として聴いてもらえそう マークアップをしている方で、inline-block を知らない人は明日使える マークアップをしていない方にも明日使えるということで興味をもってもらえそう などということを考えていました。そして「これは使えそうかも」と思ってもらえるような構成を意識してみました。3つの例は初めにいくほどオススメのTipsにな

静岡にある老舗茶屋「富士の園」と、浅草に本店を持つ老舗和菓子店「福禄家」の協力を得て、日本初の日本茶を中心に提供する全く新しいテイクアウト型の喫茶店です。 新商品&期間限定商品紹介 New product & time-limited article 新作和菓子【富士の桜】 甘さ控えめの春らしい和菓子です。 煎茶にとってもよく合います。 商品詳細 春の新茶【静岡茶】 お待たせしました2007年度の新茶が出ました。新茶特有の甘みをご堪能ください。 商品詳細 富士の園からのお知らせ News from a FUJINOEN 【2007年1月26日】 富士の園プレゼンツ 日本茶に合う和菓子全集！ジャパニーズ スイーツ グラフィティ ～情報提供して頂いた会員様の中から抽選で900組1,800名様に日本和菓子の旅へご招待～ 【2007年1月26日】 新作和風壁紙ダウンロード開始！今すぐ会員登録を！

先日、WCAN mini Markup Vol.10がありました。第10回を数える今回は「CSS3＋jQueryを実際に使ってみよう！」というテーマで、WCAN x CSS Nite 2009 SPRINGでの益子さんのセッションを実践し紹介し合おうというものです。 僕が紹介したのは、CSS3のレイアウトに関する新しいプロパティ[1]。新しいプロパティを使うとこれからすごくレイアウト組が楽になるよね！ってことがいいたかったので、説明は他所に任せてサンプルを見ていただいくことでイメージしてもらう形にしています。 なお、今回のサンプルは一部のブラウザのみしか動作しません。オススメはSafariかGoogle Chromeです[2]。 可変レイアウト: 横幅指定に % 、ボーダー幅に px を指定したボックスの場合 サンプルのように、2つのボックスを左右に並べて可変のレイアウトを組みたいときを考

先週末にWCAN x CSS Nite 2009 SPRINGがありました。今回はCSS Niteとの共催セミナーということでセッション数も多めです。テクニックから仕事効率化、ブランディングまで幅広いレイヤーのお話を聴くことができました。 毎度のごとく名古屋国際会議場で。今回も過去最多の200名超の参加があったらしいです。前回が160名程度といことでしたので、どんどん大規模になっていってますね。 [SESSION-1] CSS3＋jQueryで行こう！ [SESSION-2] CSSレイアウト：IE 6対応のかんどころ Lightning Talks [SESSION-3] デザインビュー派？ コードビュー派？ Dreamweaverでのコーディング再点検 [SESSION-4] ブランディングの正体 懇親会 関連記事 [SESSION-1] CSS3＋jQueryで行こう！ 益子 貴寛　

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。 画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。 画像はCSS Nite LP3の課題のものを利用させていただいています。 使用した画像ファイル わかりやすいように2pxのボーダーと背景色を設定しています。 viewmore.gif HTMLで利用した画像です。 viewmore-hover.gif

えむもじらさんやcaramel*vanillaさんが、Firefox 3へ移行するときに手放せない拡張機能を挙げられています。 Macでは現在Safariがデフォルトブラウザですが、PCはFirefox 2を使っていますので、そこに入れている拡張機能のバージョン3への対応状況を調べてみました[1]。 Firefoxは主に開発用として使っているので、そういう拡張機能が多いです。また、上にあるほどはずせない拡張です。2008年6月16日に調べた結果ですが間違いがあればご指摘ください。 All-in-One Gestures – MaxVersionを書き換えれば動作可能 FireGesturesが3対応の代替(より高機能)になるそうです[2] Tab Mix Plus – 今週末 Make Link – Ready! SBMカウンタ – Ready! Bookmark Sync and Sor

少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。 CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU 仕組みとミソ 元記事のようにネガティブマージンを使い、中央配置したボックスの大きさよりブラウザのウィンドウが小さくなると、右上半分が消えてしまいます。さらに、position: static;なbody要素に絶対配置すると、ブラウザのウィンドウを小さくしていくとうまいこといかない (画面の中央に表示されない) 現象がみられます。ということで今回は以下のように対策してみました。 高さ100%のbody要素にposition: relative;を指定する。 ボックスの縦横にmin-width、