レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
Firefox 3.5で新たにサポートされるCSS機能 - Mozilla Flux
Mozilla Developer Centerの『Firefox 3.5 for developers』と、Mozilla Wikiの『Evangelism/Firefox3.5』を参照して、Firefox 3.5で新たにサポートされるCSS機能について簡単にまとめてみた。 @font-face Web開発者とサイトデザイナーは、ユーザーがたまたまインストールしていたフォントに頼る代わりに、ダウンロード可能なTrueTypeとOpenTypeのフォントをデザインに取り入れることで、どのプラットフォームでも一貫した見た目にできる。 メディアクエリー CSS3のメディアクエリーをサポートしたことで、コンテンツがレンダリングされるデバイスに特有の詳細な情報を見ることによって、スタイルシートはコンテンツの外観をより正確にコントロールすることができる。たとえば、カラープリンタで印刷するときと、白黒
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
hxxk.jp - IE 7 の :first-letter 擬似要素の font-size の算出
記事データ 投稿者 望月真琴 投稿日時 2006-10-25T22:31+09:00 タグ CSS Firefox IE Opera スクリーンショット バグ 仕様 概要 ユニバーサルセレクタにて font-size を指定しており、かつ擬似要素の方で font-size を指定しなかったら、 IE7 は擬似要素の元となった要素の font-size ではなくユニバーサルセレクタの font-size を元にするみたいです。 リプライ リプライはまだありません。 IE 7 だけ文字が小さいぞ ? IE 7 での表示確認を目下行っている最中ですが、 hxxk.jp では大きな表示崩れは起こっていないようです。 まあ、 IE 6 でもバグ対策で一部の border を表示しないといった対応を採っていた以外は同じような表示になっていたので崩れるとは思っていませんでしたが。 しかし、 MOMENT
IE8が対応したCSS 2.1の機能：印刷とコンテンツの追加に関する機能 - builder by ZDNet Japan
IE8はCSS 2.1の機能に一通り対応した。そこで今回からはIE8が新規に対応したCSS 2.1のプロパティや値についてまとめていく。まずは、古いIEでは未対応だった印刷関連の機能と、コンテンツの追加に関する機能について確認していきたい。 なお、新しく対応した機能を利用するにはIE8のStandardsモード（標準準拠モード）で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。 印刷関連の機能 印刷関連の機能では、古いIEはpage-break-afterとpage-break-beforeプロパティに部分的に対応していた。IE8ではこれらのプロパティを完全にサポートするとともに、@pageルールやpage-break-insideプロパティなど、印刷関連の残りの機能にも対応している。 @pageル
アフターピルsosすぐ届く安心ナビ
＜PR＞ 「今すぐアフターピルが必要💦！」そんな緊急時でも、エミシアクリニックなら最短1時間で薬を自宅に届けてくれます😌 🏥エミシアクリニックなら🏥 エミシアクリニックでピルを処方する流れ ↓最短1時間で届く！簡単3ステップ↓ STEP1 LINEで友だち追加 公式サイトからエミシアクリニックを友だち追加し、1分ほどで終わる問診票の記入をします。 問診票の確認後に返信があり、医師によるオンライン診療に進みます。 STEP2 オンライン診療 オンライン診療とは言っても電話はビデオ通話は不要。やりとりはLINEだけなので気楽です。 医師から送られたLINEの必要事項に回答すればOK！5分程度で終わりますよ。 STEP3 ピルを受け取る 処方されたピルが最短1時間でポスト投函されます。プライバシーにも配慮されているのであなた以外の人に中身バレすることはありません。 ＼ アフターピルがすぐ
Sexy Music Album Overlays · Komodo Media
Resources Download Sample File Download PNG overlays Preview Show Mass Love It’s the social web now. We share everything, from our musical tastes, to the bacon avocado burger we ate for breakfast , to the very funny things we say and do. With amazing APIs such as the ones offered by Last.fm, Twitter, Flickr and more, we can now put them all on our sites, showing close to real-time updates of the m
選択子
W3Cの勧告候補平成13年11月13日 この版: http://www.w3.org/TR/2001/CR-css3-selectors-20011113 最新の版: http://www.w3.org/TR/css3-selectors 前の版: http://www.w3.org/TR/2001/WD-css3-selectors-20010126 編者: Daniel Glazman (Netscape/AOL) Tantek Çelik (Microsoft Corporation) Ian Hickson Peter Linss (former editor, formerly of Netscape/AOL) John Williams (former editor, Quark, Inc.) 摘要 CSS(段階スタイルシート)は、HTML及びXMLの文書の、画面上、紙面上、音
lh3.jp - CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧 (2009-03-09 現在 )
N/M ...... CSS Selectors test-suite のテストにて、全てはパスしなかったが M 項目中 N 個パス。なお、全項目にパスしていない場合でも、特定の条件のみパスしなかっただけといった場合（ buggy ）と、セレクタ自体をサポートしていない場合（ unsupported ）は区別して網掛けしています（薄い網掛けは buggy 、濃い網掛けは unsupported ）。※このページ上では、 buggy の背景色を #f56800 、 unsupported の背景色を #920f00 としています。 - ...... CSS Selectors test-suite のテストが動作せず。 Fx3: Firefox 3 ／ Fx2: Firefox 2 ／ Fx1: Firefox 1 ／ IE8 RC1: Internet Explorer 8 Release
CSS3の属性セレクタ - lucky bag
属性セレクタは、属性名や属性値によって、要素を指定する事ができます。Gecko系などのブラウザは、CSS3の属性セレクタなどに対応しています。どういった指定が出来るのか、覚え書きとしてメモ。サンプルとして、下記の(X)HTMLを想定します。 <a href="/" title="Lucky bag::blogのトップへ">トップ</a> 一番単純なのが、属性名を指定する方法です。下記は、 title 属性を持つ全ての a 要素に1pxのドットで下線を表示することができます。 a[title]{ border-bottom: 1px dotted #666666; } 次は、 title 属性の値が「Lucky bag::blogのトップへ」の場合のみ、指定する方法。 a[title="Lucky bag::blogのトップへ"]{ border-bottom: 1px dotted #66
Bonn-note > XHTML & CSS リファレンス [WEB ARCHIVES より]
はじめに 以下のリファレンスはフライソンさんが作られたものです。 以前、フライソンさんのサイト[WEB ARCHIVES]には、このリファレンスが掲載されていました。 しかし、ある日サイトにアクセスすると...おつかれ 煮るなり焼くなりご自由にと書いてあり、このリファレンスが入った圧縮ファイルが置いてありました。 なお、現在[WEB ARCHIVES]は完全に閉鎖されているようです。(ちなみにURLはhttp://fls.moo.jp/) このままではこの素晴らしいリファレンスがもったいないと言うことで、Bonn-noteで掲載することにしました。 そんなわけで、以下の事をご留意下さい。 最近検索して分かったんですが、結構いろんなところで公開されてるみたいですね。とりあえずこのまま置いておくつもりですが... 注意 以下のリファレンスはフライソンさんが作られたものです 掲載するにあたって許
CSS Dock Menu
May 08, 2007 15,301 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer s
キーバインディング - Mozilla をカスタマイズする
Mozilla のカスタマイズ このドキュメントの目的は、ユーザの好みにあわせてカスタマイズできる、あまり文書化されていない Mozilla の機能の一部について、いくつかのヒントを提供することです。 ここに載っているテクニックのほとんどがクロスプラットフォームです。このドキュメントが mozilla.org ドキュメントツリーの中でどこの URL にあるかということに惑わされないでください。(訳注: このドキュメントは unix ディレクトリにありますが、ここで扱っている Mozilla のカスタマイズは、プラットフォームに関係なく利用できるということです) このドキュメントで扱っているトピックの一部です: ユーザ CSS (UI フォントの変更を含む) Linux でフォントをもっと読みやすくする キーバインディング その他の便利な設定 ユーザインターフェイス部品のルッ
CSSの@importを無くしただけで劇的にレンダリング速度が速くなった | チバのブログ
今日、仕事で試してみたのですがとても効果があったので書いておこうと思います。 なにかというと共通のCSSとかjavascript用のCSSとかをまとめて@importで読み込むためにimport.cssとかって作ったりしますが、そこで読み込んでいる順番で<head>に書いてえば@importで読み込んでいるCSSが多い時はサイトのレンダリングの時間がかなり早くなります。 import.cssの場合 例えばこんな感じでCSS内で共通のCSSをインポートしていると思います。で、それを各ページ用のCSSでまたimportするみたいな感じです。 @import 'reset.css'; @import 'font.css'; @import 'thickbox.css'; 変更後 これを以下のように変えるだけで今回の案件では劇的にレンダリングの速度が変わりました。 <head> <link re
title属性をつけてスタイルシートを読み込む場合の注意点
title属性をつけてスタイルシートを読み込む場合の注意点 link要素にtitle属性を付けてスタイルシートを読み込ませるとこれは優先スタイルシートと呼ばれるスタイルシートになります。 この件について問題があるサイトが報告されていますので、この辺の仕様と注意点について紹介しておきましょう。 固定スタイルシート(persistent style sheet) 固定スタイルシートとは文字通り、固定的に読ませるスタイルシートの指定方法です。 これによって指定されているスタイルは、以下で説明する優先スタイルシートや、代替スタイルシートと同時に適用されます。 固定スタイルシートはtitle属性を付けずにlink要素を記述します。 <link rel="stylesheet" href="foobar.css" type="text/css"> 優先スタイルシート(preferred style s
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
CSS「display: table」と「display: table-cell」で出来ること｜アイビーネットblog
IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を比較してみたいと思います。 「float」を使った従来の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
The Do’s & Don’ts of Modern Web Design
