By Nicholas Rougeux, posted on December 17, 2005 in CSS, Web Usability and accessibility are all the rage right now and that's great because it's slowly making the web a better place. Unfortunately, some of the goodies in our bags of tricks aren't quite up to snuff when it comes to these two areas. One such goody is the good old select element—specifically with the multiple attribute enabled. How
CSS属性フォーマット Version 0.2をリリースしました。この拡張機能を使うとバラバラになりがちなCSSの属性を、位置を指定するもの→ボーダーを指定するもの→・・・といった具合にに並び替えることが出来ます。この拡張機能はDreamweaver 4以降で動きます(MX2004でしか検証してませんが…)。インストール方法は上のリンクからCSS_AttrFormat020.mxpをダウンロードしてダブルクリックするとExtensionManagerが立ち上がり、自動的にインストールされます。 この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマットしてくれるものです。例えば以下のようなCSSがあるとします。 .sidetitle { border-right-width: 8px; border-left-width: 8px; text-align: center; back
分割した場合の CSS の種類 default.css 全ての文書に読み込ませる CSS。ブラウザごとに違うスタイルをリセットして要素別に見栄えを再定義します。汎用的なクラススタイルも含みます。 font.css フォントファミリを定義するための CSS です。 layout.css レイアウトの種類を定義するための CSS です。この CSS の中身で @import 規則を使い、個々のレイアウトを読み込みます。このファイル内では、読み込むファイル名の行のコメントを外して希望のレイアウトを読み込むようにします。 layout.css 内で @import 規則を使って読み込むスタイルの種類の例 fixed_2column_left_menu.css fixed_2column_right_menu.css liquid_2column_left_menu.css liquid_2colu
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
E-mailシ嗹ebmaster@zspc.com Copyright © 1996-2000 ZSPC. All Rights Reserved. All pages except color chart are written in Japanese. g src="/static/zspc.com-vcss.gif" alt="Valid CSS! | " height="31" width="88" border="0"> g height="31" width="88" src="" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" border="0">
免責事項:本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
IE7のWeb標準準拠の動きのおかげで、DOCTYPEスイッチとボックスモデルハックを使用してきたサイトは、その設計を見直さないといけないという、やたら哀しげな状況が生まれている。まあ、自分の手がけてきたサイトがそうなんですが。 取り急ぎ、簡単な対策をメモ。 対象となるのは、XML宣言付きのXHTMLで、CSSハックによってボックスモデルを互換モードで表示しているサイト。要は、IE6を中心に設計されちゃっているサイトね。 XML宣言付きのXHTMLは、IE6だけ互換モードで、Firefoxとかその他のメジャーブラウザは標準モードで表示を行う。今はIE6ユーザーが全盛なので、標準モードのブラウザの表示をIE6に合わせようとして、以下のようなボックスモデルハックを使うことがある。 * { box-sizing: border-box; -moz-box-sizing: border-box;
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する(=他のブラウザと表示を合わせる)場合、該当のセレクタの前に *:first-child+html を付与します。例えば、IDセレクタ #banner に適用させる場合、 *:first-child+html #banner { : [IE7用のスタイルを記述] : } となります。 なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します(下記)。この順番を間違えると期待する表示にならないのでご注意ください。 #banner { : [IE7以外のスタイルを記述] : } *:first-child+html #banner { : [IE7
W-0032 Netscape 6/Mozilla の CSS 独自拡張 2000/11/21 11/22 11/23 2001/8/20 Home Back Prev. Next ※ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。 Netscape 6(Mozilla) は CSS 1 ・ CSS 2 部分サポート以外にも、様々なプロパティ・値を独自拡張で実装しているようです。分かる範囲で調べてみました。 空白の部分は未調査です。また、バイナリの中からそれらしい語を拾ってきているだけの部分もありますので、実際にはまだ動かないプロパティもあるようです(少なくとも html.css などの中で使われているものは、おそらく実際に動いているはず)。 CSS 3 の先取りと書いてある
特定のWebブラウザの独自拡張仕様を使っていたり、 特定のWebブラウザの表示が間違っていたために、 Mozillaによって実際に問題が発生した事例の修正方法を紹介しています。 また、ここで紹介する修正案は全てWeb標準仕様に基づいた内容となっています。
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お
すべて Microsoft 製品 Microsoft 365 Office Windows Surface Xbox セール サポート ソフトウェア Windows アプリ OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Azure Microsoft Dynamics 365 Microsoft 365 Microsoft Industry データ プラットフォーム Power Platform 法人向けを購入する Developer & IT .NET Visual Studio
Go to information W3G - World Wide Web Guide W3G について 当サイトは、初学者を対象とする World Wide Web(ワールド・ワイド・ウェブ)における情報技術の解説サイトです。ウェブサイトの作り方などの基本・基礎から応用のウェブサイトの品質を高める方法など SEO対策(検索エンジン最適化・ウェブページ最適化)と Web標準(Web Standards)にフォーカスしたウェブサイトの作成情報を中心に扱っています。ただし、作者の知識が偏っているため扱っている内容も偏っています。 免責事項 w3g.jp 配下で公開しているリソースは、その正確性に万全を期すよう努力しておりますが、その内容の正確性、有用性、安全性等については、いかなる保証を行うものでもありません。また、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いか
Smashing Magazine | Blog Archive CSS-Based Forms: Modern Solutions In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, CSSベースのクールなフォーム、サンプル集。 デザインにしにくい部分だからこそ、凝っておくと玄人受けはよい筈。色々なデザインがあって感心するばかりです。 Prettier Accessible Forms Badboy Niceforms Functional Pretty Forms Form Layout Templates Fun with forms - customized input elements Scr
罫線(hr要素)の色を変える方法 hr要素は非常に古くからある要素ですから、誰もが知っているものでしょう。 しかし、この罫線の表示制御は意外と困難なものです。 その原因はhr要素が正体不明のモノである、ということに起因しています。 それでは、各ブラウザのhrの実装状況を検証しながらhr要素の色を変える手法を標準仕様に添ってみていきましょう。 まずHTML4.01の仕様書には視覚系ユーザエージェントは罫線をレンダリングするとだけ書かれていますので、 ブラウザがレンダリングする罫線はそういった専用のオブジェクトである、と言えるかもしれません。 元々HTMLの仕様書には見た目に関する記述は一部の例外を除いてあまり詳しくは記述されていません。 これはHTMLが見た目を制御するためのものではなく、意味を記述するものであるという思想に基づいているためです。 というわけで、このhr要素に対してレンダリン
オンラインで動く、色, CSS, robots.txt, .htaccess等のジェネレーター色々 2006年11月13日- Smashing Magazine Blog Archive Online Generators One can discuss, whether web-generators are useful or not. On the one hand, they don’t challenge our creativity, but on the other hand they make our life easier and save our precious time. However, it doesn’t matter really. オンラインで動く、CSSや画像ジェネレーター色々。 色、CSS、METAタグ、htaccess、パスワード、robots.txt
WinIE7の環境下においてある特定の条件を満たしてしまうと、横幅が指定した値より大幅に大きくなり、横スクロールバーが出てしまうというバグが見つかりました。 サンプル:http://css-happylife.com/template/09/ 原因は、ある条件下でfloat:rightを指定したとき、IE7は親のボックスがサイズ指定されていても、ソレを無視して右に行ってしまうからだと思います。 さらにソコに特定の条件が重なると発生。 floatでrightを指定している リンクを貼っている a要素をdisplay:blockにしている a要素のmarginでマイナス値を指定している 上記要素が具体的にどのように絡むと発生するのかイマイチわかってないですが、右を基点とする場合があやしいと思う。 また、positionなどで、rightを基点に指定した場合にも発生するかもしれません。 とりあえ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く