HiGash.Net ホームページへ戻る

Home [Blog] » CSS

CSS

背景画像じゃないのに1枚画像でナビゲーションを作る方法

背景画像じゃないのに1枚画像でナビゲーションを作る方法

もう2年近く前のエントリーなんだけど、今でも何気にアクセスが多いのが 僕がCSSによる “画像置換” を使わなくなった3つの理由 というエントリー。当ブログへのアクセスが一気に増えるきっかけとなったのが、このエントリーでした。

基本的にこの頃から僕のポリシーは変わってません。印刷用ページやモバイルのことを特に考える必要がないならば、画像置換はあんまり使わない。
だから画像はIMGタグで配置していくわけなんですが、今回はIMGタグでも背景画像を使ったCSS Spriteみたいなことができるよ、というのを参考までにご紹介。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

jQueryでブラウザ分岐してリセットCSSを作ってみた

jQueryでブラウザ分岐してリセットCSSを作ってみた

いよいよIE8への自動アップデート(キャンセルもできるので完璧に自動ではないけど)がはじまるらしい(もうはじまってる?)ので、IE8に対応したリセットCSSを作ってみることにしました。
いつまでもIE7互換モードでページ作るのも嫌だし。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む

WordPressプラグイン「Get Custom Field Values」でheadタグ内にCSS・JavaScriptを読み込む

今回は、前回のエントリーでもチラッと触れたWordPressのプラグイン Get Custom Field Values を使って、記事毎の<head>タグ内に個別のCSSやJavaScriptを読み込む方法をまとめてみます。

当サイトのように、記事によってテンプレート以外のCSSを当てたり、特定記事のみにlightboxなどのJavaScriptを読み込んだりしたい場合にこの方法を使うと便利です。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

Google Chrome向けにリセットCSSを微妙にアップデート

Google Chrome向けにリセットCSSを微妙にアップデート

かなりマイナーチェンジだけど、主にGoogle Chrome向けにほんの少しだけReset CSSとBasic CSSをアップデートしました。リセット用CSSに関する情報の需要は高くて、このブログを参考にしてくれてる人もいるみたいなので一応変更を加えたことを新規エントリーとして告知することにします。

対象ブラウザは、Internet Explorer 6.0 & 7.0、Firefox 2.0 & 3.0、Safari 3.1+、Google Chrome 0.3、Opera 9.27 & 9.5+です。Google Chromeを対象ブラウザに加えたほか、前回のエントリーからOperaが9.6に、Safariが3.2にそれぞれアップデートされていますので、それらも対象ブラウザに加えました。
使い方はもちろん変更無く、Reset CSS でブラウザのデフォルトCSSをリセットした後に Basic CSS を上書きして汎用的な基本スタイルを定義してあげます。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

IMGのalt属性・title属性について考える(後編)

IMGのalt属性・title属性について考える(後編)

今回のエントリーは前回に引き続き「IMGのalt属性・title属性について考える」の続編です。

「alt属性・title属性について考える」とか言っておきながら前回のエントリーは、イメージ画像はIMGかCSSの背景画像かという話に終始してしまった感があります・・・。エントリーの結論としては サイト制作時のポリシー次第 ということにしましたが、僕の場合はどちらかと言えばIMG派。
前編に書いた通り、Webページの背景ではなく前景にイメージ画像があるのだったら普通にIMGでいいんじゃないかと思うのです。さらに制作者サイドとして正直なことを言えば、画像に対してテキストの回り込みをする場合など、 制作面の技術的な難易度を考慮した際にIMGを使うほうが楽 というのも僕がIMG派である大きな理由です。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

Page Top