スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法

IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法

Tip: High quality CSS thumbnails in IE7 [Devthought]
[情報元:画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌]

HTMLで画像サイズを強制的に縮小表示させても、きれいに縮小した画像を表示させるCSSテクニックが紹介されています。対象となるのはIE7。ちなみにFirefoxやGoogle Chromeはこのようなテクニックを使用しなくてもきれいに表示されるそうです。初めて知った・・・。

小さい画像を表示する場合、通常はあらかじめ縮小した画像を用意しておきますが、このテクニックを用いれば、場合によってはサムネイルの作成の手間を省くことが出来ます。ただ、実際には表示が縮小されていても、元の画像をそのまま読み込ませているため、ページの構成によってはかえって転送量が増えてしまうことにもなります。(表示が縮小されているだけで、縮小された分だけ容量が自動的に小さくなっているわけではない、ということ。ここがサムネイル画像を用意したときとの決定的な違い。)

詳細は以下のとおり。

>続きを読む
スポンサーサイト
Posted at 2009年03月22日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

IE6でよくぶつかる6つのバグ・仕様の解決方法

[CSS]IE6でよく遭遇する6つのバグとその解決方法 [コリス]

IE6でよくお目にかかるバグ及び仕様に対する解決策が6つ紹介されています。

紹介されているものは以下の6つ。

>続きを読む
Posted at 2008年04月29日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

様々なレイアウト問題を解決する8つの1行CSSテクニック

8 Premium One Line Css Tips | Css Globe
[情報元:いろいろな問題を解決する1行のスタイルシート集 (コリス)]

様々なレイアウト上の問題を解決してくれる8種類の1行で済むCSSテクニックです。ものによっては若干応用が必要かもしれませんが、それほど難しくないはずなので覚えておくと便利です。

以下、ほとんどリンク先のコピペに近い解説。コードが分かりやすいように改行していますが、もちろん改行せず1行で記述してもOKです。

>続きを読む
Posted at 2008年03月16日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

【tumblrより】margin/padding/borderの関係を分かりやすく示した画像

THE BOX MODEL
THE BOX MODEL

一発ネタに近い感じですが、初心者が混乱しがちな「margin」「padding」「border」の配置関係を分かりやすく示した画像です。

>続きを読む
Posted at 2008年01月31日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

テキストにグラデーション効果をつけるCSSテクニック

CSS Gradient Text Effect

CSS Gradient Text Effect
[情報元:[CSS]テキストにグラデーション効果をつけるスタイルシート (コリス)]

画像を作ることなく、テキストにグラデーション効果を与えるCSSテクニックが紹介されています。

>続きを読む
Posted at 2008年01月18日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

可変レイアウトの一種:エラスティックレイアウトとは?

エラスティックレイアウト

つい最近、『エラスティックレイアウト』というレイアウト手法を聞いたので、少し調べてみました。

>続きを読む
Posted at 2007年10月25日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

IEでmin-widthやmax-widthを実現するCSSテクニック

The Perfect Fluid Width Layout

The Perfect Fluid Width Layout - CSS-Tricks
(情報元:[CSS]IEで、min-widthやmax-widthを実現する方法 | コリス

幅の最小値と最大値を設定するmin-widthやmax-widthをIEでも実現するCSSテクニックが紹介されています。

>続きを読む
Posted at 2007年10月13日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

リンク先や拡張子ごとにリンクのアイコンを変更するCSSの書き方サンプル

[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
::: Web-Kreation.com ::: Freelance Web Designer

リンク先や拡張子によって、リンクに結びついたアイコンを変更するCSSのサンプルが紹介されています。CSSってこんなことまで出来るのか、という驚きを感じさせられるテクニック。Dreamweaverなどのソフトウェアだけで記述しているような場合は、決してお目にかかれないテクニックといえます。

CSSテクニックの奥深さを見せつけられました。

Posted at 2007年09月27日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

CSSでテーブルをかっこよくデザインした『A CSS styled table version 2』

デザイナーならこう作るCSSスタイルテーブル『A CSS styled table version 2』 | CREAMU

CSSでテーブルをかっこよくデザインしたサンプルが紹介されています。テーブルタグを使わずにCSSでテーブルのような表を作る、というのではないのでご注意を。

今までテーブルのborderをCSSで指定するときにどうしてもうまくいかないというか、上下左右どのように指定するのがいいのか分からなかったんですね。

例えば、<td>タグに対してCSSでborderを上下左右に1pxとして指定したとすると、隣接しているセルのボーダーが重なってしまって、そこだけ線が太くなってしまうという問題がありました。

当時は無理やり解決させたか、あるいはCSSでテーブルをデザインするのを放棄したんですが、今回このCSSのコードを見て「あーこうすればいいのか」とすごい納得してしまいました。確かにこうすれば、最小限の記述でCSSもHTMLもきれいになるな、と。

テーブルをきれいにデザインしたい方は必見です。

Posted at 2007年08月24日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

CSSによる2カラム、3カラムレイアウトの分かりやすい解説サイト

スタイルシートによる崩れない 2カラム 3カラム・レイアウト

CSSで2カラムや3カラムのレイアウトをする際の解説が、サンプル付きで紹介されています。

単に2カラム・3カラムのレイアウト方法を解説しているだけでなく、悪い例やコードサンプルまで併記されていて、非常に分かりやすいです。 3カラムレイアウトは今まで練習くらいでしか作ったことがなかったので、復習も兼ねることができ、勉強になりました。

CSSレイアウトするときになぜかレイアウトが崩れてしまうという初心者の方はかなり参考になると思います。

Posted at 2007年07月30日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
Home | 次ページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。