XHTML CSS Archive

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

Continue reading

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

Continue reading

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

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

Continue reading

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

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

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

Continue reading

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

(中略)

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

Continue reading

出版社の破産宣告により絶版となってしまった「実践 Web Standards Design」ですが、半月ほど前から Amazon での売り上げランキングが急激に落ち始め、とうとう在庫も切れたようで、中古本が 高値で売られている ようです。欲しいけど買えないというメールもいくつか届いているので、なかなか複雑な気分です。デッドモノってやつですかこれは。

さすがにこんな値段で購入する方はいないと思いますが、11月頃には別の出版社から再出版される予定でおりますので、それまでしばらくお待ちくださるようお願いします。

現在、それに向けて校正ゲラを見ながら修正・加筆をしている段階です。

著作権や印税のことで突然弁護士事務所からお手紙や電話がきてびびったり、書いたことも見たこともない文書の署名に戸惑ったりとありましたが、なんとかまた世の中に送り届ける事ができそうなのでとても嬉しいです。

ヤッ ＼(⌒∇⌒(⌒∇⌒(⌒∇⌒)⌒∇⌒)⌒∇⌒)／タァ

今日で夏休みも終わって明日から学校だけど、「せんせー教科書なくしちゃいました＾＾；」という生徒がいたら、Amazon のアカウントネームチェックして、それらしい人がいたら僕が中古を購入して生徒の指紋と書籍についた指紋を照合して、ついでにうちの犬に嗅がせて、吠えるかどうか試して、もし吠えたらデコピンです！！！。教科書は間違っても売らないように。(ノ◇≦。)

• 実践 Web Standards Design の再刊行のお知らせ

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

Continue reading

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

Continue reading

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

• Vicuna カスタマイズサイト Part1

Continue reading

前回のエントリー (HTMLは道具) に対して間接的なものも含めてたくさんのフィードバックを頂きました。　学校でも、生徒たちとこの記事の内容について話すことができました。わーい。

さっき、Riszw の おりんさんから、以下の記事を教えていただきました。

• 何のためのHTML?　- The Web KANZAKI

Continue reading

ねむたいから短くいきます！

Continue reading

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

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

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

Continue reading

2007.12-30

Ninja Style 完成。(年内に間に合った!)

問題の修正とか、アイコンがついたりいろいろ変わっているので、新しいものを使ってください。

• 表示確認
• Download: Ninja Style

2007.12-27

当初配布していた暫定版のNinjaスキンに１箇所すんごい不具合がありました。

ボックスの高さを揃えるテクニックには、落とし穴があったようです。その不具合の表示と、原因を記事末尾に追記しましたので参照してください。

このテクニックを利用する際は皆様も注意してください。解決方法も模索しています。

僕が考える理想のCSSスキンとは、以下の条件を満たすものです。

1. ユーザーが好みの形に変えやすい
2. CSSに詳しくなくても1.が可能
3. 適当に編集してもレイアウトが崩れにくい
4. 少しの調整でイメージを大きく変えられる
5. ユーザーのカスタマイズ意欲を掻き立てる

現在のVicunaのスキンはどうかというと、1.2.3 はモジュールによってある程度クリア出来ていると思うけど、色の調整などは膨大なCSSファイルから特定の部分を探さなくてはいけなく、細かな調整という点ではクリアできていません。

Continue reading

年内にあとひとつVicunaのスキンを作るとを目標にしていたので、 今、新しいたたき台用のスキンを作っています。

プロトタイプ系のスキンを作っているときには、「ユーザーはきっとこうしたいと思うだろう」と考えながら作っていて、僕はその頭の中に沸いてくる何人もの仮想ユーザーと会話しながら、安全なCSSの書き方を考え、ときには脳内裁判を開きます。

Continue reading

重要な部分を抜き出せ!! 100点満点

下から読むと高得点!!

Continue reading

あまりに多いので書くのも気が引けるのだけど、body要素直下のすべての内容をdiv要素で何重にも囲ってるサイトが増えてきてますね。これ変だと思うんです。

Continue reading

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

Continue reading

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

Continue reading

タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。

Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。

表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。

Continue reading

閲覧者の好みに合わせ、Vicunaの文字サイズをボタンスイッチによって切り替えられるようにするスクリプトを 10coin.comのmarbleさんが作成・公開してくださいました。

Continue reading

ひとつのスキンは、機能・役割ごとに独立したCSSファイルが複数組み合わさって構成されています。各CSSファイルがどのような役割をもち、スキンの一部として組み込まれているかを理解することで、既存スキンの編集が簡単になります。

ここでは、Vicunaで配布しているスキンについて、

• 全体の構成
• コアファイルの役割
• 記述ルール
• 分割方法の特徴

に分けて解説します。

Continue reading

Vicunaで配布しているスキンをカスタマイズする場合には、ローカルでスキンCSSを編集したあとにサーバーにアップロードし、実際のブログの表示を確認するという方法になりますが、大幅に変更したい場合などは編集のたびにこの作業をしなくてはならず、とっても面倒くさいです。

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

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

Continue reading

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

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

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

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

Continue reading

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

Continue reading

2007-04-02追記

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

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

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

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

Continue reading

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

Continue reading

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

Continue reading

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

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

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

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

Continue reading

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

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

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

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

Continue reading

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

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

Continue reading

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

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

Continue reading

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

Continue reading

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を作った。

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

Continue reading

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

Continue reading

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

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

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

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

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

Continue reading

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

Continue reading

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

• Movable Type テンプレート MAQUE

Continue reading

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

Continue reading

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

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

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

Continue reading

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

Continue reading

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

Continue reading

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

• サンプル

• CSS File

Continue reading

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

• サンプル表示

Continue reading

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

• サンプル表示

Continue reading

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

Continue reading

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

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

Continue reading

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

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

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

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

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

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

Continue reading

IRCでの会話から

_Myu_

うーたんお話してー

^wu

お題を頂戴

_Myu_

そうだなぁ

_Myu_

うーたんの学校の事で

^wu

うん

^wu

俺の学校のこと・・

_Myu_

現在の授業内容と教えたい内容

_Myu_

これにしようぜ！

Continue reading

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

• SG::Acme/ FlashをStrict XHTMLで。

ごちゃごちゃしていたFlash埋め込みソースが何ともシンプルになってる。Mac IE5もSafariもクリアーしてました。NN4は駄目かもしれない。

テンプレートによってエントリーのタイトルの見出しを上下させる場合、エントリー記事内に見出しを含めると、そのエントリーを見るテンプレートによってエントリー内の見出しのレベルが適切にならないという問題に悩んでました。

Continue reading

Googleのツールバーを既にインストールしている方なら知ってると思いますが、このツールバーをいれるとPageRankというものが見えます。(見えない人はOptionからPagerank表示にチェック）

詳しくはリンク先にかいてありますが、超絶簡単に説明すると「たくさんリンクされればランクがあがるよ、１０段階あるの　Googleの検索結果に影響するよ」という感じ。（実際にはもぉーっと複雑)

Continue reading