div要素をクロスフェード表示するJavaScript | WWW WATCH
結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。 Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 （じゃなくてもいいんですが） をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。 デモがこちらで公開されています。 必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。 <script type="text/javascript" src="/js/bsn.Crossfader.js"></scrip
モジュール化で変わる XHTML1.1 と CSS3
去る 2月1日に開催された 「XHTML+CSS (r)evolution, 2nd」 。残念ながら私は参加できなかったのですが、どうやらサイバーガーデン益子さんのプレゼン内 （スライド資料 / 音声データが公開されています） で、当サイトの 「CSS3 セレクタ チートシート」 を参考資料として取り上げてくださったようで恐縮至極な今日この頃。 公開されているスライド等は CSS3 に関してとても勉強になる内容が詰まっていますので、ぜひアクセスしてみることをオススメしますよ。 で、プレゼンの中で益子さんもおっしゃってますが、CSS3、及び XHTML1.1 からの変更点として最も大きいのが、モジュール化という概念を取り入れ、各構成要素が細分化される形で定義されているということ。 XHTML にしても CSS にしても様々な機能を盛り込んでいった結果、その仕様はかなり重たい仕様となっています
パンくずリストがベストとは限らない | WWW WATCH
最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ... 最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。 個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。 で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か
CSS でオリジナルポスターを作ろう
Digg 経由ですが、HTMLKit.com で公開されている、「CSS Poster」 が気になったので紹介。 この 「CSS Poster」 は、その名の通り、CSS ファイルからポスターを作ってくれるオンラインサービス。CSS ファイルの中身を読み込んで、その階層構造を視覚的に表した画像を生成してくれるものです。 HTMLKit.com's CSS Poster is an online tool that can be used to generate graphical quick references for your CSS files. 対象はローカル PC 上にある CSS ファイルのみですが、ファイルをアップロードして、フォントサイズを選び、「Create Poster」 を押せば、画像の生成が始まります。完了したら、プレビューの下にある 「Download full
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
Happy Birthday CSS !
1996年12月17日に、CSS level 1 が勧告されてから、10年。2006年12月17日で CSS は 10歳の誕生日を迎えました。 しかし、CSS が本格的に活用され始めたのはここ数年ですね。ブラウザの実装がなかなか追いついてこなかったという苦難を乗り越えての 10ｔｈアニバーサリーです。 Cascading Style Sheets Celebrating 10 Years with Style ： W3C In 2006, the World Wide Web Consortium proudly celebrates the ten years of Cascading Style Sheets (CSS), the technology designers use to create attractive, economical, and flexible Web si
角丸に関するあれこれ
最近、というか 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 サービスは、これ無料でいいの？というようなサービスが色々と提供されていますが、今度は IBM と Yahoo! の共同で、エンタープライズサーチまで無料で提供されました。Web サイトからダウンロードして、すぐに導入できます。 IBMとYahoo!、エンタープライズ検索ソフトを無料提供 ： ITmedia IBM OmniFind Yahoo! Editionは、IBMのエンタープライズ検索ツール「IBM OmniFind」の基本要素と、Yahoo!のWeb検索とを組み合わせたもので、サーバ当たり最大50万件の文書に対応可能。30カ国語以上、200 種類以上のファイル形式に対応している。オープンソースの全文検索エンジンLuceneを使用しており、異なるプラットフォームでの全文インデックス化が可能。 特に中小企業にはありがたい話ですね。 ちなみに、IBM OmniFind Y
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
CSS は正しくお使いください
立て続けに人のエントリーに乗っかってますが...... S i M P L E * S i M P L E さんで紹介されていた、「CSSだけで文字にドロップシャドウをつける方法」 （元ネタはこれ） に関してはちょっと気になったので書いておこうと思います。 実は S i M P L E * S i M P L E さんのエントリーの元ネタでは書かれているのですが、このようにテキストを 2回書いてそれを CSS によって重ねてしまう方法は、下記のような弊害があります。 CSS が OFF だと、テキストがだぶる 音声ブラウザは 2回同じテキストを読み上げることになる CSS が OFF という状況は、ブラウザでアクセスしてくる人間様相手の場合、あまり起こらない状況だと思いますが、ページをスクレイピングしていくようなユーザーエージェントは、CSS なんて基本的に読みません。例えば、Google
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
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
5分でわかる Google Co-op 導入方法
今まで当サイトのサイト内検索は、Movable Type 標準の検索機能を使っていましたが、これがなかなか重たいのと、検索精度もイマイチなので変更することに。 で、以前にも紹介したとおり、Google からリリースされた、カスタムサーチエンジン制作機能、「Google Co-op」 を利用して、サイトのデザインに合わせたサイト内検索を実現してみることにしました。 ということで、簡単に自分のサイトに 「Google Co-op」 を導入するための作業の流れを説明してみます。Google のアカウントを持っている前提で行きますんで、その辺はよろしくお願いします。 1） Google Co-op で自サイトだけを検索する検索エンジンを作る Google Co-op にログインしたら、新規に検索エンジンを作成します。画面上の 「Create a Search Engine」 をクリック。 次の画面
XHTML、CSS を学ぶ時の 6つの間違い
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
