2007年06月24日

clearfixの決定版

XHTML + CSSでページをレイアウトしている場合、段落を左右に分割するのにCSSのfloatを使って、左右に寄せたりします。

単純なブログレイアウトみたいな大まかなレイアウトならば、あまり気にしませんが、従来TABLEでレイアウトしていたような、複雑なレイアウトを組もうとするとclear:both;を適当に入れてfloatを解除してあげる必要があります。

例えば、<br style="clear:both" />とか、<div style="clear:both"></div>とかなんてするんですが、BRの方は、まあまあいいかなと思うんですが、空DIVを作る方は、邪道な感じがします。

そこで、空DIVを作ることなく、floatを解除してあげようというのがclearfixというTips。

ようは、 .hogehoge:after { clear:both; } 見たいに :after を使って、DIVを閉じたところでfloat解除しましょうって事。
そして、各ブラウザでのレイアウトの違いを吸収してシンプルにコーディングする例が以下。

http://norisfactory.com/stylesheetlab/000038.php

CSS
floatの最後にclear:bothをつける事で、レイアウトのズレを解決するのを
CSSのみで、修正するTips

http://hato-style.chu.jp/note/note_20070614.html

MacIE 5向けの display: inline-table(inline-block) を全ブラウザに対して指定。その後同じセレクタ内で、コメントハックを使用しMacIE以外のブラウザを display: block にするようにした。

WinIE 7対応向けの指定を display: inline-block から min-height へ変更。

スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る −モダンブラウザ編−を参考にcontentプロパティを空にしてみた。よって after疑似要素の height と visibility を削除した。

IE向けのスターハックを削除。

WinIE 5〜6用に指定された height:1px 。他のモダンブラウザで正しい高さを算出させるために子供セレクタを使用して height: auto を上書き。

MonotaROブランド ショップ

香港ドメイン.hk

忘れないうちにメモ。

香港ドメイン(.hk)を取得する場合

香港ドメインには、その歴史上から中国ドメインとイギリスドメインがあります。

個人(Individual)で取得する場合
香港住民の証明番号が必要(日本で言う、住基台帳番号みたいなもの?)が必要。

法人・団体(Organizational)で取得する場合
香港の企業・団体である証明コードが必要。

ドメインを取得するには、これらの証明番号を提出し、確認をとった上で、有効になります。

昔、日本でもドメインの取得に郵送の手続きが必要だったりしましたが、香港の場合、さらに厳格に管理されているようです。

MonotaROブランド ショップ

Active Virus Shield をインストールしてみた。

アンチウィルスソフトを久しぶりに変更。

AOLの「Active Virus Shield  Powered by Kaspersky」です。
何がどうって、Kasperskyエンジンを使いつつも、フリーソフトだって事ですね。はい。

今までのアンチウィルス遍歴といえば、

AVG(GriSoft) → AVG Japan
アップデートの早さが、(当時の)ウリ。
本当に、毎日ウィルス定義がアップデートされるので、今までのNortonは、なんだったのかとw
英語版で使用だったが、いつかのアップデートで日本語化+有料化みたいになって、Avastへ移行。
※現在、日本語フリー版は、あるようです。

Avast! 4 Home Edition(ALWIL) → ALWIL 日本語トップ
日本語で使用できて、雑誌などでもよく取り上げられている人気のソフト。
PC雑誌のセキュリティ特集では、必ずといっていいほど取り上げられる、今や有名ソフト。
それだけ、広告費を使っているって事なのかな?
メールスキャナの警告がかなりウザイ。ネットワーク速度が3割程度低下する。などの理由で、他のアンチウィルスを探してみる事に。。。で、今回のAVSに移行です。
※AVSでネットワーク速度が快適になったかどうかは、未検証です。もしかしたらもっと重くなったかもw

Kasperskyって、いいみたいじゃないですか。
あと、AVSは、Windows起動時(ログイン前)から常駐してくれているみたいで、Windows起動画面の右上にAVSアイコンが表示されます。なんだか、守られてる感じ(気休め?)

MonotaROブランド ショップ

2007年06月15日

Windows Live Writer を試してみる(@MovableType)

Microsoftからブログ投稿ツールが出てました。

Betaが発表されたのが昨年の8月だから、かれこれ10ヶ月くらいたっているわけで、Beta発表当時のデフォルト日本語非対応は、すでに間然されていて、公式ブログでは、日本語版のダウンロードが可能でした。

公式ブログはこちら↓
Writer Zone:Windows Live Writer team blog

今までは、ブログの投稿にubicast Bloggerを使っていたんですが、Pingサーバーの指定が多いとタイムアウトしたり、カテゴリーの指定をしてもカテゴリー無しの投稿になってしまったりと、面倒が多かったんですが。。。

今回、Windows Live Writerの使い勝手はどうかと、テストも兼ねて、記事投稿してみてます。

 

まず、インストール後の立ち上げ画面から、かなりいい感じ。
配色関係は、Windows Live Messangerと同じ感じです(微妙に違いはあるけど)。

そして次にアカウントのセットアップですが、Windows Live Spacesは使ってないので、その他のサービスを選んで、ブログURLとMTログインアカウントを入力します。
そしたら、なんとURL、アカウント、パスワードの3つだけで、アカウントのセットアップ完了です!早い!ubicast Bloggerのようなややこしい設定が全くありません。
・・・っていうか、この状況(まだローカルで編集中)で、アップできるのか疑問なんですが。

それから、対応してほしいなーと思ったのが、追記入力欄が無いという事。
カテゴリーアーカイブなど、一覧で記事内容が見えてないと使いにくいので私自身、追記を使うことはほとんど無いのですが、意図的に使いたい時に無いのは、ちょっと不便かも。

あと、SEO的に神経質な人には、気になるのがHTMLソースがXHTMLになってない感じ。
普通のHTML4.01なソースで記事を書き出しているようです。(アップしたらXHTML準拠に変更されるなんてことないよなー。多分)

 

それから後で試してみたいのがコンテンツ引用機能。

Windows Live Writerをインストールすると、IE6の場合、MSNツールバーに。IE7の場合タブ横のツールに「コンテンツを引用」ボタンが追加されます。

このボタンを押すと、表示しているWebページを引用した記事テンプレートがWindows Live Writerで起動します。記事を引用してブログを書く際には、重宝しそうです。

 

じゃあの。

MonotaROブランド ショップ

2007年06月14日

Mid Pass Filterか、非XML宣言か

XHTMLのページデザインで、各ブラウザでの表示の違いをどうするかという事。

W3Cでは、XHTML文書の仕様でDOCTYPE宣言の前にXML宣言をする事を強く推奨されていて、 XMLバージョンの宣言が必須で、キャラクタエンコードは、UTF-8(またはUTF-16)以外の場合は必須であると定義されている。

ところが、IE6.0ではXML宣言がある場合ページの表示が「互換モード」(互換というよりもIE独自な気もしますが。。。) というものになって、表示がおかしくなってしまう。また、 さらに古いブラウザになるとXML宣言自身がページに表示されてしまうという問題もある。

よくあるのがスタイルシートに[ width | height ]と[ padding | border ]した場合にある。

IE6.0(互換モード)の場合
width,height,paddingを同時に指定してもオブジェクトの横幅(縦幅)は、width,heightの指定通りになる。

IE7.0、FireFoxの場合
オブジェクトの内容の部分に横幅(縦幅)の指定が利き、オブジェクト全体の横幅(縦幅)はwidth+paddingとなる。

そこで、このようなレンダリングの違いによるデザインの補正として「XML宣言しない」とか、「CSSハック」 を使用するといったテクニックが必要になる。

企業サイトなどでは、 jsでUAの違いごとにスタイルシートを振り分けてブラウザごとに最適化されたCSSを読み込ませるといった手法をよく見かける。

また、その他によくある方法としては、DIVにwidth,heightを指定し、その中のPでpaddingを指定するというもの。 width(height)とpaddingが同時に指定されていなければOKというもの。

またIE6以前の古いブラウザなどに関しては、Mid Pass FilterなんかのCSS実装のバグを利用したCSSハックでスタイルシートの指定を分けるといった方法がある。

  • 外部スタイルシートを読み込む<link>に「media="screen,print"」 と指定するとNN4.xは読み込まない。
    「media="screen"」でないとNN4.xは読み込めない。
  • IE4.0では、外部スタイルシートの「@import "?.css"」形式のインポートCSSを読み込めない。
  • IE5.0,5.5だけが読み込めるMid Pass Filterという裏技。
  • MacIEでは、「\*/」をコメントの終了として認識しない(認識できない)。
    「/* ?? \*/  (ここの部分のCSSはMacIEでは読み込まない)  /* */」

なんだか、探り出すとまだまだありそうだし、ブラウザの更新で、対応されてしまったり。 いろいろと面倒くさそうですが、まとめてきちんと整理しておこうと思う。

 

じゃあの。

Mid Pass Filterか、非XML宣言かの続きを読む

MonotaROブランド ショップ

2007年06月10日

北海道のSEO SEO対策のAXIS(アクシス)

いやはや、SEOアクセスアップとかタイトルつけておいて、さっぱりSEO関係の話がご無沙汰でした。

さて、今回は、北海道に本社のあるSEO業者AXISの紹介。

もともとは、グローバルリンクっているWeb系の会社のSEO部門だったところなのですが、グローバルリンク社の子会社として独立したのですが。
いつのまにかグローバルリンクの業績を上回った為か、もしくは他の理由からか、グローバルリンクがAXISに社名変更しています。

広告では、「最強のSEOが1日123円〜」で、よく目にする方も多いんじゃないでしょうか。

AXISのSEOも基本はバックリンクの調整をします。
あと、他のSEO業者にないサービスとしては、サイト内ページの最適化も標準で対応するという事。
ですので、契約の際は、FTP情報も用意します。

また、AXISのSEOの特長としては、良くも悪くも効果反映が早いということじゃないでしょうか。
SEOがハマッた時の検索順位の上昇も早いですが、外れた時の下落も早いです。

SEOが1日わずか123円から!! SEO対策のAXIS(アクシス)
http://www.seoaxis.com/

MonotaROブランド ショップ

2007年06月09日

3万円でサブノートPCという選択肢

3万円でノートパソコンが手に入るんですね。

実は、再生PCっていうカテゴリーになるんですが、専門のPCショップがリカバリー&再セットアップしているので、状態はしっかりしています。
内にあるノートPCは、もう5〜6年前のモデルなんですが、LINUXとFireFoxだけ入れてゲームしている時の攻略サイト閲覧用になっていたり。。。これでも当時は、15万円位していたんですが。

サブノートとしてもう1台買ってみてもいいかなと思いました。

  1. 堅牢性、安定動作なら定評の日本IBM製ThinkPad
  2. コンパクトなサブノートなら富士通のFMV
  3. NTT作業員の方も使っているNECのVersaPro
  4. マルチメディアに強い東芝のSatellite
ThinkPad A20m 2628-31J/32J(64MB)
ThinkPad A20m 2628-31J/32J(64MB)
28,800円(税込)
商品ページへ
カートに入れる
Cart by easyDS
FMV-650MC8/W(64MB)B5
FMV-650MC8/W(64MB)
B5

29,800円(税込)
商品ページへ
カートに入れる
Cart by easyDS
VersaProNX_VA70H/WX(64MB)
VersaProNX
VA70H/WX(64MB)

32,800円(税込)
商品ページへ
カートに入れる
Cart by easyDS
Satellite2250SA60C/4(64MB)
Satellite
2250SA60C/4(64MB)

29,800円(税込)
商品ページへ
カートに入れる
Cart by easyDS

いや、本当はVaioノートが欲しいんですよ。

最新のノートPCならWindows Vistaとか使えるじゃないですか。

MonotaROブランド ショップ