Home > XHTML CSS Archive

XHTML CSS Archive

Zen-Codingで楽々コーディング! + コツ1つ

Posted by: wu
2010年2月23日 18:16
Web | XHTML CSS

話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。

Comments (Close): 7
TrackBacks: 1

HTML5 と CSS3 で死にたい

Posted by: wu
2009年8月14日 21:52
HTML5 | Web | XHTML CSS

Preview

CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。

Webkitのバージョンアップで音が同期されなくなっちゃったようです。表示も少しおかしい。動画を見てくださいね。

Comments (Close): 20
TrackBacks: 0

わーるど・わいど・うヱっヴ : 序

Posted by: wu
2009年8月 6日 04:51
HTML5 | Vicuna | Web | XHTML CSS

僕は以前、こんな妄想をしたことがあります。

ある時、宇宙人からメッセージが届いて、

「キミタチノコトヲ, シリタイ.
ヨッテ,ゲンダイノシンカカテイト,
シャカイコウゾウヲ,ワレワレニオシエヨ.
ナオ,ショシキハキミタチノ
ダイタスウガアツカエルコウゾウカゲンゴデ,
イイカンジニタノムヨ.
マ,スキニヤッテクレ.ピーガシャ」

Comments (Close): 5
TrackBacks: 0

CSSの実装状況で変わるボックスのデザイン方法

Posted by: wu
2009年8月 1日 12:59
HTML5 | Web | XHTML CSS

sample4

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。

いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。

しかしたまらん、流石に~~疲れた。~~飽きた

Comments (Close): 12
TrackBacks: 0

LimeChatのテーマ作成で遊ぶ、WebKitのCSS3

Posted by: wu
2009年8月 1日 02:08

iPhoneの購入と同時にWebKitを触り始めたのですが、CSS Level 2と3の一部の機能を、何の不安も無く使える製作過程に感動しました。ちょっと未来のテクニックを先取りして発見しちゃったような気分にもなりました。

(中略)

MacのLimeChatがWebKitを使っていて、CSSで自由にテーマを編集できることを思い出し、ひとつ実験的なものを作ってみました。:after, :beforeプロパティから、WebKitが独自に先攻実装しているCSS3のAnimation、Transition, Transformプロパティ、IE6がくたばれば使える透過PNGを使ったエフェクト、新たな色の値のRGBAプロパティバリューなど、CSSの記述も今まで馴染みの無い不思議な感じになってたりするので、興味のある方はテーマを使ってみて下さい。

Comments (Close): 2
TrackBacks: 0

HTML たん。

Posted by: wu
2008年4月22日 07:08
XHTML CSS

生徒の作品がおもしろかったので、作者のとみじさんの許可をもらってキャラクターの絵と設定の文章だけ載せさせてもらいました。

Comments (Close): 8
TrackBacks: 0

スキンカスタマイズの手引き

Posted by: wu
2008年4月16日 05:45
Vicuna | XHTML CSS

Vicuna CMS で用意してあるスキンの利用方法を解説します。

Comments (Close): 2
TrackBacks: 0

Vicuna カスタマイズサイト Part2

Posted by: wu
2008年1月29日 00:11
Movable Type | Vicuna | XHTML CSS

Vicuna CMS ををカスタマイズして使用しているユーザーの中から「!?」となったものをピックアップ

Vicuna カスタマイズサイト Part1

Comments (Close): 2
TrackBacks: 0

サブスキン CSS

Posted by: wu
2008年1月 6日 15:53
Vicuna | XHTML CSS

追記: 2008.01-07. Mono Crystal サブスキンも追加しました。スキンページからダウンロードできます。

以前のエントリーで CSS スキンの構成について解説しましたが、そこでスキンの色彩定義等をまとめたサブスキンというものを作ったと書きました。今回、Ninja スキンをベースに、イメージを大きく変える Boomer というサブスキンを作ったので紹介します。

Ninja スキンはデフォルトではモノクロのやや暗い感じの配色なのですが、サブスキンの入れ替えでイメージを変えやすいように作ってあり、サブスキン第一弾として、Ninja スキン用の Boomer サブスキンを配付しました。

Comments (Close): 6
TrackBacks: 0

floatプロパティのテスト

Posted by: wu
2007年11月14日 15:30
XHTML CSS

本日学校で実施したfloatプロパティのミニテスト。1問10点。

Comments (Close): 7
TrackBacks: 0

Vicuna カスタマイズサイト Part1

Posted by: wu
2007年11月14日 14:41
Movable Type | Vicuna | XHTML CSS

Vicuna CMS ををカスタマイズして使用しているユーザーの中から「!?」となったものをピックアップ

Comments (Close): 3
TrackBacks: 0

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

Posted by: wu
2007年5月26日 11:42
XHTML CSS

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

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

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

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

Comments (Close): 23
TrackBacks: 0

CSSコンテスト

Posted by: wu
2007年4月12日 23:01
XHTML CSS

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

Comments (Close): 3
TrackBacks: 0

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

Posted by: wu
2007年4月 1日 14:42
XHTML CSS

2007-04-02追記

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

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

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

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

Comments (Close): 24
TrackBacks: 0

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

Posted by: wu
2007年3月28日 08:35
XHTML CSS

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

Comments (Close): 4
TrackBacks: 0

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

Posted by: wu
2007年3月16日 11:48
Movable Type | XHTML CSS

Vicuna

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

Comments (Close): 12
TrackBacks: 0

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

Posted by: wu
2007年2月20日 23:00
XHTML CSS

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

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

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

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

Comments (Close): 31
TrackBacks: 0

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

Posted by: wu
2006年12月 2日 16:25
XHTML CSS

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

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

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

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

Comments (Close): 9
TrackBacks: 0

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

Posted by: wu
2006年5月24日 01:42
XHTML CSS

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

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

Comments (Close): 4
TrackBacks: 0

mixiをXHTML+CSSで組みなおす

Posted by: wu
2006年5月16日 05:29
XHTML CSS

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

Comments (Close): 5
TrackBacks: 0

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

Posted by: wu
2006年4月 9日 07:47
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 (Close): 11
TrackBacks: 6

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

Posted by: wu
2006年3月26日 13:28
XHTML CSS

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

Comments (Close): 2
TrackBacks: 0

メニューのXHTML ３パターン

Posted by: wu
2006年3月22日 23:12
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 (Close): 1
TrackBacks: 0

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

Posted by: wu
2006年3月22日 18:25
Movable Type | XHTML CSS

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

Comments (Close): 0
TrackBacks: 0

MTテンプレート

Posted by: wu
2006年2月 2日 03:10
Movable Type | XHTML CSS

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

Movable Type テンプレート MAQUE

Comments (Close): 28
TrackBacks: 0

Elements

Posted by: wu
2005年12月 9日 14:56
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 (Close): 5
TrackBacks: 0

DIV要素で構造を補強

Posted by: wu
2005年9月27日 01:26
Movable Type | XHTML CSS

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

Comments (Close): 21
TrackBacks: 1

チカチカ枠線

Posted by: wu
2005年8月25日 22:03
XHTML CSS

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

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

Comments (Close): 8
TrackBacks: 0

DT DDを横並び

Posted by: wu
2005年8月24日 09:48
XHTML CSS

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

サンプル

CSS File

Comments (Close): 15
TrackBacks: 0

CSS メニュー横並びボタン

Posted by: wu
2005年8月24日 09:20
XHTML CSS

2009-02/26更新しました。

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

サンプル表示

Comments (Close): 12
TrackBacks: 0

CSS メニューボタン

Posted by: wu
2005年8月24日 08:45
XHTML CSS

2009-02/26更新しました。

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

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

サンプル表示

Comments (Close): 6
TrackBacks: 0

全称セレクタ

Posted by: wu
2005年6月10日 20:38
XHTML CSS

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

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

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

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

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

Comments (Close): 7
TrackBacks: 1

Flash XHTML

Posted by: wu
2004年6月 1日 21:06
XHTML CSS

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