アストロデオブログ » CSS

cssで文字をドロップシャドウさせる

hayachi — Sun, 28 Nov 2010 19:53:24 +0000

以前紹介したドロップシャドウcssがありましたが、文字のドロップシャドウがあるのを知ったので
ちょっとメモ

細かく指定する時はこんな感じ

これを指定したらどのようになるのかちょっとスクショとり忘れてしまったのでわかりうらいですが、
見出しを少しデザインするにはいいかもですね＾＾

displey:table-cellを使ったレイアウト

hayachi — Tue, 16 Nov 2010 18:01:40 +0000

iPhoneサイトを制作しているときに使用した「displey:table-cell」自分も若干理解していない部分があったため復習のためにまとめてみました。

Table-cellとは簡単にいうとcssだけでテーブルの構造ができるプロパティでTable-cellはhtmlタグでいうtd ,thタグの部類になります。

左のサイズが固定の３カラムレイアウトの場合

html

css

その他の部類はこんな感じ

ちょっとこれで理解ができました(・ω・´)
よかったよかった(´ω｀＊)

面倒くさくないフォームの作り方。

hayachi — Sun, 14 Nov 2010 17:54:18 +0000

フォームのコーディングする時テキストバーとボタンの画像がなかなか揃わなくてパディングをいじったりマージンいじったりしていました。
そんなcssの微調整せずにできるフォームの作り方を紹介します。

まず全体の画像とボタンだけの画像２つを用意します。

form.jpg

form2.jpg

html

ボタンに画像をつけます。

css

Form-bodyのは池に全体画像を張り付けtextとsearchの場所をfloatすればできあがり＾＾

cssでドロップシャドウ

hayachi — Sat, 30 Oct 2010 17:17:08 +0000

css3でグラデーションや角丸の他になんかcss上でデザイン出来ちゃうものあいかなと思い探してみました。
ちょっとメモがてらに紹介したいと思います＾＾

css

こんな感じになります＾＾

画像も使わず立体感のあるボタンが作れそうですね
友人と制作している個人サイトに使ってみようと思います＾＾
一応デザインができているので早くコーディングせねば；；

画像１枚でロールオーバー

hayachi — Wed, 27 Oct 2010 18:23:56 +0000

今まで１つのボタンにわざわざ２枚の画像を用意してロールオーバーさせていました；
どのボタンのロールオーバーの画像だかわからなくなっちゃったりしたので１枚の画像でできるロールオーバーを紹介したいと思います。

画像はロールオーバーしたものも一緒にして１枚で保存します。

html

まずはulとliにidを指定します。

css

全体のソース

ボタンのソース

今回間違えて同じラベリングで作っちゃいましたが#navi2や#navi3にも同様にコピペしてimage背景を変えれば出来上がりです＾＾

他にも全体のボタンを丸ごと１枚で保存してｃｓｓで場所を指定する方法もありました。
もしかしたらそっちのほうが１枚ですしいいかもしれない…いつかやってみようかと思います＾＾

cssでグラデーションを作ってみた。

hayachi — Thu, 21 Oct 2010 12:10:30 +0000

フォトショでグラデーション作るのまんどくせ(・8・)
まじまんどくせ(・8・)
切り出すのもまんどくせ(・8・)

と思い試しにcssだけで作ってみました。

上からのグラデーションの場合

html

css

左からのグラデーションの場合

html

css

中心からのグラデーションの場合

html

css

これ使ってちょっとした見出しができて便利＾＾
でも対応してないブラウザのバージョンがあるためあまり使用することはお勧めできないかもです　っ(・ω・｀)

iPhone4でも画像をキレイに表示する方法

hayachi — Wed, 13 Oct 2010 10:33:18 +0000

iPhoneとiPhone4では解像度が違うらしい、iPhone4では画像を２倍の解像度で表示されてしまい折角のデザインが台無し(・ω・｀)
そんな時は画像をあらかじめ２倍の解像度で切り抜き今度はiPhoneでおっきく表示されないようにcssで大きさを指定してあげればできあがり＾＾

背景画像の場合は

で、たぶんできるはずです

iPhon4ってちょっと面倒くさい　っ(・ω・｀)

IE6にpng透過を対応させる　その２

hayachi — Wed, 15 Sep 2010 10:32:43 +0000

前回書きましたが、今回はロールオーバさせている画像を反映させる方法をメモしたいと思います。

html

htmlのhead部分

css

あれ？普通に簡単だった　(・ω・｀)
とりあえず再確認できたのでよかったです。

これとは別のはなしになりますが最近個人サイト作りたくなりまして、デザインは自分でプログラム担当は隣の席にいる同僚とでやろうかなと考えています。
TOPのデザインは連休中に制作する予定です＾＾
おらわくわくすっぞ(´◉◞౪◟◉｀)

角を丸くするcss

hayachi — Mon, 06 Sep 2010 12:00:39 +0000

切りだしするのが面倒くさいので試しに使ってみました。

でできるみたいです。

ポイントごとは

Fire Fox

Safari

こんな感じ

切りだす手間が省けるのはいいが
IEは対応してないという…　っ(・ω・｀)
やっぱ切りだすしかないですかね　っ(´・ω・｀)

ドコモのケータイでCSSを効かせる

マッチー — Mon, 08 Mar 2010 09:06:51 +0000

ケータイ向けのページを作っていて、実機テストなんかをしてみると、何かドコモの端末だけスタイルが効いていない、みたいな事態に遭遇することがあるかもしれない。っていうか、あった。

まあ理由はよく分かんないんすけど、ドコモのケータイはＣＳＳを使うのにちょっち面倒な手続きが必要みたいです。

まずはＸＭＬ宣言やらＤＯＣＴＹＰＥの記述から。

DOCTYPEの書き方はこれ一通りではないようなんですが、その辺はちょっと詳しくないので、今回は僕がデザイナーからもらったhtmlファイルに書いてあったのをそのまま載せてみました。

ちなみにPHPでこれを書くと、１行目ののところでparse errorが出るかもしれない。っていうか、出た。

これはphp.iniでshort_open_tagってのがOnになっていると、と書くところをと書いても良いような設定になるらしく、つまりがPHPタグと判定されてエラーになるみたいです。

だからこのshort_open_tagをOffにすれば問題は解決する。

みたいな感じで回避しちゃっても良いかもしれない。

それから、ドコモ端末は外部ＣＳＳを読み込んでくれないという、江戸時代の鎖国みたいなノリがあるらしいので、必要なスタイルはstyle属性を使って記述しないといけないっぽいです。量がある場合は大変ですよね。まあ、中には例外もあるみたいですが、どんな例外があるかは申し訳ないですけど調べてませんので、ここでは省略。

あとは拡張子の問題もあります。ＣＳＳを使うには拡張子を.xhtmlにする必要がある。

ただこれも、PHPを使う場合は、拡張子を.xhtmlにじゃなくて.phpにしないといけないから、別の方法を使わないといけません。

こんな感じでheader関数を使って出力してやれば、何とか大丈夫です。

詳しいことは以下のサイトさんに書いてあります。

http://ke-tai.org/blog/2008/04/03/docomocss/

http://digibot.jp/blog/archives/2004/08/phpxml_1.html

アストロデオブログ » CSS

cssで文字をドロップシャドウさせる

displey:table-cellを使ったレイアウト

html

css

面倒くさくないフォームの作り方。

html

css

cssでドロップシャドウ

css

画像１枚でロールオーバー

html

css

全体のソース

ボタンのソース

cssでグラデーションを作ってみた。

上からのグラデーションの場合

html

css

左からのグラデーションの場合

html

css

中心からのグラデーションの場合

html

css

iPhone4でも画像をキレイに表示する方法

IE6にpng透過を対応させる その２

html

htmlのhead部分

css

角を丸くするcss

Fire Fox

Safari

ドコモのケータイでCSSを効かせる

IE6にpng透過を対応させる　その２