2xupさんのところで実装されているエラステックレイアウト(Elastic Layout)、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。 と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。 でも、456 Berea Streetでよい感じに、自分のサイト
WEBクリエイター様に質問です。 画像のようなフォームページを作りたいと思います。 やりたい事は ●チェックボックスを当方が用意した画像にする ●送信ボタンを当方が用意したものにする ●プルダウンの画像を当方が用意したものにする と言う事です。 ドリームウィーバー8を利用しておりますが、CSS等も可能です。方法論を提案して頂けますでしょうか。
Cascading Style Sheets Have Changed the Face of the Web http://www.w3.org/ – 19 December 2006 – This year the World Wide Web Consortium proudly celebrates the ten years of Cascading Style Sheets (CSS), the technology designers use to create attractive, economical, and flexible Web sites. “The design community has confirmed that using CSS promotes beauty while making it easier and less expensive to
記事データ 投稿者 望月真琴 投稿日時 2006-10-28T12:00+09:00 タグ CSS Firefox IE Opera スクリーンショット 仕様 実践 Web Standards Design 概要 「 IE 7 と Firefox 1.5.0.7 と Opera 9.02 の擬似要素の取り扱い」に寄せられたコメントや「 IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書」での反応を受けて、少し考え方を改め、図を修正しました。 リプライ リプライはまだありません。 図を更に作り直してみました IE 7 と Firefox 1.5.0.7 と Opera 9.02 の擬似要素の取り扱いに寄せられたコメントや IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書での反応を受けて、少し考え方を改め、図を修正しました。 改めたというか IEは擬似要素
仕様は最後まで読みましょう IE 7 の :first-letter 擬似要素の font-size の算出や IE 7 の :first-letter 擬似要素の font-size のカスケーディングであれこれ悩んでいる IE 7 と :first-letter 擬似要素の問題ですが、はてなブックマーク - 徒栞の北村さんのはてなブックマーク - hxxk.jp - IE 7 の :first-letter 擬似要素の font-size のカスケーディングでの :first-letter擬似要素を用いた時の"fictional tag"は http://www.w3.org/TR/REC-CSS2/selector.html#x57 にあり。/ 最後の図の"IE 7"と"Firefox や Opera"は逆のような というコメントで再度仕様を読みました。 実は http://www.
問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規
記事データ 投稿者 望月真琴 投稿日時 2006-10-26T18:20+09:00 タグ CSS Firefox IE Opera スクリーンショット 実践 Web Standards Design 概要 IE7 は、擬似要素も独立したノードとして取り扱うのでしょうか ? それだったら「 IE 7 の :first-letter 擬似要素の font-size の算出」で悩んでいた件が腑に落ちるのですが......。 リプライ リプライはまだありません。 ユニバーサルセレクタの指定の影響範囲 IE 7 の :first-letter 擬似要素の font-size の算出でユニバーサルセレクタのことについて書きましたが、 selector's specificity としては低くても、要素ツリーにマッチするかしないかという点が考えられるなあ、と思いました。 今回は hxxk.jp の方の
記事データ 投稿者 望月真琴 投稿日時 2006-10-25T22:31+09:00 タグ CSS Firefox IE Opera スクリーンショット バグ 仕様 概要 ユニバーサルセレクタにて font-size を指定しており、かつ擬似要素の方で font-size を指定しなかったら、 IE7 は擬似要素の元となった要素の font-size ではなくユニバーサルセレクタの font-size を元にするみたいです。 リプライ リプライはまだありません。 IE 7 だけ文字が小さいぞ ? IE 7 での表示確認を目下行っている最中ですが、 hxxk.jp では大きな表示崩れは起こっていないようです。 まあ、 IE 6 でもバグ対策で一部の border を表示しないといった対応を採っていた以外は同じような表示になっていたので崩れるとは思っていませんでしたが。 しかし、 MOMENT
記事データ 投稿者 望月真琴 投稿日時 2006-10-20T03:57+09:00 タグ CSS Firefox IE Opera まとめ 概要 IE 7 の正式版がリリースされたので、 CSS Selectors testsuite の IE 6 と IE 7 と Firefox 1.5.0.7 と Opera 9.02 での検証結果をまとめてみました。 リプライ 4 件のリプライがあります。 IE 7 の正式版が出たので CSS Selectors testsuite でチェックしてみた IE 7 の正式版がリリースされたので、かねてから便利だと思っていた、 Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite で紹介されていた CSS Selectors testsuite - CSS3 .
タイトル長っ! まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ(CSS3も含む)にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。 上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな
Is your browser compatible? After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests. Because it i
● CSSでポップアップ ちょっとした説明文をポップアップするには "title" 属性が便利であるが、複数行表示がブラウザに依存し、画像を含んだコンテンツには対応できない。かと言ってJSを持ち出すのも面倒だと思っていたら、CSSのみで実現できるらしい。そのまとめ。(via RailsChat) CSS .popup .tips { display : none; position : absolute; } .popup a:hover { position:relative; } .popup a:hover .tips{ display : block; top : 30px; left : 20px; white-space : nowrap; text-decoration : none; border : 1px solid black; color : black; back
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
米Microsoftから2006年5月、Internet Explorer 7(IE7)beta2がリリースされた。IE7は2001年にInternet Explorer 6(IE6)がリリースされて以来、5年ぶりのアップデートとなる。このメジャーアップデートでは、CSSの標準規格への準拠やバグの修正、未対応だった機能への対応などが期待されている。 IE7 beta2では、CSS2.0のセレクタや「fixed」による固定位置表示、すべての要素に対する「:hover」の指定などに対応しつつ、XML宣言の記述によって発生していた問題が修正されるなど、要望の大きかった部分への対応・修正が行われている。 しかし、フロート(回り込み)関連や、プロパティを組み合わせたときに発生する細かなバグに関しては修正されていない部分も残っており、正式版リリースまでにどのぐらい修正されるかが注目される。 一方で、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く