「DebugBar」と「Internet Explorer Developer Toolbar」を比べてみました: ある SE のつぶやき
IEでのWeb開発を便利にする「DebugBar ver5.0 beta1」が注目されているようですね。 IEにFirebugの機能を提供する - "DebugBar"登場(マイコミジャーナル) WEB開発に活用できるIE版のFireBug「DebugBar 5.0 beta」を試してみました(phpspot開発日誌) まあ、DebugBar を IE版FireBug というのは機能が少ないので違和感がありますが、そこは置いておいて、Microsoftから提供されている「Internet Explorer Developer Toolbar」と DebugBarを軽く比べてみました。 なお、DebugBar と Internet Explorer Developer Toolbar の両方とも、DOMインスペクタ機能は持っています。 ■DebugBar のみにある機能 JavaScrip
IE7とIE6を共存させる方法：まとめ
IE 7の自動アップデートに伴ってだと思うのですが、当サイトで紹介した「IE7とIE6の共存」シリーズのアクセスが増えているので、既存のエントリーをまとめました。 リンク先や手順などは以前紹介した方法ではなく、最新のものになっています。 IE7をベースに、IE6をスタンドアローンで起動する方法：その１ IE7をベースに、IE6をスタンドアローンで起動する方法：その２ IE6をベースに、IE7をスタンドアローンで起動する方法 Virtual PCを使用して、IE6 or 7を起動する方法 追記： スタンドアローンは、Windows XPが対象になります。 Vistaの場合は、Virtual PCを使用します。 IE7をベースに、IE6をスタンドアローンで起動する方法：その１ IE7をダウンロードして、インストールします。 日本語版「Internet Explorer 7」のダウンロード IE
【解決編】YUI Fonts CSSをモダンブラウザで最適化する。 - Trans
先日、YUI Fonts CSSでフォントサイズを指定した際に、Operaにおいてはフォントが小さく表示されるので、em指定するとか、Operaのみハックするとかして解決する、そんなことを書きました。でも、ようやく各モダンブラウザでYUI Fonts CSSを使いながら、的確なフォントサイズで表示する方法が分かりましたので、書いておきます。パーセンテージの指定を数パーセントずらすことによって、モダンブラウザでほぼ同じフォントサイズを表示できるようです。 まず、前回書いた記事で問題だと考えていたのは、 em指定の場合は、IE6などのブラウザで解釈が異なる（ブラウザの文字サイズの拡大機能を使った際に、拡大される割合がかなり違う）ということ。祖先要素にパーセント指定するという解決策はあるものの、階層が深くなってしまうと、あまり現実的ではない。 Operaのみに対応するハックのコードを埋め込んでお
CSSによる段組レイアウトのフレームワーク - lucky bag
CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。 CSS による段組レイアウト ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。 ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非
CSS/初期設定 [外部スタイルシートの分け方例] - ソラトモラボ/空友スタジオ
外部スタイルシートの分け方例 基本的な骨格部分：base.css、common.css 左右二段or三段とか、構造的な部分 ヘッダーやフッター、見出し部分について 全ページに使い回しできるような部分的なフォントのサイズやカラー指定 module.css パーツとして独立できる箇所に。バナーや新着情報、TOPICS、カテゴリの一覧など トップページ用：top.css 更新頻度が高く、下層ページと大きくレイアウトの異なることが多いトップページは、別ファイルが便利。 その他、CSSファイルを追加するときは、サイトマップを見ながらコンテンツの”カテゴリ”ごとに慎重に増やすようにする。あっちこっちのファイルで作業するより、ひとつのファイルで「検索」を利用しながら追加No.修正するほうが効率が良い。 ブラウザが持つスタイルのリセット＋便利スニペット YUI：Yahoo User Interface
YUI Fonts CSSのline-height: 1.22em;の謎を解く！ - Trans
先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがおっしゃるように、この「*」全称セレクタがキーになるようです。 まず、おさらい。 そもそも、なぜこのline-heightに疑問を感じたのかは、このエントリー。Lucky bag::blog: line-height の値には単位なしが良いとされる理由。はてブの数からしても読んだ人多いんじゃないでしょうか。まず、このコードについて、こちらでもテスト用に作ってみました。Lucky bagさんとほとんど同じコードです。 YUI Fonts CSSのline-hight: 1.22em;は何なのか？その1。 li
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
@import を使ってブラウザに CSS を読み込ませない方法 - lucky bag
特定のブラウザに CSS を読み込ませたくない方法の一つとして、 @import を使う hack がいくつかある。そういった hack を使いたい場合には、各 hack の@import 規則と適用ブラウザを一覧表にまとめたサイトが便利。 Hide CSS from browsers :: @import 縦に@import 規則、横に各ブラウザの対応状況、W3C CSS 検証サービス（W3C CSS Validator）に通るか、その際にエラーが出るのか警告が出るのかが分かるようになっている。プラス記号（ + ）は、その @import 規則を読み込むことが出来、マイナス記号（ - ）はその @import 規則を読み込むことが出来ない。 また、各 @import 規則の通し番号をクリックすることで、現在使用しているブラウザがその @import 規則で CSS を読み込む事が可能かを
Lucky bag: : blog: 背景画像に使える透過 GIF
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！ 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
FeedburnerがYahoo!ブログ検索にインデックスされない件
FeedburnerがYahoo!ブログ検索にインデックスされない件 FeedburnerがYahoo!ブログ検索にインデックスされないらしいので解決法を考えてみました。 (参考：Googleが「Feedburner」を買収？) Feedburnerがインデックスされない原因は、Yahoo!ブログ検索が『RSSのアドレスが、ブログや各記事のドメインと異なる』場合インデックスしないというポリシーで運営されているからのようです。 Yahoo!ブログ検索にポリシーを変更してもらうのが一番いいのですが、そうも言ってられないので解決法を考えてみました。 Yahoo!ブログ検索のボットのユーザーエージェントは『Y!J-BSC』らしいので、それで条件分岐したら大丈夫と思います。 (参考：Y!J-DSCとY!J-BSC - Yahoo! JAPAN独自のクローラー) オートディスカバリーの設定(heade
すごいdiv - 3ping.org
あまりに多いので書くのも気が引けるのだけど、body要素直下のすべての内容をdiv要素で何重にも囲ってるサイトが増えてきてますね。これ変だと思うんです。 大抵こんな感じに <body> <div id="wrap"> <div id="container"> . . </div> </div> </body> wrapper(包み込む), container(入れ物)なんていう名前がつけられていて、さらにすごいdivになると、さらにこの内側に inner(内側)というものが出てくる。 「class名やid名は、デザインに依存しないものが好ましい」と言いうのなら、「包み込む」や「内側」もデザインにかなり近いものだと思うのですが、真面目に突っ込む人は見かけず、このようなHTMLは増加しているようです。 再利用性という点からみても、「内側」という名前の要素郡ならば、移動するときは「外側」と一緒で
自信を持ってお勧めできる商品 - 3ping.org
僕には、 Amazon で購入して「これは買ってよかった!!」と、みなさんに自信を持ってお勧めできる商品があります！！ 今日は、カリスマアフィリエイターの卵として、その中から厳選に厳選を重ねた上、貴方のもっともお役に立てるであろう商品を1つだけ紹介しますので、クリックしていっぱい買って頂いて、僕を億万長者にしてくださいますよう、宜しくおねがいします。 僕の部屋には、いたるところに技術系の参考書が転がっているのですが、今見渡しても、そのどれもが分厚い。Web系の参考書だと、掲載されているサンプルコードを PC でカタカタすることも多く、いままでは本を開いた上に 5kg 鉄アレイを乗せて重石にしていました。１ページめくるたびにその 5kg の鉄アレイを持ち上げるのは筋肉つくから良いと思ってやったけど、実際勉強中にそんなことしたくない。分厚い本の場合は、最初は押さえ込んでても時間が経つと ヌー
デフォルトスタイルの差異を無くす CSS
2007-01-30更新 Yahoo UI Fonts CSS使用時の各要素のフォントサイズを変更する際の注意点を追加しました。 defalut.cssちょっとだけ修正 2007-01-18 更新 記事の内容も古くなり、Yahoo Libraryなどがでて更に差異を減らすことが簡単になったことから、これを利用し、スタイルも簡潔にシンプルに記述しなおしましました。前よりも使いやすくなったはずです。前回配布していたものとの変更点は次のようになります。 定義グループにアウトライン番号を記述 ベーススタイルのデザインをシンプルに記述し直し 使用していたカラーを一部を除いてモノトーンに変更 Yahoo Library Fonts CSSを組み込み、各ブラウザで文字サイズが同一になるように修正 プロパティ記述順序をhail2u.net「CSS2 Specificationでのプロパティの出現順序」に沿
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS角丸ボックスジェネレーター「RoundedCornr」:phpspot開発日誌