DOASでCSSの概要を記述する – VERSIONFIVE
CSSを書くときに、そのそれが何の役割をするのか(どこをスタイリングするのか)という概要をどう書いたらよいのか迷うことがあります。 特に大人数で作業している場合は形式を決めておきますが、他人が書いたものだとどうも区切り線[1]や改行のタイミングが気に入らなかったりします。僕はというと、3ping.orgさんの「CSSのコメントの書き方コレアレ」という記事を参考に、import.cssに各CSSの概要をまとめて書いていました。 何か自分を納得できるような形式がないか探していて、DOASを見つけました。これはかなりよいのではないかと思って早4ヶ月[2]、やっとエントリ書けました:-< DOAS : Description of a Script/Stylesheet vocabularyとは 主として単一ファイルで完結しているJavaScript, perl, phpなどのスクリプトやXSLT
MOONGIFT: » コンパクトなCSSフレームワーク「Boilerplate」:オープンソースを毎日紹介
ここ最近、次々と目にするようになってきたCSSフレームワーク。TomcatやRailsをはじめとするサーバサイド、prototype.jsやjQueryといったクライアントサイド、そしてデザイン領域のCSSへとフレームワークの裾野は広がっている。 こうしたフレームワークを覚えれば、サイトの構築は手軽になる。CSSによる三段組やブラウザ間での互換性などのTipsが盛り込まれたフレームワークを使って、サイトデザインに役立てよう。 今回紹介するオープンソース・ソフトウェアはBoilerplate、シンプルなCSSフレームワークだ。 Boilerplateは他のCSSフレームワーク同様に初期プロパティの消去からはじまって、各タグに対する設定を行っている。印刷時のCSS設定や、IEハックも盛り込まれている。 一つのファイルでの構成ではなく、目的に応じて複数のファイルに分かれているのが特徴だ。例えばフ
PDF 千夜一夜: 2007年12月05日 アーカイブ
XHTML+CSSでPDF O'ReillyのXML.COMブログにKurt Cagle 氏が「Cheers for the Prince」という記事を書いています。 Princeは、CSSで印刷品質のページを組版しようというソフトウェアです。あまり大したことはないだろうという先入観をもっていたようですが、使ってみて大変気に入ったと言っています。 Kurt Cagle 氏は構造化文書を書くためにDocBookを使っているようです。DocBookをXSL-FOに変換するオープン・ソースのスタイルシートはあります。これを使えば、DocBookをFOに変換してPDF化するのは簡単です。 しかし、この方法は、書籍などをきちんと作るには良いが、簡単なその場限りの文章などを印刷するには、ちょっと重過ぎるとのことです。 このため簡単な文書を印刷するのにCSSを使う方法を試してみたところ、結構気に入ったよ
クリーンな水平分割が出来そうな2カラムサンプル
2カラムなサンプルです。 海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。 どんなもんか見たい方・欲しい方は以下よりどうぞ。 サンプル 一式ダウンロード この辺で知りました↓ POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？ 言われてみれば確かに多いような気がしないでもないですね。こういうのは。 MT4の管理画面もそんな感じだし。 とはいえ、日本の企業サイトではあんまり見た記憶がないような、チェックが甘いだけなような。 一応サンプルの説明でも。 ベースとしてはそれなりに使いやすいかと思います。 新規でサイトを作るのに使えそうなの一式。をベースにして、各コンテナの子要素にdiv.areaを追加している感じです。 .areaの指定がこんな感じになってて、 #page .area { width: 860px; margin: 0
MOONGIFT: » CSS Validを目指せ！「CSS Validator」:オープンソースを毎日紹介
CSSを使ったサイトが当たり前になりつつあるが、ブラウザ間の整合性を保つのは非常に難しい。ましてやValidなCSSをくみ上げるというのは並大抵ではなく難しい。 チェックする機能が必要だ。オンライン上でCSSのチェックをしてくれるサービスとしてはW3C CSS 検証サービスがあるが、これはサービスが既にローンチしている必要があった。この問題を解消できるのがこれだ。 今回紹介するオープンソース・ソフトウェアはCSS Validator、ローカルに設置できるCSS検証ソフトウェアだ。 CSS Validatorはオンラインサービスはもちろん、そのプログラムをオープンソースとして公開している。Javaのプログラムになっており、Tomcat等のアプリケーションサーバに組み込んだり、コンソールで動作させる事ができる。 コンソールで動作させるのが最も手軽だ。この場合、CSSのあるURLとしてlocal
PDF 千夜一夜: 2007年10月07日 アーカイブ
CSS組版でPDFができる XHTMLで公開されている、CSS2.1の仕様書を、CSSを使って組版してPDF化したファイルが公開されました。 CSSの提唱者であるHåkon Wium Lie さんがPrinceで作成したものです。こちらからダウンロードできます。 http://www.princexml.com/howcome/2007/css21/css21.pdf ブラウザで印刷するよりは遥かに綺麗です。 このPDFのレイアウトを指定するためのCSSスタイルシートも公開されています。 http://www.princexml.com/howcome/2007/css21/forprint.css これを見ますと、W3Cの仕様書のようなものであれば、CSSを使って組版してPDF化することが十分に実用的であることが分かります。 投票をお願いいたします
画像のHTTPリクエストをCSSを使って軽減する"CSS Sprite Generator" | エンタープライズ | マイコミジャーナル
Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。 ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。 CSS Sprite Generat
Webブラウザへ数式を! - CSS 3向けMathML 3.0サブセットのドラフト公開 | エンタープライズ | マイコミジャーナル
W3C, The Math Working Groupは24日(フランス時間)、「A MathML for CSS profile」の更新版をWorking Draftとして公開した。MathML 2.0は2001年2月21日(フランス時間)にW3C Recommendationとして公開された、数式を記述するための仕様。2003年10月21日(フランス時間)にはセカンドエディションがW3C Recommendationとして公開されている。最新版は2007年4月27日(フランス時間)にWorking Draftとして公開されたMathML 3.0だ。 MathML for CSS profileはMathML 3.0のサブセット。現在策定が進められているCSS 3のフォーマットで数式を表現しやすいように考案されている。これまでWebでの採用が進まなかったMathMLだが、MathML 3
MOONGIFT: » 出た、構造化CSS「CleverCSS」:オープンソースを毎日紹介
前にCSSの記述テクニック 階層宣言コーディングというエントリーを読んだ。これはエイプリルフールネタではあるが、同じ事を考える人は他にもいるようだ。そして、それをネタとしてではなく、ないなら実現してしまおうと考える。 今回紹介するオープンソース・ソフトウェアはCleverCSS、構造化CSSを実現するソフトウェアだ。 CleverCSSはPythonで提供されるソフトウェアで、元になるCSSをベースに変換したCSSを出力する仕組みになっている。かなり面白い機能が盛り込まれているので順番にご紹介しよう。 まず構造化。Pythonのように階層を意識して書く事で、上の階層の名前を継承しつつ記述されていく。この時、{}をつける必要がなく、YAMLのような感じで書ける。 次は名前の収束だ。a:hover、a:visitedのような同じような定義の場合、a: &:hover: &:visitedのよう
注目のCSSフレームワーク「Blueprint 0.6」登場 - 1.0へ向けた大きな改善 | エンタープライズ | マイコミジャーナル
21日(米国時間)、Blueprint CSS Frameworkの最新版となる「Blueprint CSS Framework 0.6」が公開された。BlueprintはCSSで開発されたCSSフレームワーク。CSS開発に費やす時間を軽減させることを目的にして開発されたフレームワークでThe MIT Licenseを変更したライセンスのもとで提供されている。扱いやすいグリッド、実用的なタイポグラフィ、印刷向けのスタイルシートなどに特徴がある。 0.6は1.0へ向けた重要なリリース。実用的なディレクトリストラクチャの実現、新しいプラグインシステムの導入(これに合わせて多くの機能をプラグインへ展開)、Webブラウザ互換性をチェックするための新しいテストスイートの導入、垂直方向サイジングユニットにemを再度採用(0.4のときよりも改善されている)、CSSの妥当性を検証、また圧縮処理を実施するた
Digg-style Pagination
This tutorial is brought to you by the kind folks at Stranger Studios. We encourage you to check out our other projects. Digg-Style Pagination READ FIRST: I've released a my own modularized version of the pagination code. If you just want to use the function and aren't interested in its implementation, use this code. Download the PHP code for the function here: diggstyle_function.txt. To use it ma
ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択
miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ～ } div#content div.entry { ～ } div#content div.entry p { ～ } div#content div.entry ul { ～ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id
MOONGIFT: » プログラマブルCSS「Moonfall」:オープンソースを毎日紹介
CSSは柔軟な書き方に対応するフォーマットだが、運用を続けていくと構造の階層が乱れていったり、フォントサイズの設定が様々な場所に散らばったりと管理しづらくなっていく。 データを上手に管理すべく、プログラマブルなCSSを導入してみるのはいかがだろう。 今回紹介するオープンソース・ソフトウェアはMoonfall、CSSジェネレータだ。 Moonfallはスクリプトで定義する変数のリストと、CSSテンプレートからなる。CSSテンプレートには[]で囲むと数値や文字に置き換わる。ハッシュで定義してCSS指定をまとめることもできる。 fillと言う関数を利用すると、二、三段のカラム生成が容易にできる。幅や一部のカラムの大きさを指定すれば、あまった場所については自動計算してくれる仕組みだ。 現状のCSSは言わば各数値、文字列がハードコーディングされた状態だ。柔軟なデザイン変更に対応するにはやはり変数化が
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
MOONGIFT: » ついに登場！CSSフレームワーク「Blueprint」:オープンソースを毎日紹介
誰かがきっと作ってくれると思っていた。 prototype.jsのようなライブラリを利用するのは、便利な機能が多いという事もあるが、各ブラウザ間での相違を吸収してくれるという点も大きい。 その点において、CSSもまた各ブラウザ間での表示の差異が大きい。そこで試してみたいのがこれだ。 今回紹介するオープンソース・ソフトウェアはBlueprint、ブラウザ間の描画差異を吸収して簡単にマルチカラムを実現してくれるCSSライブラリだ。 Blueprintはヘッダ、コンテンツ、サイドバー、フッターのようなテンプレートをクラス指定するだけで簡単に作成できる。デフォルトのフォーマットはリセットされているので、ブラウザ間の違いが出るマージンやパディングの差異も吸収してくれている。 また、印刷時のCSSも用意されている。これを使えば印刷時やプリンタ経由でのPDF作成時に綺麗なものが仕上がるようになる。今後の
CSS Nite公式ブログ:CSS Nite Vol.20 フォローアップ情報（2）エリック・ミラリアさん
2007年8月10日に開催したCSS Nite Vol.20の第2部、エリック・ミラリアさんとジェニー・ドネリーさん（YUIチーム）の『The YUI Library: JavaScript and CSS Foundations for the Rich Internet Evolution』の資料と音声を共有します。 オンスクリーンプレゼン資料 音声（MP3、3.6MB、1:07'49"） そのほか、YUIについては下記のサイトなどをご参照ください。 Cheat Sheets for the YUI Utilities The Yahoo! User Interface Library (YUI) Yahoo! User Interface Blog youmos | Yahoo! UI Library のYUI ライブラリサンプル （Yahoo! UI Library） Ajax Y
マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記
はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
主要ブラウザのデフォルトCSS - 我的春秋
久々の CSS ネタにも関わらず、メモ程度の備忘録ですが、W3C CSS 2.1 勧告候補の Appendix にある、HTML 4 の推奨デフォルトスタイルと、現時点で僕が把握している主要ブラウザのデフォルトCSS の在りかのリストです。ネタ元は Accessify Forum: list of browsers' default CSS（via e-luck さんのブックマーク）です。 （※ Mac OS X 10.4、Windows 2000 で確認していますので、10.3 + IE 5 や Vista + IE 7 はチェックできていません。XP + IE 7 はそのうち実家の端末で確認する予定。）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite公式ブログ:CSS Nite in Osaka Vol4フォローアップ情報（1）鬼頭 健さん