CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
自分デファクトなCSS定義、mydesign.cssを考えてみる(2) - Cyokodog :: Diary
mydesign.cssの適用 サンプルのhtmlに、mydesign.cssの構成ファイルである reset.css(YUI)、myreset.css、myskin_default.cssを順番に適用してみます。 サンプルhtml <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="mydesign.css" /> </head> <body> <h1><a href="#">mydesign.css</a
CSS3 Multi-Colum Layout Demonstration and Documentation - CSScripting.com
Limitations (as of version 1.0beta) Values for column-width and column-gap must be given in pixels. The implementation relies on a light javascript css parsers. Avoid complex css structures (like cascading rules). This is ok: .article { column-count: 3; column-gap: 20px; } This is likely to break: #somearticleid { column-count: 3; } .different_selector { column-gap: 20px; } Also, for n
Webブラウザの検証！
複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte
Safariのbackground-imageのバグ
ソース この画像は幅・高さともに 200pxです。これをwidth:200px; height:200pxのボックスの背景画像として、 background-positionにより、画像の左上の点をボックスの左から100px, 上から100pxの位置に表示させます。 div { width:200px; height:200px; border:1px solid #000; background-image: url(safari-image-test.gif); background-position: 100px 100px; background-repeat: no-repeat; } 表示結果 スクリーンショット ブラウザ:Safari 2.0, エンジン:KHTML, ハードウェア:PPC, OS:Mac OS X ブラウザ:Konqueror 3.
CSS の「値」とは何か - IT戦記
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
2008-04-01
「こんにちわ、皆さんご機嫌いかがですか」 「3月21日から 公開デザイン祭2008春 が、始まっていますが、どうです？4月6日の締め切りに向けて制作は進んでいますか？」 「大賞はAmazonギフト券5万円分、と気になるものの、 『スタイルシートって難しいんじゃないか？』 と考えている人も多いかもしれませんね」 「でも、全然そんなことはありませんよ」 「今日は簡単に公開デザインを作る過程を紹介してみましょう、これを読んで皆さんも是非チャレンジしてくださいね」 「そもそも公開デザインとは何か？ついてはこちらを参考にしてください 他人のデザインをインポートする（公開デザイン一覧） - はてなダイアリーのヘルプ」 「はてなダイアリーに慣れない方が公開デザインを作るにあたって、最初につまづくのはどういう仕様なのか、分からないことでしょう。スタイルシートのことは分かっても、ダイアリーの構造までは把握し
StyleIgnite.com
StyleIgnite is a site containing CSS snippets and styles. It is aimed at web developers and web designers. It contains an open repository of many CSS web styles and the source code to use them. Everyone is free to contribute, rate, comment and add new styles.Site & Industry News Instantbird: Mozilla-Based Instant Messaging Client Posted by admin, 11 Months, 6 Days, 6 Hours, 58 Minutes ago So
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
2008年3月 - Blog - EOF
MIAU、NHK に「かぐや」ハイビジョン映像公開に関する質問状を送付 ここのところ、MIAU の動きが活発だ。今日、MIAU は NHK に対し、「かぐや」（月探査衛星「SELENE」の通称）のハイビジョン映像公開に関する質問状を送付したと発表した。質問内容は短くまとまっているため、下手に要約しない方がいいだろう。NHK が一体どのような返答を返すかで、その真価が問われることになる。 少し前には、既に国際連合児童基金 UNICEF の下位組織ではないことが広く定着した財団法人日本ユニセフ協会に対し、「準児童ポルノ」に関する公開質問を送付し、回答を得た。しかし、この回答は要領を得ないものであると言わざるを得ない。MIAU の質問に対しての明言は完全に避けている。つまり、財団法人日本ユニセフ協会は、組織の展開するキャンペーンに対する科学的根拠を明示しなかったのである。この事実は極めて遺憾とし
)
CSS Compatibility and Internet Explorer
With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS3).
CSS Nite in Ginza, Vol.23のまとめ | Blog hamashun.com
追記 2008-04-03 言及を頂いたので質問コーナーに追記しました CSS Nite in Ginza, Vol.23に行ってきました。 今回のゲストはあの大藤幹さん。 大藤さんの名著CSSプロフェッショナル・スタイルは、コーディングの勉強を始めたばっかりの頃に買って物凄く役に立った本だった事もあって、かなり期待していました。 開演前 19時開演なので18時30分に到着したんですが、既に座席は満員でした。 さすがに凄い人気です。 テーマ 大藤さんは雑誌Web Designingに『CSS Analysis』という連載をしていて、その内容は世界のWebサイトを取りあげて色んなテクニックを紹介するという物。 今回のテーマはそれの特別版みたいな感じで、『CSS Analysis Live!』でした。 なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である
我的春秋: niftycube.js - 角丸効果 JavaScript ライブラリ
先日、"Nifty Corners Cube" という、ボックスの外枠に角丸効果を出すための JavaScript ライブラリを知りました。「え？今頃知ったの？」って方はともかく、「何でいまさら角丸効果を JavaScript で出す必要なんかあるの？！そんなの、CSS でできるじゃない？」と怪訝に思われる方もいるでしょうが、まずはこの niftycube.js の特徴をご覧あれ。 主要機能 文書構造上、無意味なブロック要素（div など）を HTML 上に記述することなく、単一の div 要素に対してでも角丸効果を出すことができる。 （以前に紹介した behaviour.js のように）角丸効果を適用する場所を CSS セレクタで指定できる。 CSS の背景色や背景画像などを niftycube.js が自動的に検出してくれるため、JavaScript の記述量が非常に短い。（JavaS
各ブラウザのDOCTYPEスイッチ状況表 - 10press
HTML 4.01 Transitional (公開識別子 + システム識別子) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
clearfix - 10press
floatするボックスを含む親ボックスの背景表示 floatプロパティを用いて段組をしたときに、Internet Explorer以外のブラウザだと親ボックスの背景色や背景画像、borderが途切れることがあります（サンプルHTML）。 これは作成者の立場からするとIEの挙動がありがたいのですが、CSSの仕様を見るとfloatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまうと言うのが正しい挙動のようです。 親ボックスの背景を表示させるための一工夫 親ボックスの背景を表示させるには以下の方法があります。 親ボックスの幅を指定する 親ボックスの高さを指定する 親ボックスにvisible以外のoverflowを指定する 親ボックスの最後に完全な「クリアされた」要素を置く 1.の方法ではIEだけしか背景を表示することが出来ません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]使い勝手を考慮した、5つのスタイルシートのフォーマット
Blogger
Tanreisoftware.com