スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
Lecture／趣味のWebデザイン
趣味のWebデザイン Lecture Advice Note Info Webサイトの運営と構築について考える。 Renewal "いろは"の先のCSS Strict HTML + CSS によるリニューアル手順を詳細に解説 第1回 第2回 第3回 第4回 第5回 第6回 第7回 第8回 第9回 第10回 実践の記録 Advice334 Advice332 Advice330 Advice329 Advice327 Advice326 Advice325 Advice324 Advice323 Advice321 Advice314 宇治IN茶筒 Design HTML＆CSS ウェブサイト作成入門講座 お勧めの HTML 解説記事 お勧めの CSS 解説記事 CSSを使うわけ CSSの基礎 単位と色 プロパティ一覧 アクセス向上を考える 初級篇 企画篇 計測篇 良質なアクセスは「期待」か
CSSにおけるセレクタの優先順位 - reflux flow
reflux flow > CSSにおけるセレクタの優先順位 CSSにおけるセレクタの優先順位 セレクタの優先順位を決める詳細度の計算方法。 このページの目次はじめにセレクタの種類優先順位の計算方法ブラウザの実装参考文献公開日2006-08-23最終更新日2007-05-21T19:21:52+09:00 はじめに ここではCSS2の仕様を元にセレクタの優先順位を決める詳細度（specificity）の計算方法について説明します。 セレクタの種類 まずは用語の確認（参考: 5 Selectors）。 全称セレクタ すべての要素に適合するセレクタ。「*」と記述する。 IDセレクタ id属性（HTML/XHTMLの場合）に基づくセレクタ。「#ID」と記述する。 クラスセレクタ class属性に基づくセレクタ。「.クラス名」と記述する。属性セレクタを用いた「[class
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
tableを使用しない段組CSSによるマルチカラムデザインについての考察
HTML文書の記述。 <div id="original"> 〜 </div> <div id="critical"> 〜 </div> <div class="status"> 〜 </div> CSSの記述。 div#original { float:left; width:50%; } div#critical { float:left; width:50%; } div.status { clear:left; } http://members.jcom.home.ne.jp/w3c/MediaMix/tntstyle.css float ブロック要素を左に順次floatさせる事で、疑似的に「段組」を表現する。 Navigator 4.x Navigator 4.xでは#fooをfloatさせないとダメ。 float:left;するセレクタをdiv#fooとすると、Navigato
W3G - World Wide Web Guide
Go to information W3G - World Wide Web Guide W3G について 当サイトは、初学者を対象とする World Wide Web（ワールド・ワイド・ウェブ）における情報技術の解説サイトです。ウェブサイトの作り方などの基本・基礎から応用のウェブサイトの品質を高める方法など SEO対策（検索エンジン最適化・ウェブページ最適化）と Web標準（Web Standards）にフォーカスしたウェブサイトの作成情報を中心に扱っています。ただし、作者の知識が偏っているため扱っている内容も偏っています。 免責事項 w3g.jp 配下で公開しているリソースは、その正確性に万全を期すよう努力しておりますが、その内容の正確性、有用性、安全性等については、いかなる保証を行うものでもありません。また、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いか
CSS2 セレクション
CSS2 CSS2は非常に難しいので、ブラウザが対応しそうなものだけ集めています。CSS1属性のCSS2での定義については、比較表をご覧ください。 Characters and case CSS2では、ISO10646で161以上のコードである文字もセレクタに使えるようになりましたので、次のような記号はエスケープする必要がありますが、クラスセレクタに日本語を使うのは可能になりました。ただし、id属性値に関してははHTMLで使える文字が制限されています。CSS2は一応XMLにも適用できるように拡張されていて、XMLにおけるID型の属性値は日本語も使うことができます。 ! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~ .重要 { color: red } .最新情報 { font-weight: bold } .重要.最
セレクタ - CSS2 リファレンス
この文書では，CSS2のセレクタ構文とその概要について述べます。CSSでは適用対象の選択のためにセレクタと呼ばれるパターンマッチングの規則が用いられ，文書ツリーの各要素に適用されるスタイル規則を決定します。 このセレクタの章を読み始める前に，まづCSS2構文の概説を通読されることを，お奨めします。 目次 パターンマッチング（Pattern matching） セレクタの構文（Selector syntax） グループ化（Grouping） 全称セレクタ（Universal selector） タイプセレクタ（Type selectors） 子孫セレクタ（Descendant selectors） 子供セレクタ（Child selectors） 隣接兄弟セレクタ（Adjacent sibling selectors） 属性セレクタ（Attribute selectors） クラスセレクタ（C
CSS YEAR OF THE CAT
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
floatとpositionの使い分け
てんぽ: floatとpositionの使い分け CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSで段組をやるには普通floatかpositionを使いますが、どのように使い分けるのか。 これはいろいろと試行錯誤しているうちにわかってくるものなので、「そんなこと知ってる」という人も多いかと思いますが、まとめてみます。 条件としては以下のような感じ。 HTMLの記述順は「（ヘッダ→）記事→サイドバー（→フッタ）」を守る 記事領域とサイドバーの長さはページによって異なる（どちらが長くなるかわからない） サイドバーとフッタの文字が重なる、とかは駄目 floatとpositionの違いは、「floatは下方向に融通が利く」のに対し、「positionは上方向に融通が利く」といえます。 何のことかさっぱりわからないと思いますが、つまりこういうことです。 フロートはソース上で
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
lucky bag: CSSアーカイブ
「XHTML+CSSプロが教える"本当の使い方"」という本が出ました 概要 MdNから9月25日に発刊された「XHTML+CSSプロが教える"本当の使い方"」へ寄稿しました。書籍で解説しているサンプルはIE6も対象にしていますが、IE6を対象外としたサンプルを当サイトで公開しておきます。 公開日 2009-09-28T11:37:14+09:00 URI http://www.lucky-bag.com/archives/2009/09/xhtml-css-pro.html カテゴリ CSS Misc News タグ Book CSS XHTML IE6で閲覧するとモノクロ 概要 IE6 で閲覧すると全部モノクロで表示されるCSS 公開日 2008-12-16T12:40:31+09:00 URI http://www.lucky-bag.com/archives/2008/12/ie6_
IE7とCSS
Captcha security check extype.com is for sale Please prove you're not a robot View Price Processing
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://hpbuilder.net/mobileopera/index.html
CSSによる段組（マルチカラム）レイアウト講座
CSS3 Previews - CSS3 . Info