CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
XML宣言でIE6が後方互換モードになるバグ はじめてのブログデザイン
先日、当ブログで制作したテンプレートをご使用中の方から不具合報告を受け、その方とのコメントのやりとりから有益な情報を頂きました。 既にご存知の方も多いと思いますが、XHTML の文章型宣言である XML 宣言をソースの一番上の先頭に記述すると、IE6 では後方互換モードになってしまうバグがあります。FC2ブログのソースで言うと下のようなソースです。 <?xml version="1.0" encoding="EUC-JP"?> 私のように知らなかった方のために説明させて頂くと、後方互換モードとは、IE6 より古いバージョンの IE での CSS の解釈（後方互換モード）となり、W3C の標準仕様に従って表示するモード（標準準拠モード）とは違う CSS の解釈をします。 したがって、他のモダンブラウザと IE6 に表示のズレが発生します。 ボックスモデルの解釈の違い img 要素の padd
[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集
Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。 各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。 Internet Explorer 6 IE6のみに適用します。 <textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea>
![[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
CSSハックしてはいけない5つの理由 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebページやWebアプリケーション開発の終盤に入ってから、特定のブラウザでレンダリングに問題があることが発見されるというのはままある状況だ。すぐに問題を解決することを目指してクイックハックやConditional-CSSの適用などを実施することもある。この方法は短期的に見れば効果があるが、長期的に見ると逆により多くの問題をもたらすため使わない方がいいという紹介がSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsで紹介されている。紹介されている理由は次のとおり。 CSS妥当性検出が不可能 - クイックハックではブラウザの既知のバグを使っていたりベンダ固有のプロパテ
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
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のバ
MellowのRadioBlog » スタイルシートで中央寄せする場合（ＩＥ６）
概要：IE6でのブログ中央寄せ方法 スタイルシートで全体を中央寄せする場合、ＩＥ６とＩＥ７ではやり方が違うようです。 IE7やFireFoxの場合では、全体を中央寄せする場合、 #container{ margin-right:auto; margin-left:auto; } で良いのですが、IE6 の場合はmargin:auto; を認識しないため、中央寄せできないそうです。 ＩＥ６ダメじゃん。でもＩＥ６使ってる人多いんだよねー。＾＾； うーん。こんな事でつまづくなんて、予想外だなーー。 で、対策としては、ＩＥ６のバグを利用するらしく、下のようにします。 body{text-align: center;} #container{text-align: left;} これで、ブログ全体（body)は中央寄り。中の(container)文字は左寄りになりました。 ああ。IE6ってずっと
CSS_XHTML_TIPS:XHTML-TIPS hrは構造か見栄えか
この記事に対してご意見をいただきました。それについて追記した記事があります。→http://blog.livedoor.jp/cssxhtml/archives/53084266.html 今週は真冬の天気、調度良い具合にWEB案件の実務が結構な量がある為、内勤でした。明日もこの真冬日が続くらしいが、あいにく外勤となりそうです。 今回のテーマはWEB標準としてhrは構造か、見栄えかという問題を取り上げます。 業界内、WEBデザイナの間ではどっちつかずのテーマとして数多く話題が取りざたされていますが、私はどちらかというと構造派です。次に上げるサンプルを例に解説しますと、 なぜ構造かと言うと、サンプルにあるように（ずいぶん長いサンプルですが）CSSの切られた状態でのページビューがナビ部位とコンテンツ部位をわかりやすく区切る役目を担っており、見やすさ＝ユーザビリティに配慮することになると
Blog
明示的 意味 แพลตฟอร์มการเรียนรู้และพัฒนาทักษะด้วยเทคโนโลยี https://suin.io เป็นแพลตฟอร์มที่ให้คุณเรียนรู้และพัฒนาทักษะทางเทคโนโลยีอย่างสะดวกสบาย เรามุ่งมั่นในการให้ความรู้และประสบการณ์ที่มีคุณค่าในการพัฒนาตนเอง pascalcase
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
新規でサイトを作るのに使えそうなの一式。Ver 2｜CSS HappyLife
新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード（zip：18kb） ちなみにダウ
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
dlのdt dd を横並びに
何かと便利な定義リスト。 用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。 しかし、中々思うように横並びが出来ないのが定義リスト。 今回はそんな厄介な定義リストのサンプルを作ってみました。 まずはスタイルシート。 dl { border:1px solid #999; width:390px; } dt { float:left; width:100px; padding:5px 0 5px 10px; clear:both; font-weight:bold; } dd { width:260px; margin-left:100px; padding:5px 5px 5px 10px; border-left:1px solid #999; } こんな感じです。 そして、実際の画面では↓こんな感じで表示されると思います。 もっとテーブ
CSS：floatする要素にmarginする場合はdisplay:inlineで解決 | あいにゅれぽーと
一定期間更新がないため広告を表示しています
今使えるCSS3の書き方まとめサイト | エンタープライズ | マイコミジャーナル
CSS3, please! - This element will receive inline changes as you edit the CSS rules on the left. Enjoy! CSS3の規約は現在策定段階にある。しかし、すでにどの主要ブラウザもCSS3に準拠する記述方法か、またはベンダプロパティとしてその機能を実装している。CSS3で提供される角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッションなどの機能は魅力的だ。浸透しつつあるプログレッシエンハンスメントのデザイン実装方法論を採用するなら、基本となるデザインをCSS2.1で整え、CSS3の機能で最新ブラウザ向けに一歩先のデザインを提供するというのは悪くない選択肢といえる。 ただし問題がある。CSS3は依然として策定段階にあるため、同様の機能は提供されているものの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大藤幹のHTML/XHTML/CSS辞典｜株式会社龍球インク
http://www.seo-maniax.com/middle/iecss/
マージンの相殺について：CSS | Tech de Go
フロートとネガティブマージンまとめ:CSS | Tech de Go