遅くなってしまいましたが、明けましておめでとうございます。昨年お世話になった皆様、本当に有難うございました。本年は小飛躍の年にしたいと思い、努力致す所存ですので、本年も宜しくお願い申し上げます。
—
さて、仕事に追われていたり、本サイトのリニューアルを進めていたりですごく時間が経ってしまいましたが、私にとって大変大きなニュースがあったため久々に更新します。
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。
(マイコミジャーナルより)
弊社では標準でクロスブラウザ対応を行っておりますので、サイト制作を行う際は必ず、複数のブラウザ・バージョンでのチェックを行います。その際W3C標準に従って記述をすると、いつも問題行動を起こしてくれるのがIE6です。(IE7と併せて問題が起きる場合の7割ほどはIEです。)問題の中には Javascript の動作も大きいのですが、正しく HTML, CSS を解釈してくれない場合も大変多いため、昔は大変苦労しましたし、かなり慣れている今でさえも、ごく稀にですが1時間ほどはまってしまうときがあります。
そんなときにこの情報は大変嬉しいものでした。更に Google Code に公開してくれているため、ダウンロードせずとも以下のコードで Google サーバから引っ張ってくる事も可能です。
<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js” type=”text/javascript”>
<![endif]–>
※「xx.x」の部分はバージョンなので、「2.0(beta)」を記述
ちなみに、IE5,IE6での透過PNG対応方法は下記の通り。
*-trans.png
まだテストも行っていませんし、beta 版との事ですのでお客様のサイトでの導入は要検討ですが、時間を見つけて色々と触ってみたいと思っております。
Tags:CSS Google Code HTML IE7.js Javascript W3C クロスブラウザPopularity: 10%
Posted on 2008/01/09 by koya
Filed under: メモ/データ, ブラウザ, CSS | No Comments »
SEO の常套手段として、CSS を用いて text-indent:-9999px; display:none; などでテキストを飛ばして(後者は消して)画像置換をするというものは取られてきていますが、Google にスパムと判断されるかどうかは世界中で議論されているところです。イグニスの見解としては、
画像の意味・テキスト≒置換テキスト
※完全一致しなくても目安として8割ほどの意味が同じ場合
であれば使用する。というものとしてきました。
最近、SEO 関連の案件で改めて調べてみたところ、Google がウェブマスター向けにガイドラインを更新したようなので、メモとして残してみます。
※Google から一部抜粋
[品質に関するガイドライン - 具体的なガイドライン]
隠しテキストや隠しリンクを使用しない。
- 白の背景で白のテキストを使用する
- テキストを画像の後ろに含める
- CSS を使用してテキストを隠す
- フォント サイズを 0 に設定する
との事でして、CSS によるテキスト隠しはスパムと判断されるとの事。
・・・・・・・
それだけで終わってしまってはこの記事の意味がないため、重要な部分を以下に記述。※これは正確な解釈でもなければ安全を保障するものでもありません。
Google のいつもの見解の通り、
「ユーザの利益(使いやすさなど)になるのであれば心配ない」
というものでした。※参考記事
ここでポイントとなってくるのは、どこまでが“ユーザの利益”になるのかというところだと思います。検索エンジンのためだけに使うのであれば、それはユーザの利益になりませんし危険かもしれません。ただ、出所は忘れてしまいましたが、画像の alt タグを読まなくなっているという話や、CSS ファイルもインデックス化されているという話を聞きますので、イグニスでは当初の通り、
画像の意味・テキスト≒置換テキスト
※完全一致しなくても目安として8割ほど意味が同じ場合
くらいの位置付けで様子を伺っていきたいと思っております。
Tags:altタグ CSS Google SEO spam スパムPopularity: 13%
Posted on 2007/08/07 by koya
Filed under: メモ/データ, CSS, SEO | 2 Comments »
以前にMultiple_IEs(Internet Explorerを複数インストール)をご紹介しました際に触れましたとおり、複数のブラウザでサイトを確認するの機会が非常に多いのですが、今回はIEとFirefoxで同時に表示確認できる[CSSVista]をご紹介します。
What is it?
CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. If you like this, you may be interested in our browser compatibility service, SiteVista. Yes, that’s why this software is free!
名前はCSSVistaですが、Windows XP でのみ動作するソフトのようです。興味がある方は下記URLからどうぞ。
http://www.sitevista.com/cssvista/
※インストールにはMicrosoft .NET Framework Version 2.0が必要となります。
導入手順(サイト見れば英語を読むまでもなくわかりますが)
- Microsoft .NET Framework Version 2.0をダウンロード&インストール
- CSSVistaをダウンロード&インストール
実際使ってみた感じ、インターフェースもわかりやすいし、良い感じだと思います。複数のブラウザを立ち上げるのがめんどくさい方や、メモリの関係上などにアプリケーションを絞りたい方にオススメです。
(各ブラウザの複数バージョンにも対応しているそうです。)
Tags:.NET Framework Version CSS CSSVista Firefox IE Win XP ブラウザPopularity: 14%
Posted on 2007/06/24 by koya
Filed under: メモ/データ, ブラウザ, CSS | No Comments »
弊社がサイト制作するときは、ユーザビリティやSEOの観点からtableコーディングをすることはなく、基本的にCSSコーディングを行います。そうした場合、更新管理まで任せて頂くか、CMSを導入させていただければ問題がないのですが、一番難しいのが、
「HTMLタグならわかりますので、自分で更新管理はします！」
「制作ソフトを使えば簡単に更新できるんですよね？？」
といったケース。(結構多いのですが、、)
そんなときにお薦めなのがこちらのCSS/HTML Converter。
もちろん、CSSの基本概念は勉強して頂かなければなりませんが、細かい要素などはHTMLとの対応状況を見ながら視覚的に覚えることが可能。(更には覚えなくても使うことができる。)
≪変換例≫
HTML(変換前):<font color=”#ff0000″ size=”12″>イグニス</font>
CSS(変換後):.mystyle {font-size=”12″ color=”#ff0000″}
もちろん、CSSに慣れている人には必要がないツールですし、細かいところまでテストしていないので詳細は不明ではありますが、なかなか便利なツールの一つだと思うので、紹介しておきます。
HTMLとCSSを相互変換するツール：CSS/HTML Converter
Tags:CSS HTML ユーザビリティPopularity: 11%
Posted on 2007/06/12 by koya
Filed under: メモ/データ, CSS | No Comments »
マルチブラウザ対応でサイト構築をするとき、正しい構文でXHTMLやCSSを書いていれば、ある程度ブラウザに依存しないサイトができるのですが、まだまだIE6のシェアが多い昨今において、“正しいだけ”では思ったような表示ができないのも事実。そんなときに活躍するのが「CSSハック」。その中で今回は最もシェアが高いIE6のバグを回避する際にあてるもの。
IE6はCSSを正しく解釈してくれないバグが多いブラウザで有名なのですが、その中で子供セレクタ(「>」)を理解できないのを利用します。
.cont h2.class{
/*ここはIE6用を記述*/
color: red;
}
.cont>h2.class{
/*それ以外のモダンブラウザ(IE7やFireFoxなど)で書き換えたい内容を記述*/
color: blue;
}
（上記はサンプルですので、通常このように利用することはありませんが、）IE6では子供セレクタを読み込まないため、青に上書きされず赤のまま残り、それ以外のモダンブラウザだと、青で上書きされるため青が表示されます。
Tags:CSS IE6 Internet Explorer XHTML ハックPopularity: 10%
Posted on 2007/04/30 by koya
Filed under: メモ/データ, ブラウザ, CSS | No Comments »
