CSS::Parse::Packed
CSS::Parse::Packed というモジュールを CPAN に up しましたので、使い方なんかを解説したいと思います。ちなみに CPAN 初登録です。むふ。 使いかた CSS モジュールの parser のひとつなので、CSS モジュールの使いかた準拠です。詳しくは CSS モジュールの POD なんかを参照してください。 以下、サンプルです。 #!/usr/bin/perl use strict; use warnings; use CSS; my @styles = ( q{body { background-color:#FFFFFF; font-size: 1em; }}, q{body { padding:6px; font-size: 1.5em; }}, ); my $css = CSS->new({ parser => 'CSS::Parse::Packed' }
hide-k.net#blog: vimでCSSTidy
ここ一週間CSSと戦い続けているわけですが、どうもCSSは苦手です。当社比で普通の人の3倍時間がかかってる気がします。 特に勢いでCSSを書いているとソースがグッチャグチャになって収集がつかなくなってしまうので、整形ツールを探したらありました。 CSSTidy そのまんまです。 C++のソースを持ってきて $ unzip csstidy-source-1.2.zip -d csstidy $ cd csstidy $ chmod a+x compile.sh $ ./compile.sh でコンパイル。 出来上がったcsstidyを好きなディレクトリに入れておきます。 基本的な使い方は $ csstidy 入力ファイル [オプション] [出力ファイル] なのですが入力ファイル名に"-"を指定すると標準入力を渡せるので.vimrcに map ,ct <Esc>:%! ~/bin/cssti
コーディングガイドライン
構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、本来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは本来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を使っていても設計ミスの建物では使い物になりません。文書でも同じことが言えるもので、プレーンに理解しやすい文
「display: none」によるPattern Driven CSS - 日向夏特殊応援部隊
d:id:ZIGOROu:20070118:1169089995 で提唱したPattern Driven CSS(以下PDCで略す)ですけど、昨日ふと思いついた事です。 あとちょっと追記しました。 「display: none」によるパターンのフォーカス 例えば下記のようなHTMLがあるとする。 <body> <div id="content-root" class="section"> <h1>Yet Another Hackadelic</h1> <ul id="global-navigation"> <li><a href="" title="">最新の日記</a></li> <li><a href="" title="">日記一覧</a></li> <li><a href="" title="">日記を書く</a></li> <li><a href="" title="">管理</
ウノウラボ Unoh Labs: IE6 CSS 『border-leftとpadding-bottom』の謎
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか？ （赤と青のボーダーは、elementの境目がわかりやすいように入れてあります） 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のH
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
ウノウラボ Unoh Labs: CSSの管理と記述法のコツ
前回はYUIの紹介でしたが、今回はCSSの管理と記述法について書きたいと思います。 CSSは、主なHTMLエディタなどでは標準で編集できますが、多人数での開発 やスタイルが多くなってくるほど管理が大変になっていきます。 アプリケーションソフトの管理機能もいいですが、CSSコーディング規約のようなものがあると、より把握が容易になるメリットがあります。 サイト基準設定、ページレイアウト、共通要素、個別スタイルに分ける 構成内容によって、上記のような段階に分けると、意図しない表示等が出たとき、簡単に影響箇所の割り出せます。 基準スタイル（ex: base.css) font-sizeやfamily,デフォルトのmarginやpaddingのリセット等。 前回のYUIのReset.CSSを使う手もあります。 ページレイアウト(ex: layout.css) カラム構成やグローバ
CSS Hacks まとめ (1) @import hack - 日向夏特殊応援部隊
明日、会社のCSS勉強会があるので、ネタの一つとして基礎調査。 CSS Hackを原文として、中にあるHackネタを少しずつ紹介。途中で挫折したらごめんちゃい。 はじめに The @import Hack Hide CSS from browsers :: @import 多分、最も有名なCSS Hackだと思われる@import hackです。 Netscape Navigator 4などのCSS1しか解釈出来ないブラウザ*1が@importを解釈出来ないと言うバグを突いたHackですね。 流れとしては次のようになります。 まずはレガシーブラウザ*2の為に読むのに至ってシンプルなスタイルを用意する(legacy.cssとする) 次に@import hack用のimport.cssを用意し、modernブラウザ用のスタイルを読み込ませる 実装例 head要素内で、 <link rel="s
CSS Hacks まとめ (2) media queries hack - 日向夏特殊応援部隊
追記(凄い重要) media queriesですけど、Opera9と最新のKHTMLだとかで既にサポートされてるみたいなので、このHack自体既に意味の無い物になってます。 IE7 を含むモダンブラウザ向けの CSS ハックまとめ - lucky bag http://jp.opera.com/docs/changelogs/windows/900b1/ ここらへん参照の事。 はじめに media queryって何だろう。僕も初耳だったのでちょっと調べて見る。仕様はこちらです。CSS3で定められているようですね。ちなみにCSS3はまだWorking Draftみたいです。*1 仕様を斜め読みすると、今まではscreenだとかtvとか特定のmedia type別にしかCSSを当てれない仕組みだった物をmedia queryを使うと限定的に当てる事が出来るみたいですね。 例えば、 @media
CSS Hacks まとめ (3) caio hack - 日向夏特殊応援部隊
はじめに Caioなんちゃらさんが作ったHackだそうです。 NN4から特定のスタイルを部分的に隠す為のHackです。 仕組み /*/*/ div { color: red; } /* ここまで無視される */ って事みたいですね。 まとめ 部分的にNN4に適用するスタイルなんて今日びありえません。 なんか情報古いなぁ。。。
CSS Hacks まとめ (4) Anti NN4 Selectors Hack - 日向夏特殊応援部隊
はじめに これはNN4がセレクターの後にコメントブロックを書くと、そのセレクタ自体が無効になるよってバグを利用した部分的にスタイルを隠す技です。 仕組み html /* rest of selector */ { /* Nav4 alone ignores these rules */ } まとめ 要らないYO！
CSS Hacks まとめ (5) Box model hack - 日向夏特殊応援部隊
はじめに まずは下記のページ辺りがソースでございます。 http://css-discuss.incutio.com/?page=BoxModelHack http://www6.plala.or.jp/go_west/nextcss/tip/trans/boxmodelhack_jp.htm 基礎編2 ボックスモデルとDOCTYPEスイッチ 標準のbox modelって言うのは、width, heightはcontent areaのみの大きさを決めて、margin, padding, borderと言うのはcontent areaの大きさには影響を与えません。しかしIE6の互換モードやIE6以前では解釈が異なる為にこのHackは存在します。 どんな風に解釈が異なるかと言えば、padding, borderの幅がwidth, heightの中に含まれるようなイメージとなってしまって、指定し
CSS Hacks まとめ (6) star html hack - 日向夏特殊応援部隊
追記(重要) miniturboの中の人が言うにはOpera9とかにも当たっちゃうらしいです。 詳しい解説キボン はじめに http://css-discuss.incutio.com/?page=StarHtmlHack http://css-discuss.incutio.com/?page=EmulatingFixedPositioning 「* html」からセレクタ指定するとIEでしか当たらないスタイルを書く事が出来ますよってHackです。 使い方 * html{ width: 100%; height: 100%; overflow: hidden; } こんな風にするとMac, Windows共にIEだけで適用されます。 まとめ IE7でもstar html hackは有効みたいですね。*1 従って現在でも便利なHackって言えそうです。 なんか段々適当になってきた。w *1
CSS Hacks まとめ (8) High pass filter - 日向夏特殊応援部隊
はじめに ソースはこちら High Pass Filter http://www6.plala.or.jp/go_west/nextcss/tip/trans/highpass_jp.htm 特に２番めの和訳を一読すると何かってのはすぐ分かるはず。 どんな物か IE5/Mac or later IE6/Windows or later Netscape 6 or later Opera 5 or later ならばそれ以下のスタイルが正しく適用される、逆に言えばそれ以前のブラウザでは無視されると言ったHackです。 具体的には、 <link rel="stylesheet" href="highpassfilter.css" /> のようにhighpassfilter.cssを読み込み、このCSSファイルの中で @import "null.css?\"\{"; @import "highp
CSS Hacks まとめ (9) Inline high pass filter - 日向夏特殊応援部隊
はじめに d:id:ZIGOROu:20070116:1168900766のinのinline版です。 http://www.tantek.com/CSS/Examples/inlinehpf.html どんな物か <style type="text/css"> p.attention { background:yellow } i{content:"\"/*"} p.attention { background:lime } </style> i要素に当ててるルールのcontentの中身が誤解釈されて古いブラウザだとそれ以降のスタイルが当たらないよって事。 背景がlimeになるのが、 IE5/Mac or later IE6/Windows or later Netscape 6 or later Opera 5 or later です。 まとめ 場合によっては使えるかもしれないですな。
カスケード処理について - 日向夏特殊応援部隊
ってもこれCSSな人には常識なのか？ Assigning property values, Cascading, and Inheritance 値の割り当て、カスケード処理、継承 http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm http://anslasax.net/css-make/cascade.html ここら辺がソース。 追記 今日、会社のCSS勉強会があってそれの資料作ったので後ほど公開しまっする。 んでもってカスケード処理についても言及したので、興味のある人は見て下さい。 カスケード順位の定義 大まかに分けると次の4つの要素が問題となる。 媒体型(media type) 出所(誰が作ったスタイルか) 詳細度 出現順 で、適用される重みもこの順番。 出所について つまりはこういう事です。 文書作成者のス
CSS Hacks まとめ (10) Owen Hack - 日向夏特殊応援部隊
はじめに http://www.albin.net/CSS/OwenHack.html http://www6.plala.or.jp/go_west/nextcss/tip/trans/owen_hack_tr.htm あと、普段は事実上使えないセレクタについてどうしても知識が必要です。 Adjacent sibling selectorsと言う隣接セレクタです。 隣接セレクタ ここら辺が分かりやすくて吉です。 仕組み まぁ下記のようなCSSですね。Opera6以下とIE6/winでは見えないルールを定義したい場合に使うみたいです。 /* the following selector is seen by EVERY browser */ .myClassSelector { background-image: none } /* the Owen hack -- http://www.
新春CSSかくし芸大会@2007 Pattern Driven CSSPattern Driven CSS Structure of page designStructure of page design Toru YamaguchiToru Yamaguchi Yet AnotherYet Another HackadelicHackadelic ((d:id:ZIGOROud:id:ZIGOROu)) <<zigorou@cpan.orgzigorou@cpan.or
新春CSSかくし芸大会@2007 Pattern Driven CSSPattern Driven CSS Structure of page designStructure of page design Toru YamaguchiToru Yamaguchi Yet AnotherYet Another HackadelicHackadelic ((d:id:ZIGOROud:id:ZIGOROu)) <<zigorou@cpan.orgzigorou@cpan.org>> 新春CSSかくし芸大会@2007 アジェンダアジェンダ Pattern Driven CSSとは？ ページレイアウトとCSS CSSの構造と適⽤ パターンとレイアウトの分離 その他 新春CSSかくし芸大会@2007 Pattern Driven CSSPattern Driven CSSとは？とは？ Patter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Purchase Intent Data for Enterprise Tech Sales and Marketing - TechTarget
CSS Hacks まとめ (7) lone star hack - 日向夏特殊応援部隊
