Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS

Forms -フォーム [ad#ad-2] Skeletonの特徴 スマフォ対応のグリッド Skeltonでは軽量の960pxのグリッドシステムを採用しています。 ブラウザやタブレット、スマートフォンなどスクリーンのサイズが小さくなると、そのサイズに最適なレイアウトに変更します。 Fast to Start 洗練されたベーシックなUIエレメントをあらかじめ用意してあるので、すばやくサイトの制作が始められます。 Style Agnostic SkeltonはUIのフレームワークではありません。最もベーシックなスタイルを提供していますが、あなたの好きなデザインを適用することができる開発キットです。 Skeltonの対応ブラウザ・デバイス Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, I

フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは

外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">

ツールバーやWebページコンテンツのサイズを正しく表示させる Mozilla Firefox 3(以下、Firefox)では、Webページはもちろん、ツールバーなどのレイアウトにもCSS(Cascading Style Sheets:HTMLやXMLの表示レイアウトを修飾するために用いられる仕様のひとつ)を用いており、CSS内で使用する絶対値はDPI(Dot Per Inch:1インチ内に表現できるドット密度の単位)に依存しています。たとえば、Windows OSで一般的な96dpiの場合、12pxのフォントは16ピクセルとして表示されるというもの。 このCSSから参照されるDPIを制御するのが「layout.css.dpi」という設定名。既定値は「-1」となり、Firefoxが動作するOSの理論値もしくは96dpiが用いられ、「0」の場合はOS側の理論値がそのまま使用されます。何らかの理

ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.

This domain may be for sale!

Selectors Level 3 W3C Recommendation 06 November 2018 This version: https://www.w3.org/TR/2018/REC-selectors-3-20181106/ Latest version: https://www.w3.org/TR/selectors-3/ Previous version: https://www.w3.org/TR/2018/PR-selectors-3-20180911/ Latest version of Selectors: https://www.w3.org/TR/selectors/ Editor's Draft https://drafts.csswg.org/selectors-3/ Feedback: File an issue on GitHub Editors:

Internet Explorer (以下IE) はCSSを独自に拡張し、ime-mode プロパティをサポートしています (昔の Mac 版等、 Windows 版以外の IE では実装例がありませんでした)。このプロパティを Web ページ上のエディタ (input 要素や textarea 要素) に指定しておくと、そのエディタにフォーカスが当たった時 (キャレットと呼ばれる縦棒が点滅している状態になった時) に IME の状態を強制的に変更してしまう、というものです (詳しい仕様は MDC のドキュメントを参考にしてください)。 前回、ご紹介したように、Firefox 3 では IME の状態管理能力が飛躍的に向上したので、この独自拡張をサポートすることが可能になり、実装しました。 これにより、例えば数字しか入力しなくて良い場所等では、 IME がパスワードエディタの場合と同様に無

woork: Using CSS and Mootools to simulate Flash horizontal navigation effect カーソル位置によって自動スクロールする小窓実装ライブラリ。 枠の右端に移動すると、右にズイズイとスクロール、左に移動すると左へスクロールするような小窓を実装するためのライブラリが公開されています。 クリックでデモを表示 次のように、見えている部分と、隠している部分をCSSによって出し分けています。 JavaScriptによってスクロール処理を実装。 横スクロールしていくようなＵＩの実装に使えそうです。 また、サンプルのような大きいブロックではなく、小さい領域で、いくつかの情報を格納するのにも便利そうですね。 mootools+CSSで実装されているようです。

Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。

Styling form controls with CSS, revisited フォームの各エレメントのブラウザごとの表示。 追記： 2008年2月28日 「text field designs」を追加。