http://e0166nt.com/blog-entry-862.html
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
黄金比にも対応したグリッドレイアウト用のシンプルなCSSのフレームワーク -The Square Grid
2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transformcssSandpaperを使用した際のtransfor
条件分岐してIE6でのページ閲覧を出来なくする方法 | notizbloc
とりあえず僕がやった事のある方法です。（WALDのサイトもこれ使ってます。友人からのブーイングがすごいです、笑） 概要としては、CSSでdisplayを切り替えよう！というだけのもの。 1. HTMLの準備 <html> <div id=”wrapper”> ほげ </div> <div id=”forie6″> ふが </div> </html> みたいに書きます。<div id=”wrapper”>で囲まれている部分を通常表示して、<div id=”forie6″>で囲まれている部分をIE6で表示したい。 2. <head></head>内にCSSの条件分岐を書く。 <!–[if IE 6]> <link rel=”stylesheet” type=”text/css” href=”css/ie6.css” media=”all” /> <![endif]–> みたい
Webページ内の画像を保存させない方法
ブログを始めtumblrなどのサービスがある中で、考え方自体が古いのかもしれませんが、見ては欲しいがコピーしてほしくはない、大事な写真、作品というのはあるものです。今日紹介するのはWEBページ内の画像を保存させない方法です。 あくまで簡易的なので、本当に保存しようと思えばいくらでも方法はあるのですが、参考までに記していきたいと思います。 詳しくは以下 原理から先にお話しすると、イメージタグでは無く、スタイルシートでその背景に画像を指定するという方法です。実際どうなるかと言うと以下の通り。 ドラッグまたは保存してもダウンロードされるのはダミー画像ファイルとなります。 実際のソースコードは以下の通り <p style=”background: transparent url(https://design-develop.net/wp-content/uploads/2007/12/nocopy
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家）HTMLコーディングが3倍速くなる？「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ
cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b
輝くエフェクトが素敵なcss3+jQueryのギャラリー・ShineTime
アメコミ風なエフェクトがちょっと 素敵なcss3+jQueryのギャラリー ShineTimeのご紹介。なかなか 面白いエフェクトですよ。コンパクト なギャラリーでなかなかよさ気。 アメコミ風なエフェクトがちょっと 素敵なcss3+jQueryのギャラリー ShineTimeのご紹介。なかなか 面白いエフェクトですよ。コンパクト なギャラリーでなかなかよさ気。 確認したブラウザはChrome、Firefoxです。IE7,8でも一応動きますが、エフェクトが若干怪しいです。IE6では画像の表示が出来ませんでした。 サムネイルや左の大きい画像上にマウスを乗せると画像で作られたエフェクトが流れます。 サンプルでも使われているようなアメコミみたいな画像と相性良さそうです。 IE6では以下の様に画像が表示されません。 一応エフェクトは動きますので工夫すれば表示出来るかも。そこまでするメリットがあればチ
css3を直感で学べそうなフリーのジェネレーターを公開しているCSS3 Sandbox
話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 直感でグラデーションやドロップシャドウを作成、リアルタイムでプロパティが変わってくれるのでいい勉強になりそうです。CSS3 Sandboxの4つのジェネレーターをご紹介します。 Linear Gradients グラデーションを作成出来ます。左上でWebkit(SafariやChrome)かFirefoxを選択、その下でプロパティを決めます。実装画面下部に実際のプロパティが表示されるのでどのような数値でどう変化するか、というのが分かると思います。 Text Sha
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
IDEA * IDEA
『電子書籍のePubで対応しているCSSプロパティ一覧』
re-dzine.net situs togel online toto 2023 -
動きがかわいいcss3+jQueryのコンテンツスライダー・Pretty Simple Content Slider
http://www.designwalker.com/2010/05/css3.html
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法