このページの位置
ホーム > blogっぷり! > 石輪っぷり! > Web制作

石輪っぷり!

カテゴリ: Web制作のブログ記事

Websiteのフォント指定

Websiteをコーディングするとき、フォントを指定しないと、一般的にIEなどではゴシックで、Mozillaなどでは明朝体で表示されます。
これがLinuxになるとフォントにアンチエイリアスがかかっているので、Linuxでよく使われるMozillaなどでは明朝体は非常に読み難くなります。
だからコーディングする際にはフォントを指定するようにするとよいと思います。

ただし、読みやすいフォントは人それぞれですので、CSSでフォントを指定すればブラウザのユーザースタイル等で好みのフォントに設定できるので、アクセシビリティ的にもよいでしょう。

したがって、body要素等にCSS
font-family: "MS Pゴシック", Osaka, sans-serif;
という具合に指定するとよいと思います。

因みにこのサイトは既にフォントを指定してあります。

Ac+C'04セミナー(東京より)

第9回(最終回)アックゼロヨンセミナーに参加しました。
テーマは「CSS+XHTMLサイト構築のワークフロー」。プレゼンターはアンカーテクノロジー新規事業開発チームの森川眞行氏と神森勉氏。
アクセシブルかつクリエイティブなサイトを制作するうえで何が重要か、そしてそれを効率よく進めていくためにはどうしたら良いか。

実はこのサイト、アクセシビリティを実装するためにCSS+XHTMLで構築したはいいが、CSSがものすごく複雑なものとなってしまっている。その原因が、サイトのインターフェースデザイン部分の構造設計をしっかりやっていなかった為だとわかりました。(実際、デザインを受けてそれを直接CSSに落としていた。)
今日のセミナーで、もう一度構造設計をやり直し、よりアクセシブルかつクリエイティブなサイトに作り直したいと強く思ったのです。

セミナー最後の質疑応答の中ではSEOソリューションズ代表の角太陽氏(実はその時まで気づかなかったが、私の隣に座っておられた)のお話も聞け、有益な3時間でした。

全9回のセミナーのうち、第3回と今回の2回だけの参加でしたが、最後にこのセミナーを運営いただいた森川氏と、プロップステーションの竹中宏晃氏に感謝するとともに、2年目のAc+C'04の活動にまた期待したいと思います。

position: fixd;

私のプライベートサイトにある"ザ・バス!"のページの復活に当たり、メニューにボックスの位置を固定するstyle "position: fixed;" を使ってみた。
でもこのStyleは Internet Explorer には対応していないということは知っていた。

そこで、"IEでも擬似的に position: fixed; 風になるようなJavaScript" なるものを利用してみる。
なるほど、動きはぎこちない(IE以外のブラウザで position: fixed; を適用させたときのように完全に固定せず、上下に震動する)が、とりあえず "position:fixed; 風"だ。

しかし、これの<body>タグ内への記述がXHTMLに準拠していない。やはり私的サイトであっても正しい文法で書きたいので、これはあきらめた。

なんで、こうもIEは異端児なのだろう? 背景のfixedは有効なのにね。

古いブラウザ(その2)

ブログページにリンクするスタイル選択Scriptの文字コードを、HTMLに合わせてutf-8にした。その結果、

  • Internet Explorer 5.5 では、個別エントリのページでステータスバーにエラーが表示されるものの、見た目はOK。
    (エラーは<head>内の記述が抜けていた。)
  • Netscape 6.2 ではOKだが、全ページにおいて選択したスタイルが継承されない。(これはブログ設置以前からだったのだろうと思う。)
  • Netscape 7.1 でスタイル選択が表示されず、え゛ーーと思っていたが、しばらくしてから表示されるようになった。なんじゃこりゃ!?
  • でも、Mozilla 1.3 では一向にブログページのスタイル選択が表示されない。そしてブログ以外のページはNetscape 6.2 と同様、スタイルが継承されない。(Firefox は問題なし。)
  • Internet Explorer 5.0 では、エラーが発生したが、スタイル選択の“なし”を“No Style”にしてOK。(ついでにスタイル選択を全ページ英語に。)

とまあいろいろあるが、各ブラウザとも最新バージョンでは問題ないわけだし、とりあえずこれでよしとしよう。

因みに、Internet Explorer 3.0 と Netscape 3.04 ではutf-8に対応してないので、ブログページでは文字化けしまくり。(--;

古いブラウザ

このサイトは様々なブラウザで同様に表示されるよう心がけて制作している。(但し、IE4以前とNN4.x以前はCSSを適用せず、文書構造がきちんと伝わるようにしている。)

ところが、このブログを公開してから、古いブラウザで以下の問題があることがわかった。(+_+)

  • Internet Explorer 5.5 ではブログページでスタイル選択のJavascriptがエラーになって表示されない。
    おまけにブログページのみページの先頭へ戻るリンクが機能しない。
  • Netscape 6.2 ではIE5.5同様、ブログページでスタイル選択のJavascriptが表示されない。(ページの先頭へのリンクはOK)
    また、ブログとは関係ないが、コメントページとホームページ制作のページ等でフッター部分が上にずれてしまう。
  • Internet Explorer 5.0 では全てのページでスタイル選択が文字化けする等のエラーがあり、スタイル選択を表示していないが、これはブログページのエラーはないみたい。

おそらくスタイル選択のエラーは、文字コードがブログページのHTMLとスタイル選択のJavascriptとで異なるためだろう。
でも、Netscape 6でフッターがずれるのは???

また悩まなくては・・・

livedoor Blog

このブログとは別に、プライベートなブログをlivedoor Blogで開設した。

livedoor Blogはフリーながらも、CSSのみならずHTMLのカスタマイズもできる。
今、サイトの一部をフリーのブログを使って構築する案件があるが、これならいけそうだ。

プライベートブログ→http://blog.livedoor.jp/haru3bus/

IEってやつは。。。

WebSiteを作る際、特にCSSレイアウトをしようとすると、そのバグの多さで何かとコーダーを悩ませるIE。
このブログにも厄介な現象がある。

それは何かというと、IEで文字サイズを変更しても、このブログ以外のページに行くと、標準サイズに戻ってしまう。
そしてまたブログページに戻ると変更した文字サイズで表示される。
その反対も同様に、他のページで文字サイズを変更してもこのブログページではそれが継承されない。
つまり、IEの文字サイズの設定がブログページと他のページとで別個のものになってしまうのだ。

ホントに“IEがなければどんなにか効率がいいだろう”って思う。
でも世の中の大半がIEなんだよなあ。

▲このページの先頭へ