最新情報  

IE7.js 2.0Beta(最新版)の公開

遅くなってしまいましたが、明けましておめでとうございます。昨年お世話になった皆様、本当に有難うございました。本年は小飛躍の年にしたいと思い、努力致す所存ですので、本年も宜しくお願い申し上げます。

さて、仕事に追われていたり、本サイトのリニューアルを進めていたりですごく時間が経ってしまいましたが、私にとって大変大きなニュースがあったため久々に更新します。

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:

Popularity: 10%

[SEO] Yahoo! Google 推奨 HTTP 301 リダイレクト(URL変更)

SEOが叫ばれて数年経ちますが、何でもかんでもSEOのためのサイト構造で、サイトマップをSEOの観点からの重要性によって変化させるなど、個人的に一線を越えた(と思われる)施策には少し戸惑いながらも日々色々な施策を練っております。
※上記も含め私個人の見解でありますが、Googleなどは「その検索キーワードに対してより適したサイト」を抽出するために、日々検索エンジンアルゴリズムを進化させていますので、ディレクトリを強引に変化させたり、凡そ関連が濃いとは思えないサイトからのSEOのためのリンクファームは効果が薄いどころか、ゆくゆくは排除されていくものだと考え、すぐに成果は上がらなくとも、弊社では正攻法をお薦めしております。

最近数件取り扱った案件で、リニューアルやURL変更時のリダイレクトがあり、調べたこともありますので、メモとして残しておきます。

リダイレクトの種類

HTMLによるリダイレクト

ページごとにHTMLヘッダのmetaタグに以下の記述を加えます。

<meta http-equiv=”refresh” content=”10;URL=http://www.ignis.co.jp/”>

※10秒後にhttp://www.ignis.co.jp/にリダイレクトしたい場合。
メリットはHTML上で記述できるので初心者にもわかりやすい点ですが、特に0秒リダイレクト時などにスパム扱いとなるという話も聞きますし、何よりページ数が多い場合が問題です。

.htaccessによるリダイレクト

サーバ上に以下の記述の.htaccessファイルを作成します。

Redirect permanent /old/ http://www.ignis.co.jp/new/

※/old/ディレクトリにアクセスがあった場合、/news/にリダイレクトしたい場合。
個別ファイルには対応できませんが、ディレクトリ構造を残したまま移転できるのがメリットです。

/old/contents2.htmlは/new/contents2.htmlにリダイレクトされます。

(ただし、HTML同様にこの方法でもスパム扱いになったケースも存在するようです。)

■続きの内容:「Yahoo!,Googleが推奨しているリダイレクト方法とは?」


Tags:

Popularity: 17%

CSS入門時にお薦め!HTMLとCSSを相互変換する

弊社がサイト制作するときは、ユーザビリティや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:

Popularity: 10%

透過(透明)PNGのブラウザ対応状況

ちょっと複雑なレイアウトを組む際、キレイにHTMLコーディングするために、透過(透明)GIFや透過(透明)PNGを利用するのですが、透過PNGのブラウザ対応状況が微妙で調べてみたのだけど、あまりまとまっているサイトがなかったためメモを残してみる。(GIF形式でも透過処理はできるのだけど、さまざまな背景の上でもドロップシャドウなどををキレイに見せるにはアルファチャンネルのPNG画像である必要があるため)

≪透過(透明)PNGブラウザ対応状況≫
IE6以下:PNG8→角が荒い(PNG24→透過できず)
IE7[for Win]:キレイにいける
Gecko/Mozilla(Sleipnir)[for Win]:キレイにいける
Safari2.0.4[for Mac]:キレイにいける
FireFox2[for Mac]:キレイにいける
Opera9[for Mac]:キレイにいける

IE7の透過PNG対応はPNG愛好者(?)にはいいうれしい話なのだけど、先日のブラウザシェアからすると、まだまだ未対応がメジャーだと思っていた方が無難なようだ。

■続きの内容:「Javascriptハックや保存形式による回避など」


Tags:

Popularity: 20%

[Multiple_IEs]Internet Explorerを複数インストール

最近とにかく制作案件が多く、特にデザイン関連よりもHTMLコーディングに追われる事が多い。今月に入って何ページHTMLコーディングを行ったのだろう。。

XHTML+CSSコーディングのノウハウもかなり溜まってきて、(この辺はいつか時間が出来たらまとめようと思いながらも、たぶん伸び伸びになるのだろう)今ではシンプルなソースで思い通りのレイアウトにする事は結構容易いのですが、常に考えるところがブラウザチェック。

≪現在のブラウジング環境≫
1.IE7(Sleipnir)[for Win]
2.Gecko/Mozilla(Sleipnir)[for Win]
3.Safari2.0.4[for Mac]
4.FireFox2[for Mac]
5.Opera9[for Mac]
6.MacIE4.7[for Mac]

■続きの内容:「ブラウザ確認便利ツールやブラウザシェアデータなど」


Tags:

Popularity: 10%