float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
[CSS] YUI Fonts CSS でフォントサイズを相対指定する
デザイナーは絶対指定で（つまりｐｘ指定）自分が作ったラフ通りガッチガチに固定しろと主張する人がまだ多いと思うが、巷の流れに乗るなら相対指定にして然るべきという感じ。 しかし、いざ相対指定しようとしたら単位とか数値とかに迷ったりする。 emすら絶対指定だと切り捨てる厳しい人もいるらしいし、相対は継承されるから指定が難しい… 思ったサイズにならないこともしばしばある。 フォントサイズ固定してなきゃデザインが崩れる、なんてのもありがちで。 そこでこのブログのテーマVicunaでも使われてるYUI Fonts CSSの出番です。 YUI Fonts Example: Setting Font Size Note: To set the font size, always use percentages (%) from the conversion chart for maximum consis
![[CSS] YUI Fonts CSS でフォントサイズを相対指定する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Yahoo! UI Library: Fonts CSS
YUI Fonts CSS The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control. Fonts CSS: Offers full A-grade browser support. Provides consistent font sizing and line-height. Provides appropriate cross-OS font-family degradation paths. Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes. Works in both "Q
画面レイアウトを考える その２ワイヤーフレームに含まれる構成
サイトの表示に使用するレイアウトサイズの決定と同様に、ページの姿形を作る前に決めておきたいのが、ページの各スペースに割り振る機能についてである。この段階はサイト構築工程の中で、ワイヤーフレーム制作と呼ばれるポイントで、厳密に言うと情報アーキテクトの仕事に分類される。デザインカンプ（Design Composite）ということもあるので、レイアウトデザインとの境目は微妙なところだ。ワイヤーフレームはサイトのルックアンドフィールを決める基盤になると同時に、サイトの構造を確認するラフにもなる。それだけに、どんな規模のサイト制作でも経ておきたい工程だ。 各機能の名称を把握 ページの機能、といってもどんなものがあるのか、まずは確認することから始めたほうが良さそうだ。これから確認するページの機能、これは結構媒体や書籍によっても呼び名が統一されてなかったりするが、事実上の標準はここに挙げた呼称となるので
CSS Remix
Cascading Style Sheets Explained If you’re new to Cascading Style Sheets, or CSS, then this short guide is for you. After a brief introduction to CSS and some of its benefits, we’ll move on to CSS frameworks to help you decide if you should use one and if so, which one would be best for your needs. What is CSS? CSS is a computer programming language used for describing the visual presentation of a
CSS Mania · Since 2004
Sponsors Free website builder. Create a website now! EcommerceBooth is an eCommerce resource where you can find useful guides, tutorials, and exclusive deals. WPKube - learn how to get most out of WordPress. Popular Topics Companies (6,703) Freelance / Portfolios (4,828) Technology (6,562) Internet (5,264) Marketing (4,812) Lifestyle (3,905) United States (3,078) United Kingdom (1,713) Weblogs (2,
日本規格協会 JSA GROUP Webdesk
工業標準化法改正に伴うJIS規格名称変更のお知らせ(2020年6月22日更新) 2020/06/22 2020年6月吉日 お 客 様 各 位 日本規格協会グループ 出版情報ユニット 工業標準化法改正に伴うJIS規格名称変更のお知らせ 拝啓 時下ますますご清祥のこととお慶び申し上げます。 平素より当協会の事業へ格別のご高配を賜り厚く御礼申し上げます。 さて、平成30年第196回通常国会において「不正競争防止法等の一部を改正する法律」（法律第33号）が可決成立し、工業標準化法が一部改正されました（平成30年5月30日公布）。 これにより2019年7月1日より、“工業標準化法”は“産業標準化法”に変わり、“日本工業規格（JIS）”は“日本産業規格（JIS）”に変わりました。 2019年6月末日までに発行されたJISについては、まえがきを除き、JIS規格中の「日本工業規格」を「日本産業規格」に読み
Webアクセシビリティのポータルサイト『Infoaxia(インフォアクシア)』
アクセシビリティPodcast 2人の軽妙なトーク(?)で最新情報を提供 Web Developer 日本語版 2008年3月より、開発およびユーザーサポートを他サイトへ全て移管しました。 移管のお知らせ "Webアクセシビリティとは？"から始まる『Webアクセシビリティ入門』、2004年6月に制定されたWebコンテンツのJIS（日本工業規格）『JIS X8341-3の解説』など、これだけは知っておきたいWebアクセシビリティの基礎知識を習得。 Webアクセシビリティ入門 Web アクセシビリティを正しく理解する上での基礎知識を分かりやすく解説。 JIS X8341-3の解説 2004年6月に制定された、Webコンテンツの JIS X 8341-3 について詳しく解説。 Webアクセシビリティ用語辞典 Web アクセシビリティに関連する専門用語の辞典。 『基礎知識』トップ
JIS X 8341-3／リンク＆資料集 － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
リンク&資料集：JIS X 8341-3 2004年6月20日に制定されたWebコンテンツのJIS X 8341-3の関連サイトへのリンクです。 報道資料 経済産業省：情報バリアフリー分野の日本工業規格の制定 経済産業省のJIS X 8341-3制定に関する報道資料です。 購入 『 JSA Web Store』 JIS X 8341-3の規格票が、冊子またはPDFファイルのダウンロードで購入できます。規格番号の"X8341-3"で検索してみてください。 閲覧 JISC（日本工業標準調査会） JIS X 8341-3の規格票をPDFファイルで閲覧することができます。 関連情報 『 日本工業規格（JIS）X8341関連情報』 情報通信研究機構が提供する関連情報サイトです。 『 日本工業規格 JIS X8341「高齢者・障害者等配慮設計指針」関連情報』 PCオープン・アーキテクチャ協議会が提供す
Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫
～10程度っすよ ～50程度かな ～100くらい ～300程度です ～500はこなす ～1000はやってます これ以上 ( ! )
パターン・ランゲージとUI設計 | OVERKAST ROUGHKUT
WebサイトのUI設計のアナロジーとして、建築家クリストファー・アレグザンダーのパターン・ランゲージについて考えてみたい。 ツリー構造とセミ・ラティス構造 まずはアレグザンダーの最初の気付きから。 長い年月にわたりともかく自然に出来上がった都市を＜自然都市＞、又デザイナーやプランナーによって慎重に計画された都市やその部分を＜人工都市＞と呼びます。（中略）今では多くの人々がなにか本質的なものが＜人工都市＞には欠けていると感じている。 クリストファー・アレグザンダー「都市はツリーではない」 アレグザンダーは人工都市と自然都市の差異、そして人工都市のあり方を考えた末に、引用元のタイトルでもある「都市はツリーではない」という結論に至る。そして人工都市をツリー構造として計画してしまう問題を次のように考察している。 我々がツリーを考えているときは、デザイナー、都市計画家、行政当局、開発業者だけに適合の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
https://www.agavegroup.com/agWork/prettyForms/
Lucian Slatineanu :: Think. Design. Make.
Web Design Clip [WEBデザインのクリップ・リンク集]![Web Design Clip [WEBデザインのクリップ・リンク集]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5f481647ac1eb2cd87c65cb220881cb5c1c55bf/height=288;version=1;width=512/http%3A%2F%2Fwebdesignclip.com%2Fimg%2Fogp.png)
WEBデザインの見本帳｜WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!
ikesai.com
ソシオメディア | UIデザインパターン
http://www.designwalker.com/2009/04/wireframe-2.html
