SKILL MEMOの最近のブログ記事

事務所では、いまだにメインのWEB制作マシンとして稼動しまくりのWindows XPですが、自動アップロードの設定にしていたマシンでは、いつの間にかXP用のメイリオフォントがインストールされておりました。

何をいまさら、と思われる方も多いとは思いますが、弊社の環境ではまさにいまさらでした。

このブログがスタートした頃、CSSでのフォント設定は何がベストなのか？という事をいろいろ試していたため、WINDOWSのメイリオ有りの環境ではメイリオを優先させているのですが、最近では先日購入したASPIRE 1410で更新する事が増え、公開画面もMacかWindows 7でしか見ていませんでしたので、全く気がつきませんでした。

ちなみに現在ではCSSにフォントファミリーはほぼ設定しないのが弊社の標準です。
最低限、ゴシック系とだけ設定しています。
いろいろと一通り試した結果、そう落ち着きました。
このブログは最近の弊社ではちょっと標準外です。

といった状況もあり久しぶりにXPのIE6で以前制作したWEBサイトを見て、いまさらですが「アレ？」と気がついた次第でした。

ただ、どうもXP環境でのメイリオは荒れて見える。
やはりあまりおススメはできないようです。

フォントファミリーに指定するとしても、社会的にWindows 7が標準になってからでしょうか。

Movable Type 5の正式な出荷日が11月26日に決まったそうです。

残念ながら現在、Movable Type 4での新サイトの構築真っ最中ですので、試してみるのはちょっと後になりそうです。
この作業が終わって、ゆとりがあればデモサイトにでも移してMT5にアップグレードなどしてみたいものです。

って、何も記事読んでないので今までみたいにアップグレードできるのかどうか調べていませんが...。

HTML5だそうです。
CSS3だそうです。

パラパラと見た限りは簡略化されたり整理されている部分も多いようで、いい事だと思います。
実際の現場まで浸透するのはいつになるのかよく分かりませんが、立場的には知っておかなきゃなと思う今日この頃なのでした。

弊社では、中規模サイト以上のCMSとしてsix apart社の「Movable Type」を提案する事があります。
お客様の状況やご希望によってはMTOSという事もあります。
更新頻度や管理者のスキルに依存してしまう部分もありますが、WEBサイトの目的によってはかなり有効なのではないかと思っております。

その「Movable Type」がいよいよバージョン5という事で現在はベータ4が公開されています。
MTOSの対応は一歩遅れて、という事になるとは思いますが、いろいろ調べてみたいと思っております。

普段、私も使わせていただいているGoogleの「Analytics」。

先日、新機能が追加になっておりました。
機能強化以外にも携帯アクセス解析機能も追加されたようです。

とはいうものの、現在は特定のパートナーのみへの提供という段階のようですので、一般にはもうしばらくかかりそうです。

詳しくは「The Official Google Analytics Blog」のこのページを参照ください。

 いつもお客さまからの依頼でホームページを制作する際、FlashのSWFデータをHTMLに貼り付けるのに「swfobject.js」というものにお世話になっているのですが、今さらだと思われるでしょうが、いつのまにか「SWFObject 2.1」なんて事になってたんですね。
早速試してみました。

操作感も容易度も対して変わらない気がしないでもないですが、相変わらず便利でいい感じです。
背景を透明にしたい時など今までのVer.1.5ですと一部のブラウザでうまい事いかなかったのですが、その問題も解消されてるようでいい感じです。

これを知ってたらもうちょっと楽だし、うまく行ったのに、っていう案件がない訳ではないので、いくら忙しいとは言え、いろんな動きにもっとアンテナ張らなきゃなぁと思う今日この頃なのでした。

ダウンロードはこちらのページから
http://code.google.com/p/swfobject/

コードライセンスもMIT Licenseですので頻繁にお世話になるかと思います。

メモとして。cssハックのまとめ的なもの。

IE6以下のみに適用
* html #hack {
-------
}

IE6のみ除外
#hack {
-------
}

IE7のみ適用
*:first-child+html #hack {
-------
}

IE7とモダンブラウザのみ適用
html>body #hack {
-------
}

各ブラウザの初期設定のCSSをクリアにするなどの、基本設定をするためのCSSです。
ホームページを新たに制作する際の基本CSSとしてまず最初に読み込ませる様にします。

ブラウザ毎の見た目の違いを最小限にするための設定です。
（Safariは除く）
無駄な箇所も若干ありますが、W3CのCSSチェックも問題なくクリアするCSS設定になっています。参考までに。

standard.css

先日の「SKILL MEMO07 CSS font-familyについて」の時にいろいろと試し確認したフォントの問題ですが、しばらくはこのままで行く事に決めました。

Mac環境のFirefoxでは全角の記号、とくに「や（を使用する際に微妙な隙間ができてしまいちょっと嫌な感じだったり、なんか文字が小さかったりとありますが、まあ、仕方ないんじゃないでしょうかって事にいたしました。
ご了承ください。

結局、Ms系のフォントがインストールされているMac環境ではヒラギノではなく、Ms Pゴシックで表示される様になっていると思いますが、比較してみるとどうもヒラギノってどうなの？と思ってしまいました。
文字サイズにもよるのかもしれませんが、弊社のサイトの文字サイズには微妙だったような気もいたします。

と、言うことでこのブログのフォントも一部環境の方に対しては変更いたしました。

本体サイト同様、Macの一部の方には変わってしまったかと思います。
ご了承ください。

と、言うのもここにきていきなり無視できなくなったGoogle発のChromeの影響が正直、大です。

インターネットに慣れている方にはかなりおすすめのシンプルさでいい感じです。
個人的には。

今更の話ですが、ホームページってやつはブラウザによってテキストの見え方がかなり違います。

魅せるタイプのデザインの場合にはあまり気になりませんが、文章が多く読ませるタイプのWEBサイトでは、その見え方の違いがかなり大きな問題になってきます。

WEB制作においてHTML+CSSのコーディングを行いますが、IEの場合、背景に画像を配置する際に1ピクセルずれる、という問題があります。

たかが1ピクセルですが、その場所によっては致命的なデザインの崩れになることもあり得ます。

CSSハックはあまり使いたくないという基本姿勢もありますので、普及率の圧倒的に多いIEに合わせて作り、Mozilla FirefoxやSafariについては我慢していた部分もありましたが、やはり許せずにCSSハックを使用している今日この頃です。

こんな感じに。

----------------------------------------

/* ズレ修正IE6以下 */
* html body {
padding-left: 1px;
}

/* ズレ修正IE7 */
*+html body {
padding-left: 1px;
}

----------------------------------------

エラスティックレイアウトとはレイアウトを決める際に、ピクセルやパーセントで幅・高さを指定するのではなく、『em』値で指定する方法です。

最も有名な例としてはYahoo! JAPANがあげられます。
文字サイズを変更（大きく）していただければイッパツでご理解いただけると思います。

リキッドレイアウトとも含めアジャスタブルレイアウトなどとも呼ばれる様です。

ホームページを制作するにあたって、ここ数年特に耳にする言葉のひとつが「WEB標準」ではないかと思います。

既に一般の方の認識も強く、打ち合わせの際に「WEB標準で作って」と言われる事も何度かありました。
簡単に言うと正しくホームページを作りましょうっていう話（簡単に言いすぎ？）なのですが、実際はどの程度のホームページ制作会社が実施しているのでしょうか？

今更かもしれませんが、Googleのローカルビジネスセンターに登録してみました。

Googleマップに確実に登録されるだけでなく、検索結果に出る時などに任意に入力したちょっとした解説や事務所内の写真などが掲載されます。
よかったら見てみてください。