[B! CSS] sayaemonのブックマーク

http://blog.neo.jp/dnblog/index.php?module=Default&action=GetFile&blog_sys_id=73&i_file_id=2015&rand=2c469

sayaemon 2012/05/21

CSS

リンク

css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

sayaemon 2012/05/21

CSS

リンク

[CSS]ネガティブマージンの理解を深め、活用するテクニック集

スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。ネガティブマージンをは、例えばこういうのです。

sayaemon 2012/01/02

CSS

リンク

レイアウト作りを簡単にしてくれるCSSグリッドシステム

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

sayaemon 2011/06/06

CSS

リンク

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法 | CSS Lecture

sayaemon 2011/04/08

CSS

リンク

ZenCSSPropertiesEn - zen-coding - CSS-properties and its aliases for Zen CSS plugins - Project Hosting on Google Code

Code Archive Skip to content Google About Google Privacy Terms

sayaemon 2011/03/24

CSS
HTML

リンク

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。詳しくは、最小限にしたサンプルを作成したので参照ください。高さの異なるカラムを揃えるスタイルシートのサンプル下記の「32768px」って、何か特別な意味があるのでしょうか。

sayaemon 2011/03/19

CSS

リンク

[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法

IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w

sayaemon 2011/02/07

CSS

リンク

worldending.jp

This domain may be for sale!

sayaemon 2011/01/10

html5.jsを読み込ませようかなって時に

HTML
CSS

リンク

知っておいたら便利なCSS（スタイルシート）テクニック | CSS Lecture

sayaemon 2011/01/06

CSS

リンク

クロスブラウザのためのHTML/CSSのテクニック集 | コリス

anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。画像のリサイズをCSS/HTMLで行わないでください。全てのブラウザでフォントのレンダリングを確認してください。「Lucida」は使用しないでください。テキ

sayaemon 2011/01/05

いつでもチェック忘れずに

CSS

リンク

css-lecture.com

sayaemon 2010/12/25

overflow: hidden;は魔法のおまじない

CSS

リンク

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

sayaemon 2010/12/24

現状、どうしても使わざるを得ない時だけ…って、くるかな？そんな時が

CSS

リンク

[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル

画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用対応ブラウザ CSSで三角形を作成する仕組みまずは基本となる三角形の作り方です。三つにStepを分けて、解説します。デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w

sayaemon 2010/12/22

CSS

リンク

[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッドメモ訳者注各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i

sayaemon 2010/10/27

CSS

リンク

あるＳＥのつぶやき: minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ

minmax.js(doxdesk.com) FireFoxなどでは、以下のCSSを使えてとても便利です。 min-width ・・・要素の最小幅 max-width ・・・要素の最大幅(指定幅までしか広がらない) min-height ・・・要素の最小の高さ max-height ・・・要素の最大の高さ(指定の高さまでしか広がらない)でも、これはIEでは使えず大変不便です。上記CSSをIEでも使えるようにするのが、minmax.jsです。・サンプル <html> <head>  <style type="text/css"> <!-- .minmax { background-color:#FFCC66; max-width:100px; } -

sayaemon 2010/09/20

CSS

リンク

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) Techno logy (6,562) Internet (5,264) Marketing (4,812) Lifestyle (3,905) United States (3,078) United Kingdom (1,713) Weblogs (2,

sayaemon 2010/09/16

CSSデザイン集。さっぱり見やすい

リンク

height が決まっている領域で上下左右中央揃えにする CSS | ヨモツネット

概要 height が決まっている領域で上下左右中央揃えにするレイアウトのための CSS のコードです。position で実現する方法と違い、height が可変しても常に上下は縦横揃えが維持されます。この方法はコンテンツエリアをウィンドウに対して上下中央揃えにしたいときにも応用ができます。 height が一定のエリア内で上下左右中央揃えの demo height が一定のエリア内で上下左右中央揃えの demo (expressionを使用したバージョン) コンテンツエリアをウィンドウに対して上下中央揃えの demo (expressionを使用したバージョン) height が一定である必要がない場合や、IE で JavaScript の機能が利用できない環境を考慮する場合は、position を使って実現する方法や、expression を使用せずに、上下中央揃えを実現ができる、