2006年10月24日

CSSだけで文字を省略する方法

久しぶりのブログ更新です。
最近は買った物を紹介してばかりでしたが、今日はまじめにCSSのお話。

先日、某SNSで見つけたネタなんですが、
見つけた時はCSSっておもしろいなぁ！と改めて思い知らされました。

で、見つけたネタなんですが、ボックス内に長ーい文字が入った時に、
文字（文章）をCSSのみで省略させるというもの。
よく、文末に「...」を付けて省略しますが、アレをCSSだけで表現しよう！！
という事です。

JavaScriptとかPHPとかPerlなどのプログラム言語で表現するが
当たり前なんですが、これをCSSだけでできるとは思いませんでした。

んで、その方法なんですが、以下のとおりです。

<p><span>hogehogehogehoge</span></p>

みたいなHTMLがあった時に、CSSで

p:after {
	content: "...";
}

span { 

	text-overflow: ellipsis;

	width: 100px;

	overflow: hidden; 

	float: left;

}

と書けばOKだそうです。
:afterはCSS2で追加された疑似要素というもので、
サンプルのCSSではPタグの後ろ（after）にcontentの内容 「...」を付け足します。

ただ、この:after擬似要素はWindowsのIEでは未実装なので、無視されます。
FireFoxはOKみたいです。
でも、WinのIEを使ってる人が多いので、正直これだけじゃ意味ないんですね。
そこで生きてくるのが、spanタグに設定した「text-overflow: ellipsis;」。
これはIE6以降に実装されている、テキストがオーバーフローした時に「...」で省略するというスタイル。

という事で、うまくFireFoxとIEの実装の違いを使い表現しているといったものです。
凄いですね。素晴らしいですね。

未実装なCSSは基本的にシカトしてきましたが、
上手く利用すればこういった技が使えるという事です。

ちゃんとCSSの仕様に目通して見るかーと思いました。

サンプルページ

※Operaでも動作確認できました。
※<span>の中の文字列は半角英数かつ連続した文字列である必要があるっぽいです。

投稿者 shiro : 01:50 | カテゴリー：Web | コメント (0) | トラックバック (0)

2006年8月21日

Web Designing 9月号

今日Web Designingの9月号を買いました。
特集記事が、「Webの常識統一試験」というもの。
名前の通り、Webの常識クイズみたいなものだったので、
簡単そうだなと思い、軽く挑戦してみたら全然わかりませんでした！！

何コレ！？意味分かんないんだけどって問題ばかり。
答えられる問題もあったけど、多分相当点数低そうです。
ちょっと基礎知識不足なのかなーと思っちゃいました。

【問題の雑誌Web Designing 9月号】

Webで今回の試験のダイジェスト版に挑戦できるみたいです。
http://book.mycom.co.jp/wd/exam/

さらに、CSS Zen Gardenの特集もありました。
CSS Zen Garden Bookの日本語版が9月に発売予定とのこと。
出たら即買います。

投稿者 shiro : 03:07 | カテゴリー：Web | コメント (0) | トラックバック (0)

2006年2月12日

winIEで透過pngを使う方法（メモ）

今ブログのデザイン作成中なんですが、どうしても透過pngを使いたくて、
winIEでの透過pngの使い方を探してました。

どうやらMicrosoft独自の「AlphaImageLoader」と言うのを使うと、
ブラウザがDirectX機能を使ってアルファチャンネルを持った画像が表示できるようです。

使い方は、CSS内の特定のセレクタに

filter: progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='PNG画像名',sizingMethod=scale);

と書きます。

でも、これだけだとwinIE以外のブラウザで画像が表示されなくなるので、
今度はwinIE以外に読み込ませるためのセレクタを作る必要があります。

winIE以外のブラウザに読み込ませるためには、子孫セレクタを使うのがいいようです。
子孫セレクタは下のように書きます。

*>セレクタ名 { プロパティ: 値; }

子孫セレクタを使い、winIE以外のブラウザに対するスタイルを書きます。

これでwinIE、その他ブラウザでも透過pngを表示する事が出きるようになります。

しかし、まだ問題点があります。
AlphaImageLoaderを指定したセレクタの中に、aタグがあった場合、
winIEでは正しくリンクが貼られません。

そこで、少し強引なやり方ですがaタグに対してpositionを使い、正しい位置に表示させます。

position:relative;
top:0px;
left:0px;

で正しくリンクされるようになるはずです。

もしも複数のaタグがある場合はaタグにID属性を付けて、それぞれのIDに対し、
positionを指定する必要があります。

投稿者 shiro : 01:37 | カテゴリー：Web | コメント (0) | トラックバック (5)

2005年12月31日

CSS本

毎月買ってるWebDesigningで連載中のCSS Analysisが遂に書籍化しました。
早速買ってきたんですが、見たこともないようなCSSのテクが載っているのでかなり重宝しそうです。

投稿者 shiro : 15:39 | カテゴリー：Web | コメント (0) | トラックバック (0)

2005年11月13日

便利なFirefoxのプラグイン

自分メモ
Firefoxで使ってるプラグインのリスト

All-in-One Gestures
Web Developer
Resize Search Box
Popup Alt Attribute
Sage
Reload Tab On Double-Click
Tab X
Search Button
LinkPreview
Tabbrowser Extensions

Firefoxのプラグインについてまとめたサイト
caramel*vanilla
Web制作に役立つFirefoxの拡張(1)
Web制作に役立つFirefoxの拡張(2)

投稿者 shiro : 18:46 | カテゴリー：Web | コメント (2) | トラックバック (0)