CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
長文記事を読んでもらいたい人は印刷向けスタイルシート設定した方がいいよ - 檜山正幸のキマイラ飼育記 (はてなBlog)
ずいぶん前に、id:nak2kさんに教えていただいて、僕は日記のスタイルシートに次の設定を加えています。 @media print { div.sidebar, div.myHeader {display:none;} .main, .day, .body {margin: 0 0 0 0;width:100%} } これで（少なくとも僕が使っているテーマでは）、まずまずのレイアウトで印刷できます（なんなら、印刷プレビューで確認をどうぞ）。 単なる個人用メモじゃなくて、他人に読んでもらうことを意識していて、長文のブログ・エントリーを書く人は、@medeia printの設定を加えたほうがいいと思いますよ。 まー、僕の個人的な嗜好と体験に基づく話ではありますが； よさげなエントリーでも長いと画面で読むのは辛い、あとそれと、これから外出するときとか、印刷して読みたいのよね。でも、サイドバーみた
トップページだけでもなんとかしたいのよ
ホームページデザインに悩んだら試してみましょ。スカスカで薄っぺらいトップページだけでも、かっこよくする情報が、ここにあります。
フロートとマージン辺
floatを使った段組では、各カラムのwidthの合計がコンテナの幅を超えないことが「カラム落ち」しないことの条件だと思われがちですが、 仕様にはそのような規定はありません。重要なのはマージン辺（外辺）です。 floatによる段組は「ボックスの回りこみ」なんていう曖昧な表現では説明できません。 浮動体の振る舞いを支配する厳密な規則を、 2カラムレイアウトにおける連続するふたつの左フロートに適用して考えると、 <div id="container"> <div id="main"> 1番目の左フロート </div> <div id="sub"> 2番目の左フロート </div> </div> 2番目の左フロートの外左辺（左マージン辺）は、1番目の左フロートの外右辺より右側になければならない 2番目の左フロートの外右辺は、コンテナの右辺より右側にあってはならない これらの条件が守られている限り
覚え書き@kazuhi.to: Chris Casciano氏の選んだCSSティップス10選
Chris Casciano氏の選んだCSSティップス10選 Chris Casciano氏が「Ten Simple CSS Tips」という記事のなかで、知識レベルを問わずスタイルシートを書く誰にとっても便利であろう10のヒントを公開していました。個人的にナルホドと思った部分があったし、もしかすると参考になると思う人もいるかもしれないので、以下に訳文を晒しますね。原文はCreative Commonsライセンスでしたが、一応Chris本人から訳文掲載の許可も得ています。あーちなみに例によって英語は苦手なので（おい）、誤りとかあったら指摘してください＞誰 スタイルを適用し始める前に、文法チェックによりマークアップを妥当なものにしましょう。 基本となるスタイルシートは* {margin:0; padding:0; }という規則集合で書き始め、（マージンやパディングは）それが必要な箇所に必要な
ブラウザ幅に応じて変わるレイアウト | 秋元@サイボウズラボ・プログラマー・ブログ
via clagnut ブラウザの幅が狭いと2段、広いと3段になるようなページレイアウトをいくつか紹介している記事。 見てもらうのが一番早い。以下のページを開いて、ブラウザの幅を狭くしたり広くしたりすると、縦列の数が変化する。 UX MAGAZINE Redesign Notes 1: Width-based layout 著者自身のサンプルは、幅によってはあまり美しくならないが、何段にも可変にできる。 画面の大きな人でも小さな人でも、それなりのページが返せるというのはいいかもしれない。もっとも、逆に表示サイズがどうであれ同じレイアウトになることを望む人もいるだろうが。 日頃、だいたいブラウザの幅なんて一定で使ってるので、こういうレイアウトのサイトがかなり普及してたとしても気づいてないわけだが。こうやってブログで特集されてはじめて気づいた。僕は横にスクロールさせるよりはこっちの切り替えのほ
Internet Explorer7 β2を含めた各ブラウザのCSS2.1実装状況
Name Last modified Size Description Parent Directory 08-Dec-2007 03:29 - address_check/ 13-Mar-2008 01:16 - affiliate/ 27-Sep-2008 12:59 - aibu/ 12-Nov-2007 21:05 - mail/ 23-Apr-2008 18:24 - mail2blog/ 07-May-2008 21:54 - sample/ 28-Apr-2008 18:51 - Apache/1.3.39 Server at diary.sakura.ne.jp Port 80
IE 7 用の CSS ハック - lucky bag
この記事で紹介しているハックとは別のソリューションを「IE7 を含むモダンブラウザ向けの CSS ハックまとめ」と言う記事で紹介しているので、合わせてご覧になって見ると良いかもしれません。 Internet Explorer 7 の Beta 2 Preview が公開された。んで、公式的にはバグを取り除くんで現存する CSS ハックは使えなくなるよってことだったんだけど、早速 IE 7 向けの CSS ハックが報告されている。 iBloom Studios | Articles | The IE7 CSS Hack カラクリとしては、IE7 が対応していない :lang() 疑似クラスを使うって方法らしい。下記のような (X)HTML を例とする。 <body lang="ja"> <div id="contents"> <p>foo</p> </div> </body> これに対して、
CSSを使ってキーボードのアイコンっぽく表示させる - にわか鯖管の苦悩日記 ＿|￣|● (2006-01-11)
携帯にメールや電話の着信が急に増えたり スマホで今まで使用していなかったロック機能を使うようになった お出かけや外泊の機会が増えた 衣装が派手になった というケースは浮気の可能性があるかもしれません。 もし浮気を続けられると、された側は精神的に苦しい思いを続けることになり、する方も後ろめたい気持ちが膨れ上がり良いことはありません。 やめてもらいたいか、いっそのこと別れて人生をやり直すかはしっかりとした証拠がそろってから考えてもよいかと思います。 そのためには下手に動かず、東京都で興信所のプロによる浮気調査をするのが良いでしょう。 その理由としては、浮気が原因で離婚となれば慰謝料の請求が可能となり、その法的な証拠を得るには素人よりプロの方の作りだすものが決定的なものになるためです。 全てをすっきりさせて今後の人生をやり直しやすくするためにも利用することをおすすめします。
良いハック・悪いハック | Web標準Blog | ミツエーリンクス
サトウマサシさまより、CSS Nite Vol.3に寄せてCSSハックに関するご質問をいただきました。ちなみにCSSハックとは、Webブラウザ間でのCSS仕様の解釈の相違やバグの有無を振り分けの条件として利用し、特定のブラウザに対しスタイルを適用あるいは非適用とする手法のことです。 2005年10月13日の［IEBlogより：お使いのCSSハックを一掃してください］で取り上げていた良いHACK、悪いHACKについて、具体的に解説いただけたら嬉しいです。 MicrosoftのIE開発チームが、「Call to action: The demise of CSS hacks and broken pages」のなかで使用を控えるよう呼びかけた「悪いハック」には、以下のものがあります。 html > body 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件
「デジタル情報を活用する７つ道具」-情報考学 Passion For The Future
最終日は、４人のブロガーの記憶に残る平成の３重大イベントを紹介しました。 いしたにまさき 1. 9.11同時多発テロ 2. 地下鉄サリン事件 3. ライブドアショック 橋本大也 1. 9.11同時多発テロ 2. Windows95の発売 3. インターネットとの出会い Netscape 1994年 たつを 1. インターネット : 世界とつながる 2. 米不足 3. ライブドア事件 聖幸 1. 雲仙普賢岳 火砕流 2. 地下鉄サリン事件 3. iPhone3GS 日本で発売 「ツイてる！ポッドキャスト新春2019」 3日目 平成のベスト３ ブログエントリー 今日は、４人のブロガーが、平成のベスト３ ガジェットを語ります。 ついてる！ポッドキャスト新春2019 (2019/1/3) - YouTube https://www.youtube.com/watch?v=WBr26AvwbB4 各
リンク先のファイルの種類によってマウスカーソルを変える -- 3m/746の日記 2.0 final β - 久しぶりに
日光を浴びた。 日が昇る前に会社に行って、日が沈んでから家に帰る日がずーっと続いていたのだ。 疲れたよ。でも今日は休みだ…もう今日も終わるケド。 （12/14に書き直しました。以前の内容は念のため id:mitamu:20051214#1134571263 にとっておきました。ご迷惑をおかけしてたいへん申し訳ございません。） WebページのリンクをクリックしたらそれがPDF文書だったりWord文書だったりExcelワークシートだったりして、ファッキン*1なAdobe ReaderとかMicrosoft WordとかMicrosoft Excelとかが起動してしまった…。 なんてコトがよくあるわたしとしては、PDF文書だとかがはっきりわかればそもそもクリックせずにすむワケなのだ。 Mozilla Firefox 1.5だとマウスカーソルを変えられるので、userContent.cssにごにょ
Web::Blogoscope: XHTMLの最適化手法
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Lucky bag::blog: プロパティから CSS 仕様書（邦訳）へのリンク
プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja )
www.siteprocentral.com
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Modern Syntax : IEとFirefoxでどう見えるかを1つの画面に表示してCSSの変更を即座に反映するソフト
TikTok/InstagramユーザーのRCDriftTokさんによる過去1年間のラジコンカーによるベスト・ドリフト・トリックのコンピレーションビデオです。 ラジコンカーをドリフトさせて車体の後部を何かに接触させて何かのアクションを引き起こすということをやっております。多分ミリ単位で接触しているんだろうけど、成功しなかった方が圧倒的に多かっただろうなってのを考えると奇跡的なビデオと言えるでしょう。 つうかラジコンカーってドリフトできるんですね。
CSS だけでフォトギャラリー - lucky bag
CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。 gallery.html (X)HTML は下記のように、画像を順不同のリストで並べている。 <ul id="gallery"> <li><a href="#empty-anchor"><img src="01.png" /></a></li> <li><a href="#empty-anchor"><img src="02.png" /></a></li> <li>
CSSメモ: Firefox 1.5での新機能
CSSメモ: Firefox 1.5での新機能 擬似要素に対しては、CSS3仕様書で用いられているコロン2つ (::) という表記を用いています。 コメントなどについては日記のコメント欄 (返信するボタンかコメントのリンク「返信する」で、入力フォームが表示されます) へどうぞ。 目次 親要素の:activeへ継承するようになった 擬似要素::first-letterを含む行の行間を修正 [New!][CSS3] 擬似クラス:only-childに対応 [New!][CSS3] 擬似クラス:enabled, :disabledに対応 [New!][CSS3] 擬似クラス:valid, :invalid, :in-range, :out-of-range, :required, :optional, :-moz-read-only, :-moz-read-writeに対応 border: 1p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
caramel*vanilla - 色に関する便利ツールいろいろ
CSSによる段組（マルチカラム）レイアウト講座