このブログは、MT（Movable Type[ムーバルタイプ] 3.31-ja）を導入して制作されています。デフォルト（初期設定）のレイアウトだとイマイチに思ったのでカスタムメイドでのレイアウトで制作してあります。ベースは、Yahoo! UI Libraryが公開されましたのでそちらのGrids CSSを使ってページレイアウトしています。 このYahoo! UI Library　Grids CSSは、かなり使えるものだと思います。多くのユーザーを相手にアクセシビリティーを考えて設計されたCSSレイアウトなのでCSS（スタイルシート）を覚えようと思っている方にも参考にするととてもいい情報です。今回は、自分なりにこのYahoo! UI Library　Grids CSSを解る範囲で説明・紹介いたします。 かなり使えるCSSソースなので、是非DLしてお使いになることをオススメします。ソースのDL

CSSでレイアウト Web ページのレイアウトは、よくテーブルが使われてきました。現在は少なくなりましたが、まだ一部で使われています。新聞、雑誌記事のように格子状に分割し文章や画像を貼り付ける方法です。 いわゆる「段組」です。自由に複雑な段組ができます。代表的なブラウザは、テーブルレイアウトで作成された Web ページの表示に違いがでることはほとんどないのですが、 HTML ソースは複雑になりメンテナンスが難しく、標準仕様を策定している W3C では「アクセシビリティ」という点でテーブルレイアウトは推奨していません。アクセシビリティとは、様々な利用環境に配慮することで、例えば、テキストブラウザ、音声読み上げブラウザ、モバイルなどです。CSS によるレイアウトを推奨しています。 現在は、高機能でマルチスクリーン、レスポンシブに対応できる、新バージョン CSS3 の「マルチカラムレイアウト」や

This domain may be for sale!

今更ですが、ボックスモデルハックって何？って言うCSS初心者の方へ。（偉そうですが、僕も全然です；） voice-familyハックを利用したBox Model HackをCSS Dencitieにて翻訳されていますので、ご覧になってみてはいかがでしょうか。基本的なハックですが、IE5.5などをキャッチアップできるので、使えれば重宝すると思います。ここでは、簡単に説明してみます。 例えば、ここに以下の様なブロックがあるとします。 div { width: 500px; padding: 10px; border: 5px; } OperaやIE6・NN6以上などのモダンブラウザであれば、ちゃんと500pxの幅で表示されるはずなのですが、CSS1を間違った解釈で表示するブラウザ（IE5.x）の場合、width500pxからpaddingとborderを引いた470pxと表示してしまいます。（

clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる

実践 Web Standards Design が電子書籍になりました 概要 拙著「実践 Web Standards Design」通称ホップ本の電子書籍版が改訂新版として10月3日に発売になりました。 公開日 2011-10-03T19:31:53+09:00 URI https://www.lucky-bag.com/archives/2011/10/wsd-epub.html カテゴリ Misc タグ Book CSS HTML XHTML NAVER Japanにジョインしました 概要 10月1日付けでネイバージャパン株式会社に入社してましたというご報告です。 公開日 2009-11-01T17:56:23+09:00 URI https://www.lucky-bag.com/archives/2009/11/joined-with-naver.html カテゴリ Misc タグ

2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree

YUI Fonts CSS The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control. Fonts CSS: Offers full A-grade browser support. Provides consistent font sizing and line-height. Provides appropriate cross-OS font-family degradation paths. Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes. Works in both "Q