そこで、編集作業を軽減するために、VicunaのXHTML構造と同じHTMLファイルを用意しました。このファイルを使い、ローカルでスキンの編集と表示の確認をした後、完成したCSSファイル一式をサーバーニアップロードすることでローカルでの表示と実際にVicunaを使って運営されているブログが同じように表示されます。

私がVicunaのスキンを製作するときはこのファイルを利用しています。

Comments: 0
TrackBacks: 0

clearfixはちゃんと考えられていた

Posted by: wu
May 26, 2007 11:42 AM
XHTML CSS

clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。

こんにちは。僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。

モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで同じ結果になったほうが喜ばしいので、ややモダンではないモダンブラウザを考えるとどうしても冗長になってしまいますね。

ああ、むくわれた。全ては上のコメントの通りです。

Comments: 22
TrackBacks: 0

CSSコンテスト

Posted by: wu
April 12, 2007 11:01 PM
XHTML CSS

当サイトを購読している方ならきっとご存知かと思われますが、現在、CSSに関するコンテストが2つ開催されております。

Comments: 3
TrackBacks: 0

CSSの記述テクニック階層宣言コーディング

Posted by: wu
April 1, 2007 2:42 PM
XHTML CSS

2007-04-02追記

この記事は2007年4月1日にエイプリールフールネタとして書かれたものであり、紹介しているCSSの宣言ブロック内にセレクタを記述する方法は不正な書式であり無効です。

検索・他の記事から訪れた人は勘違いしないように注意してください。

CSSの記述はセレクタを並列に定義していくので、視覚的に構造を表すことができません。ここで定義グループごとにファイルを分割して管理したりする方法が有効になるのですが、これもXHTML文書の構造を頭にいれておかなければならないし、文書とビジュアルの結びつきをきちんと設計しなければ分割する意味がなくなってしまいます。

今日は、これらの弱点を埋める「階層宣言コーディング」という記述方法を紹介します。

Comments: 20
TrackBacks: 0

ブログのレイアウト　あなたの好みは？

Posted by: wu
March 28, 2007 8:35 AM
XHTML CSS

WEBサイトを製作する際には、サイトの情報量からレイアウトをまず先に考えることは多いと思いますが、大きなくくりとして2カラムか3カラムか、また、固定幅か可変幅かを決めなければなりません。企業系サイトでは不思議と2カラム固定幅が多い気がするのですが、固定ならば何ピクセルの固定にするか考えることになります。800px以下か、それ以上か。あー大変。

Comments: 4
TrackBacks: 0

MTで実践 - CSSのモジュール化による管理方法と遊び方

Posted by: wu
March 16, 2007 11:48 AM
Movable Type | XHTML CSS

Vicuna

1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。

Comments: 12
TrackBacks: 0

XHTML CSSの書籍を執筆しました

Posted by: wu
February 20, 2007 11:00 PM
XHTML CSS

(Amazonから買えるようになったもようです)

九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。

本書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります)

XHTML, CSSの基礎知識と管理方法
レイアウト編
Tips&Tecnique

Comments: 30
TrackBacks: 0

CSSのコメントの書き方コレアレ

Posted by: wu
December 2, 2006 4:25 PM
XHTML CSS

CSSもHTMLと同じように、ソース中にコメントを挿入することができます。

/*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。

適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。

僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。

Comments: 3
TrackBacks: 0

HatenaをXHTML+CSSで組みなおす

Posted by: wu
May 24, 2006 10:59 PM
XHTML CSS

授業中、生徒は課題制作で忙しく僕は用無し。ってことで、○○○をXHTML+CSSで組みなおすシリーズ(?)第二段を勝手にこっそり作ってた。

なるべく皆が知ってるサイトで、コーディングが楽しそうなサイトを探してたのだけど、なかなか決まらず、結局、生徒のリクエストでhatenaのトップページを組みなおす事にしました。

Comments: 24
TrackBacks: 1

[改]mixiをXHTML+CSSで組みなおす

Posted by: wu
May 24, 2006 1:42 AM
XHTML CSS

mixiをXHTML+CSSで組みなおすで取り上げた生徒の提出した課題には、記事にも書いたとおり、まだいくつか改善できる点がありました。が、色々修正+αしたようで、再提出してもらいました。

前回提出したものと比べると、XHTMLが部分的に修正され、classの数が減っている。オーイェス。機能ごとにclassを与えて共通するスタイルをまとめることで、管理も編集も楽チンにする事が出来るんだ。

Comments: 4
TrackBacks: 0

mixiをXHTML+CSSで組みなおす

Posted by: wu
May 16, 2006 5:29 AM
XHTML CSS

授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。

Comments: 5
TrackBacks: 0

デフォルトスタイルの差異を無くすCSS

Posted by: wu
April 9, 2006 7:47 AM
XHTML CSS

2007-01-30更新

Yahoo UI Fonts CSS使用時の各要素のフォントサイズを変更する際の注意点を追加しました。

defalut.cssちょっとだけ修正

2007-01-18 更新

記事の内容も古くなり、Yahoo Libraryなどがでて更に差異を減らすことが簡単になったことから、これを利用し、スタイルも簡潔にシンプルに記述しなおしましました。前よりも使いやすくなったはずです。前回配布していたものとの変更点は次のようになります。

定義グループにアウトライン番号を記述
ベーススタイルのデザインをシンプルに記述し直し
使用していたカラーを一部を除いてモノトーンに変更
Yahoo Library Fonts CSSを組み込み、各ブラウザで文字サイズが同一になるように修正
プロパティ記述順序をhail2u.net「CSS2 Specificationでのプロパティの出現順序」に沿うように変更

各UA(ブラウザー)は、それぞれ微妙に違ったデフォルトスタイルシートを持っている為、この差異が原因で「こっちは揃っているけど、あっちのブラウザーでは、なんかずれてる」なんて事がよく起こります。

なので、まず最初にUAのデフォルトスタイルシートの各エレメントの見栄えを制作者のスタイルシートで再定義して上書きし、各UAの表示のデコボコを出来るだけ埋めてからCSSデザインし始めるというやり方が楽チンだ。

僕はいつも、「デコボコ埋め+自分好みの大まかなスタイル」を定義して纏めたdefault.cssを用意して、必ず最初にそれを読み込ませてからレイアウトなどを組み、デザインに合わせてdefault.cssの各エレメントのスタイルを調整しながら作っている。CSSコーディングのみの仕事とかも増えてきた事だし、面倒だけどもう一度綺麗にピシ！っと定義し直したdefault.cssを作った。

このファイルを元に、既に記述されている各要素の宣言を調整し、自分好みのベーススタイルを作ってください。

Comments: 11
TrackBacks: 6

テンプレスキンエとセとラ

Posted by: wu
March 26, 2006 1:28 PM
XHTML CSS

MAQUEテンプレートのサイトがBazookaのデザインの流用だったので、がんばって作って先ほどリニューアル・完了。スッ…！んでそのデザインをCosmoと名づけてNew Skin・完成。スッ…! 　(ﾖッ仕事人っ！)

Comments: 2
TrackBacks: 0

メニューのXHTML ３パターン

Posted by: wu
March 22, 2006 11:12 PM
Movable Type | XHTML CSS

この記事はMAQUE Movable Type テンプレートのカスタマイズTipsとして書いた記事ですが、Movable Typeに共通する内容なのでBazookaでエントリーを投稿する事にしました。

Movable Typeは、Menu部分の構成をテンプレートから自由にカスタマイズ出来るのですが、XHTMLの仕様に沿っていて、無駄なく、尚且つカスタマイズしやすい構成となると、ここで紹介するようなパターンに絞られてきます。

紹介するMovable TypeのMenu部分のソースは、

XHTML Strict DTDに準拠している
無駄な要素を作らない
CSSによるデザインの柔軟性が高い
CSSで、2カラム、3カラムのレイアウトが出来る

という条件で構成しました。

Comments: 1
TrackBacks: 0

エントリーを(X)HTMLで書こうぜ

Posted by: wu
March 22, 2006 6:25 PM
Movable Type | XHTML CSS

Movable Typeに限らず、ほとんどのBlogツールでは、記事本文を(X)HTMLで書くことができますが、HTML覚えるのが面倒で改行自動変換にお任せしている人も多いと思います。でも、実際記事本文に使われるタグの種類なんて5個覚えれば十分なんですね。10個覚えたらお釣りが来る(本当はこない)。

Comments: 0
TrackBacks: 0

MTテンプレート

Posted by: wu
February 2, 2006 3:10 AM
Movable Type | XHTML CSS

Movable Typeのテンプレートがそろそろ出来上がりました。

Movable Type テンプレート MAQUE

Comments: 28
TrackBacks: 0

Elements

Posted by: wu
December 9, 2005 2:56 PM
XHTML CSS

Ohh... Alphabet tte iiyonaa... Ippai kirei na Font arusi. tiisakutemo yomiyasuisi. zukkoi Death... MS gothic ha mou akitayo. motto Design sasero-!!!

a.. souieba Windows Vista de New Font demasune. Meiryo toka iuyatu. Flash8 demo tukawareteru New Anti-alias technology ClearTypewo zentei to site tukurareta Font datte. miyasui hazudawa

Comments: 5
TrackBacks: 0

Blogサイトで見かける変なHTML

Posted by: wu
October 22, 2005 3:56 PM
Movable Type | XHTML CSS

というキャッチーな見出しを付けてみたけれど、(X)HTML(以下HTML)なんてのは自由に書いて、伝えたい人たちに思っている事が伝わるならば、それでいーんです。と、最初に言っておくよ。

自分の作ったWEBページのメンテナンス性を上げたいと考える人や、ソースコードを簡潔にしてダイエットしたいと思う人も中にはいるでしょう。複雑なBlogツールのテンプレートソースに四苦八苦してる人、単にW3Cの仕様に準拠させたページを作りたいと思ってる人も多いかもしれない(それは素晴らしいことだよ！)。

コンテンツの利用価値を高めたいと思っている人達、そういった方へ向けて、僕がよく見かける「もっといい方法があるよ」と思えるHTMLの記述を、代替ソースとセットで書いていきます。

Comments: 16
TrackBacks: 0

DIV要素で構造を補強

Posted by: wu
September 27, 2005 1:26 AM
Movable Type | XHTML CSS

DIV要素を使った構造の補強について。

Comments: 20
TrackBacks: 1

チカチカ枠線

Posted by: wu
August 25, 2005 10:03 PM
XHTML CSS

IMG画像とかの周りがPhotoshopのあれみたいな効果にするスタイル。

タイでは犬は皆寝転がっているんです

Comments: 8
TrackBacks: 0

DT DDを横並び

Posted by: wu
August 24, 2005 9:48 AM
XHTML CSS

DL,DT,DDを横並びで表示するスタイル。

サンプル

CSS File

Comments: 15
TrackBacks: 0

CSS メニュー横並びボタン

Posted by: wu
August 24, 2005 9:20 AM
XHTML CSS

2007-01/20更新しました。

ソースコードを見直してボタン化の方法を変えました。基本CSSボタンメニューと同じ方法で、floatとfloatによるクリアの問題を解決するためのコードも含めました。これにより、コピペで問題なく使えるようになりました。

変更点は以下の通りです。

floatをクリアするコードも含めた。ページ下部にはMacIEに対応する場合の追加コードも記述
a要素にwidthを指定していたのを、親要素に変更。これにより、a要素には左右にpaddingが指定できるようになった。
HTML側でulとliのセットのみでボタン化できるようにした。
プロパティの記述順序を変更

ボタン横並びナビゲーションメニューのサンプル

サンプル表示

Comments: 4
TrackBacks: 0

CSS メニューボタン

Posted by: wu
August 24, 2005 8:45 AM
XHTML CSS

2007-01/20更新しました。

ソースコードを見直してボタン化の方法を変えました。CSSによる横並びメニューと同じ方法でボタン化しています。

変更点は以下の通りです。

a要素にwidthを指定していたのを、親要素に変更。これにより、a要素には自由にpaddingが指定できるようになった。
HTML側でulとliのセットのみでボタン化できるようにした。
プロパティの記述順序を変更

マウス反応範囲が横まで広がったメニューのスタイル。

サンプル表示

Comments: 5
TrackBacks: 0

JavaScript

Posted by: wu
July 29, 2005 11:08 PM
XHTML CSS

Bazookaほったらかして何をしてるかというと、ドーンとスキルアップを狙って、JavaScriptの参考書と関連サイトを読み漁っています。

Comments: 10
TrackBacks: 0

Bazooka調整

Posted by: wu
June 13, 2005 1:29 AM
Movable Type | XHTML CSS

BazookaのCSSリフレッシュに伴い、他にも色々と調整しました。

RSSリーダーを意識し、概要にはきちんと概要だけを詰めようかと思ってはいるものの、どうしても記事を全部書いてしまったり、概要になってないような文章を載っけたりですいません。

Comments: 5
TrackBacks: 0

全称セレクタ

Posted by: wu
June 10, 2005 8:38 PM
XHTML CSS

BazookaのCSSを全部書き換えた。ふとmakotoさんサイトであるhxxk.jpのCSSファイルを眺めてたら、思い立ってしまった、が吉日。凄い綺麗で見やすいし、

* {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

というように、全称セレクタを使ってブラウザデフォルトスタイルシートのmarginとpaddingの差異を上書きし、要素ごとに再定義っていうのをやってみたかった。

表面的には前と大差無い(はず)と思いますが、綺麗すっきり管理しやすくなった。今は大掃除した後、部屋の真ん中でお茶すすってる気分。

CSSファイルを書きながら、「装飾というのは構造を視覚的に明示してあげるものなんだなぁ」と、改めて思うのでした。

Comments: 7
TrackBacks: 1

がんばろうぜ WEBデザイナー

Posted by: wu
May 20, 2005 2:22 AM
XHTML CSS

これからWEBデザインを学びたい人は、一体何を見て勉強すればいいのかなぁ。

Comments: 19
TrackBacks: 1

WEBデザイナーとは

Posted by: wu
May 3, 2005 4:17 AM
XHTML CSS

IRCでの会話から

_Myu_: うーたんお話してー
^wu: お題を頂戴
_Myu_: そうだなぁ
_Myu_: うーたんの学校の事で
^wu: うん
^wu: 俺の学校のこと・・
_Myu_: 現在の授業内容と教えたい内容
_Myu_: これにしようぜ！

Comments: 7
TrackBacks: 1

Flash XHTML

Posted by: wu
June 1, 2004 9:06 PM
XHTML CSS

HTML-lint厨だった頃、FLASHのSWFを埋め込んだせいで大幅減点されるのが悲しく、JavaScriptで減点を回避したりとあがいてみたものです。最近では未来に期待を寄せつつ、現段階で口うるさいLINTに減点されても無視してました。が、どうやら正々堂々とSWFを埋め込める方法をb^3が調べに調べてエントリーにしてくれました。