F+R (FplusR)

[Mac] VirtualHostXでサイトディレクトリを簡単に作成

Tue, 11 Nov 2008 13:33:25 +0900

かねてから、肩書きだけは取締役（実態は謎）のOさんより、「Leopardでサイトディレクトリを簡単に作成できるソフトはない〜?」と聞かれていたました。ようやく暇ができたので[違]探してみました。

今回試してみたソフトは「VirtualHostX」という7ドルのシェアウエアです。

結論からすると、MAMPがほとんど不要になりました。MAMPの場合、http.confを編集しなければ行けません。しかも、たまにMAMPが壊れます[涙]。MAMP Proでは、MAMP スペシャル (風ブログ) http://aeolus.jp/higuma/2007/06/c_13.htmlのレビューによると、いろいろとできるようだけど、いかんせん価格が5,344円（2008年11月11日現在）と、価格が微妙です。

当方の目的（ローカルでWebサイト確認）では、充分ですが、MAMPのようにPHPなどをいじられる訳ではないのですが、スキルの低い人[誰]にhttp.confをいじらせるよりはいいかと思います。

[JQuery] ロールオーバーをinput要素にも対応させる

Fri, 10 Oct 2008 00:00:56 +0900

本当にこのサイトを放置していましたが、一応生きています。
MT4移行計画も準備中です。ですが忙しくてなかなかできません。

さて、本題ですが、input要素のボタンをロールオーバーさせたい案件がありまして、いろいろと調べてみました。

はじめは、「jQueryだけで画像のロールオーバーを実装する方法」を参考にしていましたが、Image Rollover Codeに慣れた身に関しては、個別にファイル名を記載してプリロードさせるやり方はやはり面倒です。クラスを割り当てて、特定のファイル名を記述するとロールオーバーを勝手にやってくれる方が、制作する方としては非常に楽です。

そこで、Easy Image Rollover Script With jQuery ~ PEPS.caのロールオーバースクリプトが、input要素にも対応しています。

ただ、このままだとおもしろくないので、すこし改良してみました。
$(".ro").hover部分を少し改良して、$(".ro").not("[@src*='_o.']").hoverとすることで、「_o」とついた画像にクラスを割り当てているときには、マウスオーバーしないようにしてみました。
いちおう、自分用ですが、ソースをおいておくので、好きなように使ってください。

そういえば、最近[何時]転職していたんだった。

Leopardで、特定フォルダ以下のファイルを検索する

Sat, 03 Nov 2007 10:59:22 +0900

Mac OS X 10.5（Leopard）には、Mac OS X 10.4（Tiger）スマートフォルダの仕様がすごく変わっています。
特定のフォルダの中のファイルを検索して保存したいときなど、検索条件を作る手順がものすごくわかりにくいのです。

いろいろと、試行錯誤をした結果、以下の方法で特定のフォルダ以下の検索ができるスマートフォルダを作成することができます。

検索したい特定のフォルダに、Finderで移動します。
Finderのツールバーの右上にある検索窓で検索を行います。
（例：拡張子を指定するなど）
「検索したい特定のフォルダ」以下に絞った検索結果が出てきます。
＋ボタンで検索条件を追加します。
（例：「最後に開いた日が10日以内」、などの条件を追加するといいでしょう。）
「保存」ボタンを押して、検索条件を保存します。

しかし、わかりにくい仕様になったと思います。

DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法

Tue, 16 Oct 2007 22:19:18 +0900

今日は、DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法を紹介します。

DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまいます。

私はデザインビューをあてにしないで作業していますが、たまにはあてにしたくなる時もあります。
そんなときには、clearfixを指定している部分に、「overflow:hidden;」「overflow:auto;」のどちらかを指定します。

これで、デザインビューでclearfixが原因でレイアウトが滅茶苦茶になる時はなくなるでしょう。
ただし、「overflow:hidden;」「overflow:auto;」は、諸刃の刀ですので、本番環境でのブラウザ確認はしっかりとやられたほうがいいでしょう。
これが原因で本番環境でレイアウトが変になっても責任は取れないのであしからず。

GridMaker Rebootを使ってみた。

Wed, 10 Oct 2007 18:18:31 +0900

ひさしぶり〜なエントリーです。なにしろ仕事とか忙しくて更新している暇などありませんでしたが、ぼちぼち更新していこうと思います。（いちおうMT4で構築しだしているのですが、なかなか進んでいなかったりする訳で）

Photoshopにも「スクリプト」なんてものがありますが、実は使ったことなどなかったのですが（汗）、「GridMaker Reboot」という変なものを見つけてしまいました。
これは、Photoshopのスクリプトメニューから読み込んで、黄金比のグリッド（ガイド）をひいた状態の新規ファイルをつくってくれるものです。

手順

GridMaker Reboot - Article - andrewingramから、スクリプトをダウンロードして、適当な場所におきます。
「ファイル」→「スクリプト」→「参照」を選択します。
ダウンロードした「GridMaker2.jsx」を読み込みます。
幅と余白、カラム数を入力します。
グリッド（ガイド）をひいた状態の新規ファイルができあがりです。

これで、みなさんのお仕事が手抜きできれば幸いです。

ダウンロード先：GridMaker Reboot - Article - andrewingram

スタイルシートのコンポーネント要素〜CSSの記述ルールとか管理とか〜

Wed, 07 Feb 2007 17:59:40 +0900

前回からの続きです。今回はCSSの記述ルールとか管理とかについて考えてみたいと思います。ということで、今回のお題（笑）です。

サポートするブラウザの種類を決めておこう。
記述するパターンを統一しよう。
CSSハックがある場合、あとで取り除くことが容易にできるように考慮して書いてみよう。
CSSハックの組み合わせ一覧の例
そもそも、DreamWeaverって、CSSに書くのにまったく向いていないじゃないの!?じゃあ、どうしたらわかりやすく管理できるの!?

サポートするブラウザの種類を決めておこう。

サポートするブラウザの種類を決めておくことで、制作の時間が大幅に違ってきます。

5バージョン（特にMacIEとやら）でも、フルCSSのポップアップメニューを使えるようにしてください、なんて言われた日には泣きます。実際にあった案件の話ですが、泣きながらなんとかしました。けど、そのメニューに4日くらいかけていたような気がします。

記述するパターンを統一しよう。

記述するパターンを持ってしまえば、それだけ使い回しがやりやすくなります。コンテンツ部分以外は、たいていパターンが一緒なので、IDやclassなども含めて、事前に統一しましょう。

CSSハックがある場合、あとで取り除くことが容易にできるように考慮して書いてみよう。

CSSハックが1つのセレクタの指定の中に混ぜてはいけません。検索しやすいようにコメントも工夫しましょう。同じセレクタの指定でも、別の記述にしたほうがいいでしょう。

一番分かりやすいのが、「後付けハック」で、そのブラウザだけが読む記述で記載するのが一番分かりやすいと思います。

CSSハックの組み合わせ一覧の例

昔書いたような気がするけど、もう一度書いておきます。

Internet Explorer 5.5/6

* html

Internet Explorer 7

*:first-child+html

Opera+Internet Explorer 7

*+html

Opera+Safari

html:first-child

Opera

*+html:first-child

*+html>/**/body

※ Internet Explorer 5.0 は個人的にはCSSを適用していません。また、Internet Explorer 6.0 は互換モードで動作させています。

そもそも、DreamWeaverって、CSSに書くのにまったく向いていないじゃないの!?じゃあ、どうしたらわかりやすく管理できるの!?

・・・っていうことですが、基本的には最近はDreamWeaverでCSSって記述してないですね（笑）。うちはMacなので、CSSEditを使っています。どういうソフトかは、検索してみてください（手抜き）。

といっても、これはこれで色々と問題があるので、あるCMS(?)を使って管理する実験をしています。次回からは某CMS(?)で管理する手法についてネタを出していきましょう。（やっと本題のようです[笑]。）

スタイルシートのコンポーネント要素〜ネーミングとCSS 3 Attribute Selectors〜

Sat, 27 Jan 2007 19:19:49 +0900

前回からの続きです。よく使うコンポーネントを構成する要素一覧の例をあげてみました。今回は、つくったクラスのネーミングについて考えてみたいと思います。

どのようなネーミングがいいのか

理想は、「文書中でどのような役割を持つのか」が一番です。しかし、ネーミングを考えるのは難しいのでそのあたりは少しずつかんがえていくといいでしょう。現実的に、「同じ内容なのに、クラス名だけ違う」のでは、コンポーネントの名前としては「分かりにくい」ので受け入れられないかもしれません。

ネーミングと CSS 3 Attribute Selectors

意外とネーミングを考えるときにキーになるのが「CSS 3 Attribute Selectors」です。
例えば、E[foo*="bar"] の指定を行い、foo 属性値が部分文字列 bar を含んでいる E 要素にマッチするようなクラス指定をおこなえる、というのがすごく便利なんですよ。ソース管理はすごく楽になります。

たとえば、[class*="Instructions"] と指定すると、「Instructions」という文字を含んだクラスすべてに適用される指定をおこなうことができます。いくつ、「Instructions」というクラスがあっても1行で済むんです。

これに限らず、コンポーネントを構成するときのネーミングを考えるときには、CSS 3 のセレクタに関する情報を勉強してから考えるのをおすすめします。

そういえば、「カニの貴公子」さん（笑）が、こんなセミナーをやるんだった。XHTML+CSS (r)evolution, 2nd。内容は「CSS3のカタチとナカミ」だそうです。

ネーミングの実例から考える

上之郷谷さんが、「CSS でよく使う装飾定義をコンポーネントとしてまとめる」を拝見しましたが、ちょっと問題があります。ネーミングの考え方が少しどうかな、というところがある気がします。

例えば、「class="tab"」という指定ですが、タブ式ナビゲーションじゃないところに、「class="tab"」なの!?という気がします。ナビゲーションには「navigation」もしくは、その省略形の「nav」が入った形がふさわしいと思います。まぁ、アップルみたいなナビゲーションは別ですが（笑）

妥協するところ

といっても、すべてが妥当なネーミングができる訳ではありません。ネーミングが考えつかないときもあります。例えば、「角丸」ですが、角丸を構成するクラスは、「文書中では役割がありません」というときも出てきます。また、本来は妥当な名前ではないが、世間で一定の認知度を得てしまったもの（「clearfix」など）も、妥協してもやむをえないかな、と思います。

コンポーネントでのネーミングルール

さて、私がいま制作しているコンポーネント・モジュールでは、まともなネーミングを考えていたらきりがありません。下手したら、一生かかるでしょう。主要なモジュールだけで、20個以上あるのですから。そこで、以下のようなルールで作っていきます。（半分、妥協の産物みたいだけど）

確実に、ネーミングがつけていけるものは、その名前をつける。（例：カレンダー用のテーブルは、「CalTable」とつける）
必ず、名前の一部に「役割」が入るようにする。
ul要素、dl要素でインライン要素がはいってくるものは、「Inline」が名前の一部に入るようにする。（例：インラインにしてページ番号が入るものは、「InlinePageList」とする。など）
同じ役割でも、ちがうスタイルになるものは、別のネーミングを考える。（例：「InstructionsDocs」と「NoticeTable」）（追記：例えば、同じ「※」印の注釈を扱うクラスでも、 p要素を使うもの（text-indentを使ってスタイルを組む）とtable要素（th要素に「※」、td要素に注釈本文が入る）を使うものは分別する。などする。）
「文書中では役割がない」ときになって、はじめて妥協する。（例：角丸専用のクラス「CurvyCorners」など）
「世間で一定の認知度を得てしまったもの」は、できるだけその名前を使う。（「clearfix」など）
クラスは、複数与えられるものなので、実際の仕事とかで使うときには、「文書構造に即した役割」のためのクラスも付加する。

結局のところ

理想と現実はかくも離れている、というわけで。「分かりやすくて妥当なコンポーネントのネーミング、は不可能」かな、と。

スタイルシートのコンポーネント要素

Wed, 24 Jan 2007 23:58:42 +0900

あけまして、おめでとうございます（とてもそんな気分ではないが）。本年度もよろしくおねがいします。

去年の10月くらいから先日まで、すざましい仕事等の嵐でblogの更新もままなりませんでしたが、今年はテキトー[謎]に更新をがんばっていきたいとおもいます。
ほんとうは、blogのリニューアルとかもやってみたかったのですが、忙しいのと、時と場合によってコードが違うので、管理がややこしくなってきています。

仕事でも、他人の書いたコードを管理するときとかも、訳わからずに力技[謎]でケリつけていますが、自分のコードも進化しているので「訳わからん」状態になっています。
そこで今年は（去年の春から少しずつ実験しているのですが）、CSSのコンポーネント管理を本格的におこなってみることにしました。

コンポーネントを構成する要素一覧

現在時点での、コンポーネントを分類してみました。これくらい用意すれば、8割くらいは使い回しができかな？

レイアウトコンポーネント

画像+コンテンツ（回り込みあり）
画像+コンテンツ（回り込みなし）
フロートボックスリスト
角丸ボックス（div版／span版）

ナビネーションコンポーネント

ナビゲーションモジュール（ul要素）
リスト横並べ（インラインリストナビゲーション版。）
フォーム submitとかのボタンリスト ul要素+画像インラインリスト版
フォーム submitとかのボタンリスト p要素+画像版
アイコン付きリンクのクラス

画像系コンポーネント

画像＋キャプション（dlバージョン）
画像リスト ul要素横並べ（インラインリスト画像）版
画像リスト ul要素縦並べ版
画像 p要素版
フロートボックスリスト（ul要素画像用）

テキストコンポーネント

ul要素のインラインモジュール
dl要素のインラインモジュール

フォームコンポーネント

検索フォーム+検索ボタン（画像）版
検索フォーム+検索ボタン（通常UI）版

テーブル関連

お問い合わせフォームテーブル版基本バージョン
テーブル（データテーブル）
カレンダー用のテーブル

注釈系コンポーネント

※印とかの注釈（孫氏がノイローゼになったらしいあれです）に使うテーブル
※印専用のクラス
PDFとかのプラグインが必要です。テーブル（このサイトの一部コンテンツを閲覧する場合には、「Adobe Flash Player」が必要となります。のアレ）
プラグインダウンロード先リスト一覧のテーブル（NECのコーポレートサイトにあるようなもの）

フォーム

検索フォーム

min* hack

Mon, 06 Nov 2006 17:18:21 +0900

Internet Explorer 7 が出たので、インストールしてみました。いろいろな意見があるのですが、個人的にはこのブラウザはもう使わない方針なので、あえて語りません。

今の会社の社長のマシンで、イエ6（と間違えて入力してしまった）（笑）、Internet Explorer 6 なんてもっと問題ある気が。これから、やろっかな〜といいつつ、進まないblogでは、Internet Explorer 6 以下は「すっぴん」にしますが。コードだけは作っています。

CSS実装徹底検証! そこが知りたいInternet Explorer 7
08-01 ブロック要素化による問題における隙間の問題とか、~~li要素に「display:inline」を指定したときに発生する5pxの隙間（全ブラウザに発生するみたい）の問題とか~~）を一瞬にして解決するCSSを考えてみました。

*{
min-width:~~1px;~~0
min-height:~~1px;~~0
}

*（ユニバーサルセレクタ）に、min-width、min-heightを指定しても、「最小幅」を指定しても、問題ないでしょうし、なにか不具合があれば、該当部分だけしていけばいいだけです。
ちなみに、「min* hack」というのは、当方で適当に名前をつけただけです。

（※2006.11.8追記~~li要素に「display:inline」を指定したときに発生する5pxの隙間（全ブラウザに発生するみたい）の問題とか~~の部分は、当方の勘違いでした。
また、min-width:1px / min-height:1px と指定すると、Internet Explorer 7 だけ、下によけいに1px分の隙間をつくってしまうみたいです。

「餃子ハック」な "@media all" cover hack

Wed, 25 Oct 2006 23:09:19 +0900

転職してから仕事が忙しくて、blogもまともにやっていませんでしたので、久しぶりなエントリーです。今回は単なる備忘録ですが。Internet Explorer 7 が一応正式版になったので、ハックのまとめとかメモしてみました。以前に記事にしたネタとか、新しいネタとかありますが。
「Internet Explorer のハックのメモ」というタイトルで、「カニの人[誰]の雑誌の記事のネタ」にして、マイミクさんのヘルプネタとして終わる予定だったのですが、公開してみます。

一応、ブログのリニューアルも考えていて、新しいハックのルールにしています。もっとも、作業の方はまったくすすんでいませんが（笑）。

ハックの適用順位とか

FirefoxとSafariには、まったくCSSハックを使用しません。できるだけ最小限のCSSコードを実装します。

Safariでバグとか出た場合（ほとんどない気がするけど）「html:first-child」で上書きします。ただし、これだとOperaにて適用されちゃうので、Operaに「*+html:first-child」で上書きします。

つぎに、internet explorer 7 という「得体の知れないバグが残っている」ブラウザに「*:first-child+html」のハックで上書きします。

いつ「棺桶」に入るか Machintosh Version の internet explorerには、「* html>body」で上書きします。

"@media all" coverd hack

でもって本題です。でもって、Internet Explorer 5 and 6 にどんなハックを適用するのでしょうか。
「* html」のハックを使う訳ですが、Machintosh Version にも適用されてしまいます。そこで、「@media all {}」で包んでしまいます。「@media all {}」は、Machintosh Version には適用されません。個人的には「餃子ハック」というコードネームをつけています[違]。

余談ですが、internet explorer 5/6 に「float」と「margin」を同時に適用するのはほんと〜に危険ですね。今日は、見たことの無いバグに遭遇して泣いていました（笑）

internet explorer 5/6 をはじくには

@importの記述法を工夫して「@import url(styles.css) all;」を記述すれば、みごとに読んでくれません。Machintosh Version には、「餃子ハック」「@media all {}」でくくれば、いいだけのことです。他の手法は「Hide CSS from browsers」とか検索すればでてきますので、自分で研究してみてください。

おまけネタ

internet explorer 7 を導入すると、internet explorer 6 がアンインストールできるのですが、internet explorer 6 が実は、windowsフォルダの中に、一目で分かるようなフォルダ名で隠れています（笑）。

ブラウザの墓場たち

Tue, 19 Sep 2006 00:38:07 +0900

個人的な事情（転職準備などもろもろ[謎]）で、あまり更新していない状態でしたが（ほかにも秘密の計画[謎]もあり）、ぼちぼち更新していこうと思います。

今回のネタは、「ブラウザの墓場」についてです。
この業界にいると、たまにブラウザの古いバージョンが必要になるときがあります。特に、Netscape 4.x などという、たまにチェック案件に入ってくる「窓から投げ捨てたい」古いブラウザが入ってくるときがあります。えてして、そんなときに限って「どこからダウンロードするのだろうか」というものなので、メモしておきます。

evolt.org - Browser Archive: 有名な「ブラウザの墓場」です。よくもしらべられるな〜、と思うくらいのブラウザが眠っています。Windows版 Internet Explorer のスタンドアローンバージョンもここから。
Opera archives: Operaの墓場。
Netscape Browser Archive - SillyDog701: 別名「Netscapeの墓場（勝手に命名）」。「Netscape 0.91」なんてあるよ（笑）
Communicator Download Page: Netscape 4.7 のダウンロードページ。

IE7のCSSバグとOpera CSS Hack

Sun, 20 Aug 2006 00:35:25 +0900

少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。
IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。

検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。
また、W3C CSS validator でValidなもののみに限定しています。

Internet Explorer 7のハック

「*+html hack」（*+html bodyのハック）は、じつはOpera 8.0 以降にも適用されてしまう。実はEasy CSS hacks for IE7 - Nano See, Nano Doのコメントでも書かれています。

Opera 8 以降のハック

「*+html hack」（*+html bodyのハック）がOperaに適用され、「html>/**/body hack」（html>/**/bodyのハック）がinternet Explorer 7以外のモダンブラウザに適用されてしまうということは、Opera 8.0 以降に使えるハックができるじゃん、と思って実験してみました。
「*+html>/**/body」のあとにセレクタを指定すると、Opera 8.0 以降にのみ適用されます。

現状のInternet Explorer 7のハックの書き方

「*+html hack」（*+html bodyのハック）をまず、現状のInternet Explorer 7に適用し、そのあとに「*+html>/**/body」でOpera向けの指定を上書きします。

ついでに、Machintosh Internet Explorer hackも

「* html body」のハックと「html>body」のハックを組み合わせてみました。
「* html>body」と記述すると、Machintosh Internet Explorer 5.x だけに適用されます。
なぜなら、「* html body」「html>body」の2つを同時に適用できるのは、Machintosh Internet Explorer 5.x だけだからです。

ついでに、SafariとOperaに適用されるハックも

「html:first-child」なんて書いてみたら、SafariとOperaに適用されてしまいました。いちおう、W3C CSS validator では、validでした。
では、またOperaのハックに応用してみましょう。「*+html:first-child」とすると、Operaだけに適用されます。

コンテンツエリアの2段組レイアウトパターンについて考える

Tue, 25 Jul 2006 15:21:43 +0900

現在のXHTML+CSSで、コンテンツエリアのレイアウトパターンについて考えてみました。
そのついでに、おもしろい(!?)テクニックを偶然発見してしまったので書いてみました（むしろそっちが本題かも!?）。

コンテンツエリアのレイアウトパターン

コンテンツエリア（たとえば、本文など）のデザインは、普通は1段組が基本で、たまに2段組とかが出てきます。3段組とか、それ以上はそれほどありません。商品紹介などで使うくらいではないでしょうか。
ほとんどの場合は、1段組のレイアウトパターンを基本として考えていけばいいかと思います。そして2段組のレイアウトパターンをテンプレートとして用意しておけばいいのではないでしょうか。

2段組のレイアウトパターンを考えてみる

2段組の構成を行う場合、どういう使い方をするのか考えてみました。

ほとんどの場合で、画像を片側に寄せて、余った領域に本文を入れていく」パターンがほとんどでないでしょうか。また、画像の領域より本文の領域が大きい場合、画像の下に本文を回り込ませていくか、回り込ませていかないかのではないでしょうか。

分類すると、大体以下の4つに分けられると思います。

コンテンツエリアにおける、2段組のレイアウトパターンの一例

画像が左側、本文が右側で画像の下に本文を回り込ませていく
画像が左側、本文が右側で画像の下に本文を回り込ませていかない
画像が右側、本文が左側で画像の下に本文を回り込ませていく
画像が右側、本文が左側で画像の下に本文を回り込ませていかない

2段組のレイアウトパターンにおける問題

画像を左側に寄せると、現在のCSSの規格では、floatを使って片側に寄せていく方法しかありません。
floatを使うと、関連する要素には当然のように幅を指定しなければいけません。大枠は共通化できても、幅だけは、要素の大きさごとに指定しなければいけません。それをやりだすと、幅を指定するためのclass属性を用意していかなければいけません。

classを指定すると、それだけXHTMLのソースコードと、class属性の管理が煩雑になってきます。

そこで、上記の4パターンのみで2段組のレイアウトパターンを管理する方法を考えてみました。基本的には、片側固定幅、片側可変幅のレイアウトを想定しています。

複数の幅の2段組を1つのクラスで実現する #1

幅を指定しないで2段組をfloatを指定した上で実現する方法を考えてみました。

まず、「画像の下に本文を本文を回り込ませていく」パターンを考えて見ます。
これを実現するには、画像の親要素に、floatを指定して、必要な余白をpaddingで指定します。そして、回りこませる部分を続けて記述していきます。これで「画像の下に本文を回り込ませていく」パターンを実現できます。CSSハックも使わず、いい感じにできます。

「画像の下に本文を本文を回り込ませていく」ためのサンプル

複数の幅の2段組を1つのクラスで実現する #2

次に、「画像の下に本文を本文を回り込ませていかない」パターンを実現してみたいと思います。これはトリッキーな技を使っていたりします。

今までの方法だと、このような手法を実現するときは、何らかの形で幅を指定する方法しかありませんでした。

今回、紹介するのは、「画像の下に本文を本文を回り込ませていかない」パターンを1つのクラスのみで実現する方法です。具体的手法は、floatを指定していないdiv要素に「overflow:auto」を指定するだけです。これだけで、「画像の下に本文を本文を回り込ませていかない」パターンを1つのクラスのみで実現できます。嘘みたいですが本当です。

「画像の下に本文を本文を回り込ませていかない」ためのサンプル

問題点

このままで使えるのですが、いくつか問題点がありますので紹介します。

まず、Windows Internet Explorer 6 で問題が出ます。一部の表示が少しずれます。そのために、本文の部分をdiv要素で囲んで、「display:inline-block」を指定します。「display:inline-block」は、CSS 3 の要素なので厳密にいうと文法エラーですが、Windows Internet Explorer 6 で表示がおかしいときに役立つ時が多いので覚えていたほうがいいでしょう。ついでに、CSS 2.1 でも問題ない方法も用意しました。

つぎに、Machintosh Internet Explorer 5.x でレイアウトが反映されません。Machintosh Internet Explorer 5.x では、floatを指定した要素に幅も指定しないとうまく反映されないようです。それどころか、下手をすると閲覧できない状態になります。これは、やりだすとすごく面倒なので対応しません。Machintosh Internet Explorer 5.x にはこのスタイルを適用しないようにしてください。

CSSのギャラリーサイト

Fri, 14 Jul 2006 15:42:09 +0900

いろいろな事情[謎]で、CSSのギャラリーサイトを調べてみました。

XHTML+CSSでの効率的な制作をおこなう上でのポイント Part5

Wed, 21 Jun 2006 22:50:00 +0900

XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントをいくつか考えてみました。

予告しなかった第5回目です。今回は残りの部分を一気に行きたいと思います。すごく長くなるのでお覚悟を。

Web標準に準拠したブラウザを基準に制作する

よく、Internet Explorer 5 or 6を基準にして作成してFirefoxやOperaやSafariでレイアウトが崩れるという話を聞きます。しかし、制作思想が根本的に間違えています。Internet Explorer 7が（いや、Microsoftが）、批判はともあれ、（曲がりなりとも）Web標準に準拠していく事をふまえている以上、必然的にWeb標準に準拠したブラウザを基準に制作していく事が基本となってきます。

クライアント視点で見れば、Internet Explorer 5 or 6（のユーザー）は大切なお客様かもしれませんが、Web標準準拠、XHTMLおよびCSSのサポートではInternet Explorer 5 or 6は明らかに劣っています。

したがって、まずFirefox、Safariといったブラウザを中心に検証し、そのあとにInternet Explorer 5 or 6でレイアウトが崩れる部分はCSSハックなどでフォローすべきかと思います。

ディレクションが今まで以上に重要になってくる

XHTML+CSSでの制作では、設計段階が非常に重要になります。しっかりと仕様などをつめておかないと、途中の段階における仕様等の修正は意外と面倒です。また、そのようなことは基本的に避けなければなりません。途中で仕様変更になった場合、工数がよけいにかかります。よほどしっかりとしないと「実質作り直しと変わりません」とか、「やむをえず後付でごまかしたためにあとでメンテナンスが大変です」ということになってしまいます。そうしたら面倒です。

作り直しに近い状態やごまかしてメンテナンスの工数がかかるのは、これはディレクション側のミスといえるでしょう。また、特に作り直しに近くなった場合、制作担当者のモチベーションなどにも影響します。

そんなこんなで、どんなに細かいことでもしっかりと必要事項はつめておく必要があると思います。一般的な仕様だけではなく、更新のときどうするか、ソースの寿命はどれくらい必要か、などといった細かい点も含まれます。

スタイルシートの書き方は、人によってバラバラで、他人のソースをスキルの高い人が見てもなかなかわからないのが多いのが現状です。CSSのスキルが高い人ばかりいるとは限りません。

CSSを設定する人は1人に絞る

ある案件で、複数人でCSSの指定をおこなったことがありました。当然、現場は大混乱。同じ役割のスタイルがいくつもサイト内にできてしまいました。これではメンテナンスは大変ですね。CSSを設定する人は1人に絞るようにしましょう。

CSSのスキルが高い人が1人いるだけでまったく違う

XHTML+CSSでの制作は、製作者のスキルのレベルの差が現状では「大変大きい」と言わざるをえません。そして、CSSのスキルが高い人が1人いるだけでまったく違うものになってきます。

某社での勤務時に他人の作ったサイトがInternet Explorer 7でレイアウトが崩れるのだけど、原因がわからないので何とかしてくれ、といわれたことがありました。ソースとスタイルシートをチェックすることで原因解決しましたけど、スキルの高い人が1人いるだけでスタイルシートが原因で発生する問題はある程度は防ぐことができる可能性は高くなります。それでも、他人のソースはわからないものですが。

今回はここまでにします。ほかにもいろいろな効率化の方法があるかと思います。XHTML+CSSでの制作に慣れていない人は、最初はXHTML+CSSでの制作のポイントがわかりにくいかもしれませんが、わかってくるときっと効率化ができると思います。

「できます」というのは道途上

XHTML+CSSでの制作ができる「だけ」の人なら、それなりにいると思います。
それでも現状では、いろいろと話を聞く限り、制作会社などが（世間一般の人が思っている）「XHTML+CSSでの制作ができる」レベルの人を探すのも難しいそうです。
現実的に「テーブルレイアウトからの脱却」ができないのはXHTML+CSSでの制作ができる「だけ」の人すら足りないからです。
現実的には、「人を確保して、逃げられないようにする」のも大変ではないのでしょうか。

では、なぜ「できます」というのは道途上なのでしょうか?
答えは、「効率化」というキーワードにあります。XHTML+CSSでの制作とは、XHTMLというマークアップ言語で文書構造「だけ」を定義して（現実的には、スタイルを指定するためのdiv要素等を加える必要がありますが）、「見た目はスタイルシートで定義する」ことになります。

つまり、その気になれば「基本のソースをしっかり作っておけば、あとは案件に応じて中身を変更していくだけ」ということが可能になります。ソースの使いまわしができるというのは、テーブルレイアウトにはない大きい利点になります。大規模サイトになればなるほど、その利点は大きいものになるといえるでしょう。

CSSでのレイアウトパターンは実はそれほど多くない

Webサイトにおけるレイアウトパターンは、Flashを使ったりするサイトなどでなければ意外と多くありません。よほどデザインにこだわったサイトでなければ、コンテンツのパターンはある程度決まってきます。サイトごとに見た目と文章がちがうだけで、コンテンツ構成要素の骨組みのパターンはあまりありません。
例えば、ナビゲーションはほとんどリスト（ul,ol要素）で、たまに定義リスト（dl要素）で使う場合があるくらいです。そして、入れ子の要素も勘案しても10パターンも行かないと思います。

ワイヤーフレームは日頃からストックしておく

ワイヤーフレームを日頃からストックしておく事で案件制作時での制作時間が大幅に短縮できます。事前にワイヤーフレームを作成しておくのはものすごく大変です。しかし、一度作ればあとあとまで使い回しができる利点はメンテナンスなどを考えると大きいと思います。また、スタイルシートのサポートがブラウザで違う以上、しっかりと「各ブラウザチェック済み」のワイヤーフレームをしっかりと制作しておけば、長期的な制作時間の短縮にもつながるのではないでしょう。

制作後に反省点をしっかりと見直す

XHTML+CSSでの制作でも、「書かなければ覚えません」のは当たり前ですが。
意外とサイト制作後に反省点というものは出てくるものです。「基本のソース（レイアウトパターン）」をもっているのならば、バージョンアップさせるのもいいでしょう。

さいごに

これで、話は終わりになります。もともとは、案件をいくつかこなしていくうちに得られた反省点やノウハウ、他人に教えていくべき点などを記録に残さないと忘れてしまうので備忘録として書いていたのですが、書いていくうちにすごく長くなってしまいました。みなさんのお役に立てたら幸いです。