【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

30Jan2012

画像のとなりにテキストを表示する方法[CSS初級編]

画像のとなりにテキストを並べる、よく見かける王道のページデザイン。
いわゆる「段組レイアウト」です。

「tableレイアウトで作っていたけど今後はCSSで作りたい。どうやるの?」
という質問がありましたので、こちらで手順を紹介します。

1. まずはtableで作る

バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑

この記事を読む

29Jan2012

メニューボタンを作りなおしてサイト高速化[CSS sprite]

今回はCSS spriteと呼ばれる手法で、トップメニューを作ってみます。

CSS spriteとは、複数の画像パーツを一つの画像として読み込みCSSで表示位置を調節する手法です。

言葉だと意味不明なので、実例を紹介しましょう!

現在(2012.01)、PetitCottageのトップメニューはCSS spriteで製作しています。
CSS sprite

CSSのみで動きを制御している一般的なメニューボタンですが、使用している画像は以下の1枚だけです。

CSS spriteの作り方と使い方

この記事を読む

10Nov2011

マイナーなCSSプロパティをリストにしてみました

今日は仕事がお休みだったので、大好きな本屋で情報収集(ブラブラ)していました。
仕事柄やはり気になるPC書籍コーナーで普段は触らないCSSのリファレンスを手にとって見てみると、今まで一度も使ったことのないプロパティがいくつかある事に気づきます^^;

そんなに多くないCSSプロパティ。一度も使ったことがないのはイカン!という事で、自分の勉強もかねて「これはマイナー・・・」と思うプロパティをリストにしてみました。今後も使うかはわからないけど、お勉強お勉強。。。 笑

みなさんは全部使ったことがありますか?

この記事を読む

29Aug2011

IEでCSS3を使える用にするライブラリ CSS3 PIE

jQueryプラグインブック―「軽量」「高機能」 JavaScriptライブラリの導入と活用! (I・O BOOKS)
Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
マンガでわかるJavaScript
–PR–

誰かIEを褒めてあげる人いませんか?いませんよね・・ by"ty"

ブラウザ界の大問題児「Internet Explorer君」はCSSという外国語を全然理解してくれないアホな子。

という事は周知の事実だと思います。

IE君も頑張ってお勉強をして9歳でやっとCSS3を理解できる様になったとはいえ、

一般ユーザー(特にここ日本のユーザー)のシェアは半数以上がCSS3を理解できないIE6~8が占めています。

web制作をする側の人間から言うと、CSS3はめっちゃ便利!

便利なのに、(EUでは過去に訴訟問題にもなったほど不当な)IEの寡占状態によって使えない!! ※記事末尾で注釈します

そんなフラストレーションの溜まる現状が続いている制作現場ですが、とある事情でどうしてもCSS3を使う必要に迫られてしまいました。

tyの本職であるネットショップ「PetitCottage」の、ある一つのカテゴリをWordPressで作り替えようとしている時のお話。

良質な海外アーティストの有料デザインテーマを導入したのですが、これがなんとCSS3でコーディングされていました。

有料だけあって細部まで作りこまれている為、これをCSS2でコーディングし直すのは手間もかかるし無理も出てきます。

こうなったらIE用にだけ違うCSSを作るか? と思っていた最中、このライブラリの存在を知りました。

CSS3 PIE

開発元サイト http://css3pie.com/

これを使うと、CSS3で書かれたコードに数行追加するだけで、IEでも見た目を同じにできます!

作業の具体的な進め方は、以下のリンク先が参考になりました。

All About IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方

↑ 基本的な部分はこのサイトの説明だけで足ります。記事もプロ意識を持ってしっかり書かれている為、まずはこちらを参考にしては?

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

↑ こちらもオススメ

CSS3 PIE(PIE.htc)が上手く動作しない際の注意点

↑ 動作しなかった場合のトラブルシューティングに。。

tyの場合、設置・コード編集作業は5分ほどで出来ました。

しかし、実環境で動作確認した所、

一部の背景が指定の通りに表示されない
(no-repeat指定なのにrepeatされる)
(背景画像が指定の場所からスタートしない、ずれる)

Chrome版IEタブでは一切動作しない
(サブ機のChrome/IEタブでは正常動作・・??)

などなど、不安定な一面も。。

期待してたのにっ!! という泣き出したい気持ちの時は、この言葉を思い出してください。

ハナからCSS3が使えないあの地獄の現場から、CSS3 PIEは遙か天国に近い場所に一瞬で連れてきてくれたんだ・・・

細かいバグは自力でなんとかしましょう (笑

ちなみに先述のバグの大半は、自分のコーディングミスでした^^;

※EUでのMS訴訟問題

MicrosoftによるOSの事実上の独占状態が続く90年代前半からEUで指摘されている独占禁止法違反問題。
(2009年IEの訴訟に関しては)自由な競争が求められるブラウザを独占状態のOSにバンドルする事が独占禁止法に抵触している、というEUの指摘は「OSインストール時にブラウザを選択できる様にする」というMicrosoftの申し出をEUが受け入れる形で同年に和解した。

参考:[Wikipedia]マイクロソフトの欧州連合における競争法違反事件

4 / 41234