CSS Nite公式ブログ:CSS Nite LP, Disk 3 -Coder's High- フォト・ギャラリー
2007年5月12日に開催したCSS Nite LP, Disk 3 -Coder's High-の模様を写真でお届けします。撮影は岡田陽一さん。 ▲天気がよかったせいか、いつになく出足が早く、12時の開場からスムーズに受け付けが行われました。 ▲その頃、楽屋では最終打ち合わせが行われています。 ▲予定通り、12:40に開演。まずはCSS Niteについてのご説明。 ▲まずは恒例の抽選会から。今回もたくさんの書籍がプレゼントされました。 ▲BNN新書からご提供いただいた『Lifehack with Mac —ストレスフリーの快適MACLIFEガイド』の著者、こもりまさあきさんに書籍の紹介とプレゼントの抽選をお願いしました。 ▲発売されたばかりの『WebクリエイティブのためのDOM Scripting』が好評な中村享介さん（ロクナナ）からも一言。 ▲トップバッターは益子貴寛さん（サイバーガー
TOC for XHTML with XSLT
Making a TOC of nested list elements for an XHTML document by hand or by code is usually among the more tiresome or difficult tasks. With XSLT 2.0 it is relatively easy to transform the XHTML document to itself (identity transform) and let extra templates add the TOC, the links and the numbers. 1. Nested list elements 1.1 Heading elements h1-h6 1.2 TOCs are undervalued 1.3 TOC and site map 2.
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
CSS Dock Menu
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
JavaScriptとCSSを圧縮するPHPスクリプト「jscsscomp」:phpspot開発日誌
jscsscomp - Google Code jscsscomp is a PHP script what compress JavaScript and CSS files when they are requested from the server. JavaScriptとCSSを圧縮するPHPスクリプト「jscsscomp」。 次のようにJavaScriptを圧縮できるPHPクラスが提供されています。 <script src = "/jscsscomp/jscsscomp.php?q=dom.js" ></script> <script src = "/jscsscomp/jscsscomp.php?q=yahoo.js, event.js, effects/dragdrop.js, slider.js"></script> このように、q=<スクリプトファイル> のように指定す
ウノウラボ 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
CSS着せ替えテンプレートプロジェクト！
このドメインについて問い合わせる poromeria.com 2024 著作権. 不許複製 プライバシーポリシー
web creators 5月号の記事をちょこっと書いた - lucky bag
web creators 5月号の巻頭特集「プロパティ別スタイルシートデザイン帖」にちょこっとだけ書いた。ほんとにちょっとだけなんで、相当探さないと分かんないかもしれないけど。今後も機会があれば書かせて頂く予定です。 んで、せっかくだから記事で使ったサンプルを公開しておく。なんだかさっぱり分からないかもしれないけど、そんな人は web creators 5月号 を読んでください。そんで、もっと色々と勉強したいと思ったら、拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」を買うといいと思います（ぉ 「プロパティ別スタイルシートデザイン帖」で使ったサンプル floatプロパティを使って、<dt>と<dd>を使ったデザインに のサンプル 1 floatプロパティを使って、<dt>と<dd>を使ったデザインに のサンプル 2 overf
404 Blog Not Found:javascript CSS - google-code-prettifyの導入
2007年03月26日16:00 カテゴリAnnouncementLightweight Languages javascript+CSS - google-code-prettifyの導入 google-code-prettifyを本blogでも導入しました。 google-code-prettify - Google Code ex: 404 Blog Not Found:CGIの神話と現実 404 Blog Not Found:たらいを回すならHaskell cf: 404 Hatena::Diary not Found - [Hatena::Diary] スーパーpre記法のテスト ここでは、Livedoor Blogでの具体的な導入法を解説します。 必要なファイルの入手とインストール 以下のファイルを入手して、アクセスできるようにしておきます。 http://google-cod
何事にもセンスが必要らしい (kuruman.org > Kuruman Memo)
My Operaとか壱茉さんのところとか見てたらなんだか白赤黒の三色で何か作ってみたくなった。で、スタイルシート入れ替えてみた。相変わらずセンスがないけれども、むやみやたらと色を使いまくっていた前のスタイルよりは多少ましな気もする。あんま変わらんか。 たいしたことをやらないからってな理由もあるけれど、スタイルシートって便利だなぁと思う。エディタでがしがし書くだけでまるっきりデザインを入れ替えることができるのだから。ついでに白黒反転版も代替スタイルシートとして用意してみた。 バグとおぼしき事柄 Opera 9.1は右側のネガティブマージンをしばしば無視するらしい。時々認識することもある。よくわからん。 Firefox 2がCSS 2の内容生成を改行する\Aを認識しない。white-space:preだと認識する。そんな不思議仕様ではなかったはずだからおそらくバグだろう。昔もこんなことを愚痴っ
もう、そんなミスに陥らないんだからっ！！
どーも。最近密かに主婦に人気が有るんじゃないか？と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ？ で、本題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる（やった）初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、
jQuery Pseudo Plugin (:before and :after in Internet Explorer)
A jQuery plugin for :before and :after in Internet Explorer. Pseudo-who? CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta lov
【解決編】YUI Fonts CSSをモダンブラウザで最適化する。 - Trans
先日、YUI Fonts CSSでフォントサイズを指定した際に、Operaにおいてはフォントが小さく表示されるので、em指定するとか、Operaのみハックするとかして解決する、そんなことを書きました。でも、ようやく各モダンブラウザでYUI Fonts CSSを使いながら、的確なフォントサイズで表示する方法が分かりましたので、書いておきます。パーセンテージの指定を数パーセントずらすことによって、モダンブラウザでほぼ同じフォントサイズを表示できるようです。 まず、前回書いた記事で問題だと考えていたのは、 em指定の場合は、IE6などのブラウザで解釈が異なる（ブラウザの文字サイズの拡大機能を使った際に、拡大される割合がかなり違う）ということ。祖先要素にパーセント指定するという解決策はあるものの、階層が深くなってしまうと、あまり現実的ではない。 Operaのみに対応するハックのコードを埋め込んでお
javascript - CSSをいじくる : 404 Blog Not Found
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
GIGAZINEを見やすくするスタイル - FAX
追記 2007/3/11ANOTHER PIECES - Collection & Copy - GIGAZINEを見やすくするスタイル こちらの方が断然すっきり。 GIGAZINE見ないのに。つい、はずみで。すっきりした。 右カラムを消して、左カラムを右に流して、ロゴを小さくして、ふちどりを取って、行間を拡げた。 @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("gigazine.net") { html, body { background-color: #F9F9E5 !important; } #outer { border-width:0px 200px 0px 0px !important; border-color:white #F5F5E0 !important; } #header
Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて！
Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンブラウザ向けCSSハック：ウェブネタブログ
stans
http://mt.vicuna.jp/log/20070329/index.html
*{ margin : 0 } はもう古い!? | Emotional Web