css:to-R http://blog.webcreativepark.net/css/ JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信 ja Copyright 2008 Wed, 10 Sep 2008 04:22:41 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification 「CSS Reloaded」CSS3の実践的な使い方をご紹介！の感想 先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介！」に行ってきました。

資料が公開されました。

CSS Reloaded Ja
View SlideShare presentation or Upload your own. (tags: css css3)

■出典元：CSS Reloaded
■著者；John Allsopp
■リンク：Web Directions East

以下、内容を復習もかねてまとめてみました。（サンプルやブラウザ対応などは私が補足したものです。）

]]> http://blog.webcreativepark.net/2008/09/10-042241.html http://blog.webcreativepark.net/2008/09/10-042241.html css css Wed, 10 Sep 2008 04:22:41 +0900 float方向のmarginが倍増するバグへの対応 IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。

]]> http://blog.webcreativepark.net/2008/08/25-135914.html http://blog.webcreativepark.net/2008/08/25-135914.html css css float IE6 margin Mon, 25 Aug 2008 13:59:14 +0900 tableにおけるmarginの相殺 ネタ元：tableのmargin相殺

tableにおけるmargin相殺はちょっとややこしいので補足しておきます。

]]> http://blog.webcreativepark.net/2008/08/03-123928.html http://blog.webcreativepark.net/2008/08/03-123928.html css css table Sun, 03 Aug 2008 12:39:28 +0900 marginの相殺 CSSにおけるmarginプロパティはボックスに対して余白部分を生成するというシンプルなものなのですが、『marginの相殺』という特徴があります。

marginの相殺について解説をしてみます。

]]> http://blog.webcreativepark.net/2008/07/09-001153.html http://blog.webcreativepark.net/2008/07/09-001153.html css css Wed, 09 Jul 2008 00:11:53 +0900 Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3でメイリオを指定するとinputのsizeが倍増する

Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。

]]> http://blog.webcreativepark.net/2008/07/01-005941.html http://blog.webcreativepark.net/2008/07/01-005941.html css css firefox Tue, 01 Jul 2008 00:59:41 +0900 CSSのレイアウトテクニック - Faux Absolute Positioning ネタ元：CSSレイアウトテクニック"偽装絶対指定"

久々にCSSでの面白いテクニックですね。

]]> http://blog.webcreativepark.net/2008/06/25-024437.html http://blog.webcreativepark.net/2008/06/25-024437.html css css float position Wed, 25 Jun 2008 02:44:37 +0900 re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか

いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。

]]> http://blog.webcreativepark.net/2008/05/28-223334.html http://blog.webcreativepark.net/2008/05/28-223334.html css Wed, 28 May 2008 22:33:34 +0900 Slice Imageでサイトを高速化 ネタ元:CSS Spritesでサイトを高速化&CSS Sprites化と画像減色でサイトを高速化

ナローバンド時代にサイトの表示を高速化する為に利用された古典的手法「Slice Image」と、ネタ元のCSS SpritesやSlice Imageで、なぜサイトの高速化が可能かを解説したいと思います。

]]> http://blog.webcreativepark.net/2008/05/26-235712.html http://blog.webcreativepark.net/2008/05/26-235712.html css Mon, 26 May 2008 23:57:12 +0900 CSS で簡単にメニューの上下中央揃えを実現する ネタ元：CSS で簡単に上下中央揃えを実現する

IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。

]]> http://blog.webcreativepark.net/2008/03/17-020321.html http://blog.webcreativepark.net/2008/03/17-020321.html css Mon, 17 Mar 2008 02:03:21 +0900 javascriptなしで背景が透けるカラムを実装するスタイルシート ネタ元:背景が透けるカラムを実装するスタイルシート

このやり方も素敵なんですが、JavaScriptなしで余計なdiv要素を追加せずに再現できる方法を紹介します。

]]> http://blog.webcreativepark.net/2008/03/05-200525.html http://blog.webcreativepark.net/2008/03/05-200525.html css Wed, 05 Mar 2008 20:05:25 +0900 テキストスタイルをジェネレートできる CSS Type Set テキストスタイルをジェネレートできる CSS Type Set

CSS Type Setはテキストのスタイルをジェネレートできるサイトです。

]]> http://blog.webcreativepark.net/2008/02/15-220744.html http://blog.webcreativepark.net/2008/02/15-220744.html css ブックマークレット Fri, 15 Feb 2008 22:07:44 +0900 商品画像掲載のページ構成CSS ネタ元：商品画像掲載のページ構成css or table?

なかなか語られることのない、Web制作の問題点が議論されています。

]]> http://blog.webcreativepark.net/2007/12/14-091334.html http://blog.webcreativepark.net/2007/12/14-091334.html css Fri, 14 Dec 2007 09:13:34 +0900 高さの異なるカラムをそろえるスタイルシート ネタ元：高さの異なるカラムを揃えるスタイルシート[コリス]

高さの異なるカラムをそろえるのがはやっているようですので、色々考察。

]]> http://blog.webcreativepark.net/2007/10/31-194436.html http://blog.webcreativepark.net/2007/10/31-194436.html css css カラム Wed, 31 Oct 2007 19:44:36 +0900 CSS最適化ツールの『CSS Optimizer』を公開 『CSS TIPS』でCSS最適化ツールの『CSS Optimizer』を公開しました。

]]> http://blog.webcreativepark.net/2007/09/07-005445.html http://blog.webcreativepark.net/2007/09/07-005445.html css css tool Fri, 07 Sep 2007 00:54:45 +0900 input要素などにおけるIEのバグ ちょっと、はまったのでメモ書き

]]> http://blog.webcreativepark.net/2007/08/24-144835.html http://blog.webcreativepark.net/2007/08/24-144835.html css css ie バグ Fri, 24 Aug 2007 14:48:35 +0900 CSSをデバッグするツール色々 Web標準の日々のグループディスカッションでCSSの編集を直感的(?)にできるライブラリの案が出てたのですが、世の中すばらしいツールがいっぱいあるので、今回はそんなツールを紹介します。

]]> http://blog.webcreativepark.net/2007/08/07-220323.html http://blog.webcreativepark.net/2007/08/07-220323.html css css firebug firefox Opera Tue, 07 Aug 2007 22:03:23 +0900 CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。

]]> http://blog.webcreativepark.net/2007/07/18-221039.html http://blog.webcreativepark.net/2007/07/18-221039.html css css ロールオーバー Wed, 18 Jul 2007 22:10:39 +0900 CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。
長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。

]]> http://blog.webcreativepark.net/2007/06/17-160735.html http://blog.webcreativepark.net/2007/06/17-160735.html css Sun, 17 Jun 2007 16:07:35 +0900 CSS が valid でなければいけない理由 Lucky bag::blogさんが難しい、お題を投げかけている。

]]> http://blog.webcreativepark.net/2007/06/09-100515.html http://blog.webcreativepark.net/2007/06/09-100515.html css Sat, 09 Jun 2007 10:05:15 +0900 operaでのfloatの挙動 TPLHさんでOperaでfloat要素の後続が回り込まないとのエントリーを見て、気になったことをボクもエントリーしておこう。

]]> http://blog.webcreativepark.net/2007/04/09-225647.html http://blog.webcreativepark.net/2007/04/09-225647.html css float Opera Mon, 09 Apr 2007 22:56:47 +0900 BIR-もうひとつの画像置換 画像置換が普及し出した頃、一瞬だけ話題になって消えていったテクニックがあります。

それがBIR (Bob Image Replacement)とういうテクニックです。

]]> http://blog.webcreativepark.net/2007/02/19-230417.html http://blog.webcreativepark.net/2007/02/19-230417.html css Mon, 19 Feb 2007 23:04:17 +0900 画像置換に関する考え方 WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。

]]> http://blog.webcreativepark.net/2007/02/18-151202.html http://blog.webcreativepark.net/2007/02/18-151202.html css Sun, 18 Feb 2007 15:12:02 +0900 画像置換でメニューを作る 前回の画像置換で説明した通り、画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。

]]> http://blog.webcreativepark.net/2007/02/15-231434.html http://blog.webcreativepark.net/2007/02/15-231434.html css Thu, 15 Feb 2007 23:14:34 +0900 画像置換 個人的な意見ですが、ボクは画像置換が大好きです。

画像置換とは、html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事で、CSSでデザインを行う際にとても重宝する技術になります。

]]> http://blog.webcreativepark.net/2007/02/14-231226.html http://blog.webcreativepark.net/2007/02/14-231226.html css Wed, 14 Feb 2007 23:12:26 +0900 透過PNGの罠の解決法 AUSGANG SOFTさんが透過PNGの罠としてAlphaImageLoaderフィルターの問題点を指摘されています。

]]> http://blog.webcreativepark.net/2007/02/09-142542.html http://blog.webcreativepark.net/2007/02/09-142542.html css Fri, 09 Feb 2007 14:25:42 +0900 CSS Nite in Osaka 2007 春の陣 CSS Nite in Osaka 2007 春の陣
あのCSS Niteが大阪に再びやってきます。

ので、やっぱり、とあるWEBクリエイターのblogはCSS Nite in Osakaを応援します。

]]> http://blog.webcreativepark.net/2007/02/06-234631.html http://blog.webcreativepark.net/2007/02/06-234631.html css Tue, 06 Feb 2007 23:46:31 +0900 ボクにとってのCSSの利点 CSS HappyLifeさんでボクにとってのCSSの利点という素敵なエントリーを発見。

すてきな文章だったので思わずファンになってしまいました。なんか和む感じがいいです。

]]> http://blog.webcreativepark.net/2007/02/06-223829.html http://blog.webcreativepark.net/2007/02/06-223829.html css Tue, 06 Feb 2007 22:38:29 +0900 CSS Nite in OSAKA　Dreamweaverの作業効率を高める小技30発 by 鷹野雅弘 CSS Nite公式blogのほうで2006年11月25日に開催されたCSS Nite in OSAKAの資料の方が公開されました。
資料といっても『プレゼン資料』＋『プレゼン内容の音声データ』なので、セッションの中身がすべて堪能できる一式になっています。
興味のある方はぜひ見に行ってください。

]]> http://blog.webcreativepark.net/2007/01/28-224654.html http://blog.webcreativepark.net/2007/01/28-224654.html css Sun, 28 Jan 2007 22:46:54 +0900 tableの膨張を防ぐ【css tips】 table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。

]]> http://blog.webcreativepark.net/2007/01/25-231126.html http://blog.webcreativepark.net/2007/01/25-231126.html css Thu, 25 Jan 2007 23:11:26 +0900 画面の下部にフッターを表示する 動的サイトで画面の下部にフッターを表示する事は非常に困難です。
さまざまなパターンを想定してフッターを設定することになります。

]]> http://blog.webcreativepark.net/2007/01/18-235316.html http://blog.webcreativepark.net/2007/01/18-235316.html css css Thu, 18 Jan 2007 23:53:16 +0900 CSSで中央表示を実装する【css tips】 ブロックレベル要素の中央表示（センタリング）を行う際に、text-alignプロパティにcenterを指定して実装するのは間違いである。
なぜならtext-alignプロパティは、インライン要素の位置揃えを指定するためのものだからです。

]]> http://blog.webcreativepark.net/2007/01/16-233350.html http://blog.webcreativepark.net/2007/01/16-233350.html css Tue, 16 Jan 2007 23:33:50 +0900 CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。

vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。

2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。

]]> http://blog.webcreativepark.net/2007/01/11-214707.html http://blog.webcreativepark.net/2007/01/11-214707.html css Thu, 11 Jan 2007 21:47:07 +0900 vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。
特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。

テーブルレイアウトでよく使う以下のようなコードがある。

]]> http://blog.webcreativepark.net/2007/01/11-142005.html http://blog.webcreativepark.net/2007/01/11-142005.html css css table vertical-align Thu, 11 Jan 2007 14:20:05 +0900 floatした際に背景が消える件(IE編) floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。
逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。

]]> http://blog.webcreativepark.net/2007/01/08-231453.html http://blog.webcreativepark.net/2007/01/08-231453.html css Mon, 08 Jan 2007 23:14:53 +0900 floatした際に背景が消える件【css tip】 親ボックスに背景を適応して、内包する子ボックスに対してfloatを適応した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。

]]> http://blog.webcreativepark.net/2007/01/08-005218.html http://blog.webcreativepark.net/2007/01/08-005218.html css Mon, 08 Jan 2007 00:52:18 +0900 1カラムフィックスレイアウト【css tips】 もっとも単純なレイアウトになります。

]]> http://blog.webcreativepark.net/2006/12/25-224611.html http://blog.webcreativepark.net/2006/12/25-224611.html css Mon, 25 Dec 2006 22:46:11 +0900 ページをレイアウトする。【css tips】 ウェブページのレイアウトはあまりバリエーションはなく大きく別けると3つに分類できます。

1カラムレイアウト、2カラムレイアウト、３カラムレイアウトと呼ばれるレイアウトで、それぞれ、カラムつまり列の数が異なる。(コラムと発言する方も多いです)

]]> http://blog.webcreativepark.net/2006/12/25-221102.html http://blog.webcreativepark.net/2006/12/25-221102.html css Mon, 25 Dec 2006 22:11:02 +0900 スタイルを初期化する【css tips】 CSSでデザインしていく際に、ブラウザによりデフォルトのスタイルが異なる為困ることがあります。

有名なものではbody要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対して、Operaはpadding属性で再現しています。

]]> http://blog.webcreativepark.net/2006/12/22-005230.html http://blog.webcreativepark.net/2006/12/22-005230.html css Fri, 22 Dec 2006 00:52:30 +0900 CSS Nite in OSAKA　ザ・ルールズ・オブ・スタイルシート by 益子貴寛 ついにCSS Nite が大阪に上陸しちゃいました。

以下のような内容でした。

]]> http://blog.webcreativepark.net/2006/11/26-171516.html http://blog.webcreativepark.net/2006/11/26-171516.html css Sun, 26 Nov 2006 17:15:16 +0900 CSS Nite in OSAKA 2006年11月25日（土曜日）あのCSS Nite がついに大阪に上陸します。

なので『とあるWEBクリエイターのblog』では大々的に宣伝します。
やっぱ東京ばっかじゃなくて大阪でもガンガンやってほしいですね。

]]> http://blog.webcreativepark.net/2006/10/29-225935.html http://blog.webcreativepark.net/2006/10/29-225935.html css Sun, 29 Oct 2006 22:59:35 +0900 height100%のボックスを作成する。 xhtmlにおいてblock要素のheightプロパティに対して%で値を指定した場合反映されません。

サンプル

]]> http://blog.webcreativepark.net/2006/08/07-001200.html http://blog.webcreativepark.net/2006/08/07-001200.html css Mon, 07 Aug 2006 00:12:00 +0900 IEとそれ以外のブラウザでアルファ画像を使う方法 pngのアルファ画像をIE6とその他のモダンブラウザでアルファの画像を表示する方法

]]> http://blog.webcreativepark.net/2006/07/04-002817.html http://blog.webcreativepark.net/2006/07/04-002817.html css Tue, 04 Jul 2006 00:28:17 +0900 単一の要素に複数のclassを設定する方法 cssでは１つの要素に対して半角スペース区切りで複数のクラスを割り当てることができます。
使いどころが難しいのがたまに傷

]]> http://blog.webcreativepark.net/2006/06/26-012608.html http://blog.webcreativepark.net/2006/06/26-012608.html css Mon, 26 Jun 2006 01:26:08 +0900 cssで画像をプリロードする方法（改 以前このblogで取り上げたcssのみで画像をプリロードする方法ですが、実は画像のプリロードが全くできてませんでした(汗

]]> http://blog.webcreativepark.net/2006/06/22-235110.html http://blog.webcreativepark.net/2006/06/22-235110.html css Thu, 22 Jun 2006 23:51:10 +0900 IE7用のCSSハック Lucky bag::blogさんでIE7用のCSSハックのまとめを発見しました。

]]> http://blog.webcreativepark.net/2006/06/11-004328.html http://blog.webcreativepark.net/2006/06/11-004328.html css Sun, 11 Jun 2006 00:43:28 +0900 positionプロパティの考察 CSSの中でpositionプロパティは他のプロパティより異質です。
ですのでちゃんと意味を理解しないと使い方がまったく解りません。

]]> http://blog.webcreativepark.net/2006/05/01-004720.html http://blog.webcreativepark.net/2006/05/01-004720.html css Mon, 01 May 2006 00:47:20 +0900 cssでページの右上に広告を表示する。 当WEBサイト(旧サイトwebサイト+phpリファレンスの事です)右上に挿入している広告ですが
ブログのタグを複雑に変更して挿入しているものじゃありません。

]]> http://blog.webcreativepark.net/2006/04/29-020521.html http://blog.webcreativepark.net/2006/04/29-020521.html css Sat, 29 Apr 2006 02:05:21 +0900 cssのみで画像をプリロードする方法 PHPSPOTさんの記事を見て思いつきました。

]]> http://blog.webcreativepark.net/2006/04/28-144808.html http://blog.webcreativepark.net/2006/04/28-144808.html css Fri, 28 Apr 2006 14:48:08 +0900 CSSで無理やりfloatをclearする方法 MozillaやFirefoxで
『親ボックスに背景画像や背景色を指定して
　子ボックスでfloatが行われている場合
　親ボックスの背景画像や背景色は
　floatが行われない子ボックスまでにしか反映されない』
という挙動があります。

]]> http://blog.webcreativepark.net/2006/03/12-145730.html http://blog.webcreativepark.net/2006/03/12-145730.html css Sun, 12 Mar 2006 14:57:30 +0900 リンクをクリックした際に表示される点線を消す方法 リンクをクリックした際に表示される点線を消す方法です

]]> http://blog.webcreativepark.net/2006/03/03-013347.html http://blog.webcreativepark.net/2006/03/03-013347.html css Fri, 03 Mar 2006 01:33:47 +0900 フォントサイズはどうしましょう？ この業界で昔から議論される内容で、
『フォントの絶対指定にするか？相対指定にするか？』
というものがある。

]]> http://blog.webcreativepark.net/2006/02/25-235001.html http://blog.webcreativepark.net/2006/02/25-235001.html css Sat, 25 Feb 2006 23:50:01 +0900 MacIE用のHolly hack width:500px;//MacIEに対するcss
/*\*/
width:501px;//MacIE以外のブラウザに対するcss
/**/

]]> http://blog.webcreativepark.net/2005/11/29-171446.html http://blog.webcreativepark.net/2005/11/29-171446.html css Tue, 29 Nov 2005 17:14:46 +0900 formタグの余分な改行を取り除く formタグを使うと上部に余分な改行が入ります。
cssを使うことによりこの改行を取り除くことができますよ

<form style="margin: 0px;">

よく間違えてborder属性を弄ろうとしてしまいます

]]> http://blog.webcreativepark.net/2005/08/03-234927.html http://blog.webcreativepark.net/2005/08/03-234927.html css Wed, 03 Aug 2005 23:49:27 +0900 フォームへの入力を操作する フォームを作成する際に文字の制限ってどうしてます？
私はjavascriptとphpで確実に制限しているのですが、
ちょっとすばらしい方法を知ったので披露しときます。
cssを使って半角しか入力させない方法です。
【ソース】

■通常<br>
<input type="text"><br>
■CSS使用<br>
<input type="text" style="ime-mode:disabled">

【ブラウザ】

■通常

■CSS使用

IEでしか動作しなかったりと結構使いどころが難しいです。
phpやcgiなどのサーバーサイドでの処理を忘れずに。。

]]> http://blog.webcreativepark.net/2005/07/20-232601.html http://blog.webcreativepark.net/2005/07/20-232601.html css Wed, 20 Jul 2005 23:26:01 +0900