floatは「回り込み」ではない:てんぽ
「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素をフロートさせた場合はどうでしょうか。 <div style="width:100px; float:left;"
「美乳」で文字化けが直るって本当？
・「美乳」で文字化けが直るって本当？ オンラインＤＶＤ＆ＣＤレンタルなら月々1980円で借り放題のＤＭＭがお得！ えっ？ って聞きなおしたくなるようなタイトルですが、「この『美乳』という文字をヘッダー部分にコメントとして挿入しておくと、文字化けが直る」という話は確かに存在します。ただし、これは大前提としてEUC-JPのページを作成するならば、という話になります。 <HTML> <HEAD> <meta http-equiv=Content-Type content="text/html; charset=EUC-JP"> <!-- 美乳 --> <TITLE>テスト1</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> このページはアダルトサイトとは無縁です。ヌード画像などは一切ありません。 </BODY> </HTML> では、なぜ、この「美乳」がおまじない
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
clearは「floatの解除」ではない:てんぽ
「CSSのclearプロパティは『floatの解除』である」と説明されることがあります。 これはほとんどの場合において正しいのですが、正確には、clearは上マージンの自動調整です。 （追記：CSS2.1では、上マージンの自動調整ではなく、上マージンが不足する場合に不足分を埋める「クリアランス」を設ける、という説明になります。） 仕様書（邦訳）にはclearについて、つぎのように書かれています。 非浮動ブロックボックスに適用される場合は，値は次の意味をもつ。 left 生成されるボックスの上マージンを増加し，上境界辺が，ソース文書のそれより以前の要素から生じたあらゆる左浮動ボックスの下外辺よりも下になるようにする。 clearは「floatの解除」ではない ふたつのimg要素が、左フロート、右フロートの順で存在し、ふたつ目のimgでclear:leftした場合。 <p> <img src=
Web::Scraperが便利すぎて困るの巻 (CodeZine編集部ブログ)
こんにちは、編集マンの久次です。 なんだかPerlのWeb::Scraperが便利すぎで、やばいです。 これまでWWW::Mechanizeでごにょごにょやっていたのですが、一気にいろんなものが解決しました。 それで、いろいろ書いていたら、HTML::TreeBuilderのlook_downというメソッドも強力なことにいまさらながら、気づいたので勉強がてら、ためしにコードを書いてみました。 Webの自動制御に今日も夢が広がる…。 ＜参考＞ Web::Scraper - Web Scraping Toolkit inspired by Scrapi - search.cpan.org naoyaのはてなダイアリー - Web::Scraper ブログが続かないわけ | Web::Scraper 使い方(超入門) Web::Scraper超便利 scrAPI Cheat Sheet
Lucky bag::blog: 維持しやすい CSS を考える
wg:Maintainable CSS CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったことを意識して作成するだろうか。上記サイトでは個人的な好みと前置きし、いくつかアイデアを述べている。コメント欄なんかでもちょっと盛り上がってて、激しく同意できる部分もあったりそりゃ違うなとか思ったりと、色々と考えさせられた。 CSS を作成する際に自分が考えること 自分でも改めてまとめてみると何か新しい事が見えてくるかもしれないし、コメントで何かヒントやアイデアを教えてくれる人も居るかもしれないなぁとか思ったんで、ちょっとまとめてみた（上記サイトと被ってるのが多いけど）。 CSS ファイルの肥大化を抑えるよう、作成中にボツになったスタイルは必ず削除しておく。頻繁にスタイルを変えるような場合は、指定する必要のないスタイルが残っていないかチェックする。 どれだけ些細な事でも、
2007年の「CSSやWeb標準」ベストエントリー100選＋α - Trans
2007年にCSSやWeb標準に関するどんなテクニックや議論があったのかを書き出しておくのも一興かなと思いまとめてみると大変なことになってしまいました。 筆者より一言 CSSな人たちは「懐かしいなー」と振り返ってもらえればいいですし、今年こそCSSやるぞ！と思っている人は参考に、また違う言語の人たちは「へえー」とでも思ってもらえれば。 このリスト自体は、個人的に運営していたCSS Engine in Japanから引っ張ってきたものです。そのため本来なら入れるべきなのに抜け落ちている記事もかなりあります。カテゴリーや順序は適当です。また、2007年と言っておきながら、たまに今年のものとかも入っていることはご愛嬌。その上、ベストエントリーと書いておきながら、良質なエントリーが抜け落ちていることも認めます。 ただ、CSSの議論も一段落しているので、そろそろこの検索も役目を終えたなーと思い、その
(X)HTML の id/class における命名規則 on CSS Flight - Jun, 15th 2006 (6)
(X)HTML の id/class における命名規則 purprin, <purprin [at] gmail.com> 2006.6.15 at CSS Flight プロフィール 1/2 purprin -「プルプリン」と読みます- コトノハ をきっかけにこの業界に 「purprin」は「パープリン」としか発音できなくね？とこっそり思ってる paperboy&co.所属 I love penguin(o e o)/ プロフィール 2/2 (X)HTML, CSS に魅せられた経緯 もともと Web は大好きで、趣味でひどいテーブルレイアウトのページをつくっていた ２年ほど前に友達に依頼されてつくったサイトでMovable Type を導入して改造をしながら勉強 ある時 HINAGATA で Kaminogoya 君の書く beautiful な(X)HTML+CSS に心奪われる -
【コラム】クリエイターのためのライフハック 第7回 デスクトップにToDoリストを常時設置 - Wallnote (MYCOMジャーナル)
Webベース管理の便利さと、デスクトップアプリの簡便さを ToDoリストは、ベーシックな仕事アイテム。Microsoft Office Outlookのようなデスクトップアプリケーションだけでなく、企業内で利用するようなグループウェアにもToDoリストは実装されています。最近ではWebベースでToDoリストを管理できるようになりました。Webベースだと場所やパソコンに依存することもないですし、最近はドラッグ&ドロップで操作ができるデスクトップアプリケーションのような使い心地を実現させているものが多いです。 ところが、Webベースで管理できるということは、いちいちサイトにアクセスしなければリストの管理も、閲覧することもできないというデメリットにもなり得ます。今回紹介する「Wallnote」は機能面では、最低限の機能しかありませんが、常にデスクトップ上に置いておけるような工夫がいくつかされてい
条件付コメント(Conditional Comments)実験ページ
IE5.5については「if gte IE 5.5」は通るのに「if IE 5.5」が通らないようです。 「if IE 5.5000」などとピリオド以下4桁全て書くと通ります。
Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
ヽ( ・∀・)ノくまくまー(2006-09-07) CSSでポップアップ
● 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OrderByColumnデモ - tableの列の値でソートする
http://rospear.info/other/archives/2006/08/url.html
AWCS
ｄメニューニュース｜NTTドコモ（docomo）のポータルサイト
スタイルシートで疑似フレーム
tkrb.jp
ACCESS R - HTML,DHTML,CSS,JavaScript,CGI,アクセス