CSSの最近のブログ記事

画像をCSSでキレイなサムネイルに

aki (2009年3月21日 05:39) | コメント(0)
CSSで指定するだけで、ギザギザしないきれいなサムネイルになるのだそう！便利。。。

img.thumb { -ms-interpolation-mode: bicubic; }

http://devthought.com/tumble/2009/03/tip-high-quality-css-thumbnails-in-ie7/

ホームページ制作マッチングのメルマガより

Byte-Order Mark found in UTF-8 File.

aki (2008年8月 3日 19:39) | コメント(0)
This Page Is Valid XHTML 1.0 Transitional!

と言われているものの

Passed validation, 1 warning(s)

↑OKですよ！でも警告アリ。と出てしまって、こんな表示。

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

あまりバイトや文字コードなど積極的に考えないほうですが、
ちゃんとutf-8で保存してるんだけどな。。。

理由がわからず、とりあえず全文コピーして、秀丸で新規作成して同じ文字コード、同じファイル名で上書き。

すると、警告が出なくなりました。
なんだかよくわからない。。

画像で送信ボタンを作り、文字だけテキストを表示するには

aki (2007年12月20日 20:01) | コメント(0)
フォームの中で、送信ボタンを画像にするには、
<input type="image" src="sample.gif" alt="送信">

ですが、文字だけテキストを表示するには
<input type="button" style="background-image:url('img/button.jpg');width:80px;height:35px; border:none;font-weight:bold;" value="次へ">

自分では思いつかなくて、掲示板に投稿して教えて頂きました。
ほんと感謝です。

text-indent: -9999px;がきかなくなったこと、ありませんか？

aki (2006年9月21日 06:33) | コメント(0)
表示項目を文字ではなく画像にしたい場合、テキストを「text-indent: -9999px;」で表示させなくします。

例：
h2{
background: #ffffff url(../img/header.gif) no-repeat;
width:90px;
height:20px;
margin:0;
padding:0;
display:block;
text-indent: -9999px;
}

でも先日、この記述がきかなくて、文字が画像の上に表示されてしまうことがあったんです。

理由がわからなくて、しばらく悩んでいたのですが。。。

原因は、この要素を配置する、一段上位の要素に書いた「text-align: right;」でした。

つまりhtmlで、

<div id="header">
<h2>見出し</h2>
</div>
と書いた場合に、cssで
#header{
text-align: right;
}

と設定していたのです。
このheaderの記述を外したら、意図したように表示されました。


text-alignとtext-indentは同居できない。

なかなか気づかず、随分悩んでしまいましたが、原因はこんな簡単なことでした。

CSSをチェックする。

aki (2006年7月29日 17:31) | コメント(0)
サイトのCSSがW3Cに準拠しているか、チェックできるサイトがあります。

W3C CSS検証サービス

正当なCSSとして検証されると、アイコンをはることができます。
私もWebartonのサイトにはっています。

開発して下さった方に感謝！

ホームページ制作・WEBデザインのwebarton（ウェバートン）

テーブルを使わずに、画面の中央に表示する。

aki (2006年7月18日 21:49) | コメント(0)
コンテンツを画面の中央に表示したいとき、テーブルを使ってレイアウトするのが主流だった数年前までは、テーブルの中央に表示すればOKでした。しかし現在はHTML＆CSSが主流なので、テーブルを使わない配置を考えなくてはなりません。

HTML＆CSSでは、このようにコーディングします。
幅760px、高さ560pxを画面中央に配置する場合

html側
<body>
<wrapper>
//表示させるコンテンツ
</wrapper>
</body>

CSS側
body{
margin: 0px;
padding: 0px;
}
#wrapper{
width:760px;
height: 560px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -380px;
margin-top: -280px;
}

ホームページ制作・WEBデザインのwebarton（ウェバートン）
« CGI | メインページ | アーカイブ | fairtradeshopping »

ところでワタクシ

こんにちは、久保明子です。フリーランスでweb制作の仕事をしています。印刷関係担当の相棒と二人でwebarton(ウェバートン)という名称で働いてます。
サイトはこちらです。http://www.webarton.com/

それから、フェアトレードのショッピングサイトも運営していて、オーガニック＆ハンドメイドのソープやボディケア商品を扱っています。お取引くださるお店募集中です！
http://fairtradeshopping.jp/


検索

このアーカイブについて

このページには、過去に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

前のカテゴリはCGIです。

次のカテゴリはfairtradeshoppingです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。