CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
Movable Type 4 Beta レビュー
先日 Beta リリースされた次期 Movable Type である、「Movable Type 4」 ですが、早速 Beta 版を入手してテストしてみました。... 先日 Beta リリースされた次期 Movable Type である、「Movable Type 4」 ですが、早速 Beta 版を入手してテストしてみました。 今日たまたま SixApart の中の人と打ち合わせしている時に、デモを交えて色々見せて頂いたので、その中で特に気になった点などを挙げてみたいと思います。まだ英語版のみ （日本語の入力はもちろん可能） の Beta 提供ですし、正式リリースまでに変更される点もあるかもしれませんが。 Movable Type 4 開発者向けベータテスト ： Six Apart 利用規約にしっかり目を通してから使用しましょう。ファイルをダウンロードしたら解凍してサーバにアップ。いつも通
MT & HTML Slidy でスライドを作る | WWW WATCH
プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用し... プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用している方をセミナーなどで頻繁に見かけるようになりました。 このブラウザ上で動作するスライドは、(X)HTML + CSS + JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個人的にもこの 「HTML Slidy」 を利用したスライドをどこかで使ってみようと思っていたところでしたので、いい機会ということで、テンプレートを作って公開してみることにし
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
tfoot は tbody の前に書いた方がいいよ
404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た... 404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た時にその HTML ソースはないなぁ...... と思ったのと同時に、tbody に CSS を適用して overflow:auto とかすれば終わる話じゃないのとか思ってそれについてエントリーを書こうかなと思った瞬間、hxxk.jp さんにて 「CSS で tbody 要素を一定の高さにして、 overflow: auto でスクロール表示にする tips」 っていうエントリーが上がってるのを見て萎えた。 で、それについて書くのは諦めたんですが、hxxk.jp さん
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
ピクセル広告ページを作ってみた
昨年、ピクセル単位で広告スペースを販売するという手法を使い、5ヶ月で 100万ドルを稼いで話題になった 「Million Dollar Homepage」 を覚えていらっしゃる方は多いのではないでしょうか。 この Million Dollar Homepage と同じピクセル広告ページを作成するための PHP スクリプトとして公開されているのが、「GPix Pixel Ad Script」。PHPSPOT さんなどでも紹介されていました。 で、今回はその 「GPix Pixel Ad Script」 を実際に利用して、ピクセル広告販売サイトを作ってみました。 下記サイトの公開は終了しました。 GPix Pixel Ad / WWW WATCH 公開されているスクリプトをベースにテンプレートのカスタマイズと CSS を新規で作成して作ってみましたが、ベースのスクリプトが非常に良くできているの
Web デザイナーに求めたい 5つのこと | WWW WATCH
趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。 個人的にスキルが 「デザイン」 よりも 「コーディング」 に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。 自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので
本当に CSS だけでテキストにシャドウを
前回、S i M P L E * S i M P L E さんのエントリーにただ乗りさせていただく感じで書いた 「CSS は正しくお使いください」 というエントリーですが、Text shadows プロパティが定義されてブラウザが実装するまで待てって、まったく解決になってねーよっていうエントリーだったせいか、なんか他に方法ないのかね？という話を知り合いからもらったので、その時話した方法をメモ代わりに上げておきます。 最初に断っておきますが、これから紹介する方法は、今現在、IE では認識されませんので、あまりインパクトはないということと、テキストにシャドウを付けるということ自体、無理に CSS でやることなの？という個人的な疑問もありますので、積極的に使用をオススメするものではありません。あくまでこんな方法もあるよという程度で楽しんでください。 ということで、まずはいきなりソースから。 HT
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
