SSI で IE 6 のみ XML 宣言を省略
特に目新しいお話ではないんですが、SSI の条件式を使用して、ブラウザ別にあれこれする方法について書き留めておこうと思います。 今回は、XHTML で文書を公開... 特に目新しいお話ではないんですが、SSI の条件式を使用して、ブラウザ別にあれこれする方法について書き留めておこうと思います。 今回は、XHTML で文書を公開する時に面倒な問題である、IE6 において、XML 宣言等、DOCTYPE 宣言以外を文書先頭に書いた時に、DOCTYPE スイッチによってレンダリングモードが過去互換になってしまうバグへの対応を SSI で何とかしてみようというのを主に取り上げてみたいと思います。 Apache HTTP Server の現行バージョンでは、SSI で条件式が使用できます。なので、 <!--#if expr='"$DOCUMENT_URI" = "/foo/file.html"' -
個人的に常用中の Firefox 拡張機能 20個 | WWW WATCH
いたるところに同じようなエントリーは数あれど、懲りずに私が個人的に日常利用している Firefox 拡張機能を挙げてみました。 色々インストールしてはあまり使わないので削除したりを繰り返していますが、ここに挙げた 20個はその中で定着したもの。 All-in-one Sidebar Clippings Copy URL + Firebug FireFTP Google Toolbar for Firefox Greasemonkey IE View Link Alert Nightly Tester Tools no-referrer QuickNote ScrapBook Screen grab! Search Station Tab Catalog Tab Mix Plus Tab URL Copier User Agent Switcher Web Developer All-in-
モジュール化で変わる XHTML1.1 と CSS3
去る 2月1日に開催された 「XHTML+CSS (r)evolution, 2nd」 。残念ながら私は参加できなかったのですが、どうやらサイバーガーデン益子さんのプレゼン内 （スライド資料 / 音声データが公開されています） で、当サイトの 「CSS3 セレクタ チートシート」 を参考資料として取り上げてくださったようで恐縮至極な今日この頃。 公開されているスライド等は CSS3 に関してとても勉強になる内容が詰まっていますので、ぜひアクセスしてみることをオススメしますよ。 で、プレゼンの中で益子さんもおっしゃってますが、CSS3、及び XHTML1.1 からの変更点として最も大きいのが、モジュール化という概念を取り入れ、各構成要素が細分化される形で定義されているということ。 XHTML にしても CSS にしても様々な機能を盛り込んでいった結果、その仕様はかなり重たい仕様となっています
HTML タグを探すのに便利なブックマークレット
「tingelets」 は、(X)HTML 文書内の選択した要素に背景色を付けて、その場所をわかりやすく表示してくれるブックマークレットのセット。 ブラウザごとの拡張機能ではなく、ブックマークレットなので様々なブラウザで使用可能なのがミソ。 tingelets ： Bookmarklets for Web Developers tingelets are a set of bookmarklets that you can place in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layo
Ajax、CSS、PHP などのチュートリアルまとめ | WWW WATCH
Ajax、CSS、PHP、Flash、JavaScript などを使用して何か作ろうと思った時に、1からすべて考えるのではなく、他の人が過去に作っているサンプルなどを参考にできたらとっても助かったりします。ということで、これら様々なチュートリアルをまとめたサイトを紹介。Digg 経由。 Tutorials Round-Up: Ajax, CSS, PHP and More ： Smashing Magazine In this post we've covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials. You can also check out our list of Photoshop tutori
CSS3 セレクタ チートシート
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート （PDF） ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
CSS Engine in Japan OpenSearch plugin
TRANS さんで、「日本語で日本語のCSS情報のみをGoogle Coopで検索する。」 と題して、日本語で日本語のCSSについての情報を検索する 「CSS Engine in Japan」 というカスタムサーチエンジンが公開されていたので紹介。 あと、紹介ついでに CSS Engine in Japan 内で 「Firefoxの検索プラグインに入れてみたい。」 と書かれていたので、おせっかいにも OpenSearch plugin 用の XML も簡単に作って公開してみます。 実際の XML ファイルは下記においてあります。 CSS Engine in Japan OpenSearch plugin ご利用はご自由に。改変、再配布もご自由にどうぞ。動作テストしてませんので、おかしいところがあれば指摘してください。 TRANS さん、よろしければ上記の XML ファイルをお使いくださいま
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
Web デザイナーに求めたい 5つのこと | WWW WATCH
趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。 個人的にスキルが 「デザイン」 よりも 「コーディング」 に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。 自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので
CSS デザインまとめサイト 44サイト | WWW WATCH
Modern, well-designed web pages deserve special focus in internet. They receive that thanks to so-called CSS galleries, into them are such pages arranging. On this page you can find a list of quite 44 CSS galeries of whom webdesigners from all the world gathers inspiration. 個人的には下記のサイトなんかよく利用させてもらってます。 CSS Beauty CSS Bloom CSS Blast CSS Drive CSS Mania CSS Remix CSS Vault Darkeye Design Shack Unma
滑らかに開閉するメニューのサンプル
以前、個人的に作っていたサイトで、なんかメニューの見せ方を工夫できないかなと思って、「prototype.js」 と 「effects.js」 を利用してやって... 以前、個人的に作っていたサイトで、なんかメニューの見せ方を工夫できないかなと思って、「prototype.js」 と 「effects.js」 を利用してやってみたのが今回紹介するメニューのサンプル。 マウスオン / オフすると、隠れているサブメニューが滑らかに閉じたり開いたりします。クリックで開いたり、折りたたまれたりするメニューはよくありますが、それに無駄なエフェクトを施した版といったところ。 実際に動作しているサンプルはこちら。マウスオン / オフで滑らかに開閉しちゃいます。 さて、今回の材料は、 JavaScript ファイル 3種 本メニューの HTML ソース 本メニュー用 CSS の追加 JavaScript
本当に CSS だけでテキストにシャドウを
前回、S i M P L E * S i M P L E さんのエントリーにただ乗りさせていただく感じで書いた 「CSS は正しくお使いください」 というエントリーですが、Text shadows プロパティが定義されてブラウザが実装するまで待てって、まったく解決になってねーよっていうエントリーだったせいか、なんか他に方法ないのかね？という話を知り合いからもらったので、その時話した方法をメモ代わりに上げておきます。 最初に断っておきますが、これから紹介する方法は、今現在、IE では認識されませんので、あまりインパクトはないということと、テキストにシャドウを付けるということ自体、無理に CSS でやることなの？という個人的な疑問もありますので、積極的に使用をオススメするものではありません。あくまでこんな方法もあるよという程度で楽しんでください。 ということで、まずはいきなりソースから。 HT
IFRAME を使わない方法の補足 | WWW WATCH
phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。 人気エン... XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。 iframe 要素は、HTML4.01 Strict 及び XHTML1.0 Strict では未定義 （Transitional、Frameset では定義済み）、XHTML1.1 では廃止されていますので、Strict でコーディングする際に外部オブジェクトを (X)HTML によって読み込むには object を使うことになりますね。 で、object 要素の DTD はどうなっているかというと、（XHTML1.0 Strict） <!ELEMENT object (#PCDATA | param | %bl
Firefox 検索ショートカット詰め合わせ | WWW WATCH
Firefox のロケーションバー検索は、任意のキーワードと組み合わせることで簡単に色々な検索ができます。これがかなり便利なので頻繁に使うのですが、せっかくなの...
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
