スポンサーサイト
一定期間更新がないため広告を表示しています
遅まきながら、明けましておめでとうございます。
新年を迎えて、ブログも新しくしてみました。前はホームページと同じデザインで統一してたんですが、ブログはシンプルなほうがやっぱ良いですね。前々からベージュ系でまとめたものを作ってみたかったから丁度いい機会でした。ついでに、本文のFontも「メイリオ」で表示するようにしました。Win VistaやWin 7を使われている方にはおなじみの「メイリオ」。XPではその恩恵にあやかれないと思っていたら、マイクロソフトでXP用メイリオフォントのパッケージがインストール出来るんですね。昨年、ブログのレイアウトをしてるとき、メイリオについて検索してたら見つけました。
早速、インストールしてローカルに保存してあるホームページをメイリオで表示出来るように書き換えて見てみました。文字のギザギザが無くなって確かに見やすいです。でもそのせいで同じ大きさの文字の「MS Pゴシック」と比べると幾分大きめで横に平べったい感じ。なので、MS Pゴシックでレイアウトしたホームページをメイリオに変えると、逆に見づらくなったり、横巾の狭いメニューの部分は、一行で収まらなくなる可能性もあります。文字デザインは好き嫌いが分かれるかも。
メイリオが入ってないとメイリオで見られないのでキャプチャー画像の見本
(新しい窓で表示する場合は「shift」キーを押しながらクリックして下さい)
◇MS Pゴシックでの表示見本(キャプチャー画像)
◇メイリオでの表示見本(キャプチャー画像)
※キャプチャー画像は同じ大きさでトリミングしてあります。メイリオのほうが文字が大きくなった分、1行の文字数と改行のスペースが変わるので、全体のバランスを変えたほうが良いですね。それと、二重丸はMS Pゴシックは普通に表示されるけどメイリオはかっこ悪い。
ホームページはMS Pゴシックでレイアウトしている為、今回メイリオは見送り。ブログも右側のメニュー部はやめて本文のみメイリオで表示出来るように変えてみました。おかげで、以前よりブログ全体の横幅が大きくなっちゃいましたけど、800×600のモニターでもギリ見えます(横スクロールバーは出ちゃいます)。
◇マイクロソフトXP用メイリオフォント・パッケージのダウンロード
※ダウンロードする際、正規のWinかどうか検証されます。プログラムの更新がきちっと行なわれていれば問題ありません(XPだとサービスパック3がインストールされて、その後の更新がされていればOK。サービスパック1や2止まりだとインストール出来ないかもしれないです)。
※インストール後、文字表示の変更をしないとメイリオが綺麗に表示されません。文字表示の変更は、XP立ち上げ後、モニター画面を右クリックでプロパティを表示(デスクトップの壁紙変更などで使う奴)。「プロパティ」タブの「デザイン」を表示。「効果」ボタンをクリック。「スクリーンフォントの縁を滑らかにする」を「標準」から「Clear type」に変更。で、OK。「Clear type」にすると、Fire FoxやGoogle Chromeでも欧文フォントが滑らかに表示されます。
2つのホームページのリニュアルは終わり、細かい部分の手直しも一応終了しました。今回、HTMLを4.01strictに変えたので、W3Cの検証サービスを受けてみました。W3Cとはブラウザによってバラバラだったウェブの構築を、どのブラウザで見ても一緒になるようにするためのウェブ標準化団体です。つまり、この検証にパスすれば、HTML構文として問題ないサイトであると認定される事になります。検証サービスは前から知っていたものの、自信が無いので一度もチェックした事はありませんでした。でも今回、HTML4.01の中でもっとも厳密なstrict記述にしたため、ちゃんと文法どおりになっているか知る必要があります。
1回目はエラーになりました。これは誤字によるもの。その部分を直して再度チェックした所、無事認定となりました。もう一つ、CSSも検証サービスがあります。こちらもやってみたら、IE6用のハック記述がひっかかりました。これも引っかからないように記述し直し検証。無事認定とあいなりました。なんだか、受験で合格したみたいな気分。ちなみに合格すると、認定の証であるW3Cバナーを貼る事ができます。工房とプライベートのホームページ両方合格したんですけど、とりあえずプライベートの「左利き流」のみ貼ってあります。
バナーをクリックすれば、バナーを貼ってるそのサイトのみの検証サービスに繋がっていて再度検証し直してくれます。合格後いじってないから「合格でっせ」と出るのは当たり前。でも度々再検証してくれるのは鬱陶しいですから、リンク先を通常の検証サービストップページ変えようと思ってます。この検証サービスは誤字やら、間違った箇所を指摘してくれるので意外と便利でした。検証方法もURLの他、ファイルのアップロードと、ソースのじか貼りも出来るから、サーバーにアップする前に、誤字がないかをチェックするのにも使えます。
また修正箇所は何行のこことはっきり示すので、テキストエディターを使っている方なら、左端に行数が出てるので、簡単に間違い箇所を見つけることが出来ます。ちなみにテキストエディター、以前からTera pad使ってたんですが、Sakura editorに変えました。かなり使いやすいです。タグに使う引用符や記号を本文中に使うと、そこから先、文字色が変わり警告してくれます。使って問題ないのもあるんですが、読み込みで誤作動するかもしれませんから、本文中にタグ記号があれば、文字の色変わりで直ぐに判るようになります。それと、タブ表示が使いやすい。更新時なんか、更新のページとリンク先のページ、トップページと更新履歴を同時に作業できます。重いファイルは表示出来ないので本格的なプログラミングには不向きですが、(X)HTMLや、CSS、Javascriptをいじるのなら使いやすいです。
IE8のブラウザにはW3Cの検証サービスに繋がるオプションがあります。
検証したいサイトのページを開き、「ツール」>「開発者ツール」クリックで開発者ツールウィンドウを開き、メニューの「検証(A)」をクリックすると、HTML、CSS、検証したい内容をクリックすれば、W3Cに繋がり検証してくれます(この方法だと検証出来ないサイトもありますが、下記直接版でやると出来ます)。
こちらは、直接版
W3C (X)HTML 検証サービス(英語版のみ)
W3C CSS 検証サービス(CSSサービスは日本語版です)
文書宣言バージョンにより(HTML4.01Transitionalなど)、エラーがあっても合格になります。Strictバージョンはエラーがあると合格になりません。
※リンクは同じ窓で移ります。別窓表示にしたい時は、「shift」キーを押しながらリンクを左クリックすれば、新しい窓でリンク先が開きます。
W3Cの検証サービスよりもっと詳しい内容を知りたいなら、
Another HTML - lint のゲートウェイサービスを使うと、
それはもう「まじめかっ」ていうくらい、こと細かくチェックしてくれます。
エラー項目の解説も(これたまた詳しく)ちゃんとあるので、
重箱の隅をつつかれるのを覚悟でやってみては。
本当に重箱の隅をつつかれまくります。
AddType text/xml .rdf
」と、打ち込むだけ。の続きです(前々エントリーの続き)。「html」のドキュメント宣言を変更し、次は文字コードの変更。ホームページを初めて作る時、文字コードはとりあえず「shift_jis」を使います。これはWindowsの文字コードがshift_jisを使っているためで、ホームページを作る際もこれを使ったほうが楽ちん。手打ちでなく、ホームページエディター(ホームページビルダー等)などで製作すると、デフォルト(文字コードの指示無し)で製作すればほぼshift_jisでhtmlは構築されます。この文字コードを宣言しておかないとサーバーにより文字化けする場合もあります(shift_jisなら宣言無しでも大体大丈夫ですが)。
コンピューター(パソコンを含む総て)には様々な文字コードがあって、それぞれがバラバラの文字コードを使ってることも多く、そんなんだと効率が良くない。ということで、共通のコードを作りませんかとなり、それがユニコード。ユニコードには色々ありますが、ホームページなどで最も使われるのは「UTF-8」。UTF-8は本来一つだけなのに、日本には何故か2種類のUTF-8が存在します(詳しくは3種類あります)。一つはUTF-8N。も一つはUTF-8 BOM付き(何故かこちらをUTF-8と呼びます)。お勧めはUTF-8Nです。BOM付きはUTF-8文字コードの前に要らないものが付いていて、これが誤認識されて文字化けしたり、アプリケーションによっては作動しない事もあります。本来なら、UTF-8NをUTF-8と呼んだ方が良いのに、何故かBOM付きを日本ではUTF-8と呼びます。
手打ちで作成する場合は、市販の(もしくはフリーウェアの)テキストエディターならUTF-8Nに殆ど対応してるので、保存の際にUTF-8Nで保存すれば(改行指定がある時は、表示されてる改行コードのまま保存:多分、改行コードはCR+LFになってると思います)、UTF-8の文字コードでファイル作成されます。Windowsに付属してる便利なメモ帳(Note pad)でもUTF-8で保存可能です。しかし、メモ帳で保存すると、もれなくUTF-8におまけのBOMがついてくるので、シェアウェアが嫌なら、フリーウェアのテキストエディターを使ったほうが良いですよ。
ちなみに、UTF-8が本当は3種類というのは、上記UTF-8N(UTF-8 BOMも同じ)の殆どは、shift_jisの漢字コードしか使えません。これはテキストエディターがパソコンの文字を使い書いてるから、パソコンに入ってるshift_jisの漢字しか打ち込めません。なので、UTF-8NはなんちゃってUTF-8(ちゃんと認識され使えますから問題はありません)。UTF-8 by shift_jis な訳なんです。shift_jisの漢字で不自由しないですから、htmlやCSSで使う分には十分です。
シェアウェアのエディターには本来のUTF-8で保存出来るものがあり(これで3種類)、こちらを使えば、shift_jis以外のUTF-8で使える漢字も使えます。
文字コードの変換はmetaタグのshift_jis部分をUTF-8に変更し、保存の際に、UTF-8Nで保存でOKです。文字コードのmetaタグは<head></head>
部の一番上に書いて下さい。ブラウザが読み込むとき真っ先に文字コードを認識させないといけません。<head>
の中の<title></title>
部より下にあると、<title>
の中の文字により文字コードが誤認識されることがあります。
2つのホームページもmeta部をコピペして総て、UTF-8に変更完了。ウェブでちゃんと表示されています。念のために、ブラウザの「表示」>「エンコード」で見ると「unicode(UTF-8)」に黒丸が付いていて認識されています。これで、ほぼ終了。あとは工房のホームページにRSSフィードをくっつけてやります。私用のホームページ「左利き流」には前からRSSフィードつけてあるんですが(別段つけなくてもよかったんですけど、とある理由で付けてあります)、かなりおざなりのヤッツケなので、今回、工房分と一緒にちゃんとフィードさせるように中を手直しします。
続く。
おまけ / フリーウェアのテキストエディター
html、CSSの編集や、Java scriptの中を少しいじるくらいでしたら、これらの中ならどれも遜色はありません。表示のレイアウトや色など、お好みで選べば良いです。ちなみに、私はTera Padを以前から使ってます(軽いのは魅力。編集時にイライラしません)。本体はシンプルですが、Tera信者の皆さんが、独自のTera用ツールをリリースしてTera Padを拡張出来ます(ツールはベクター、窓の杜で入手可)。ただ、タブ機能は同じ部分をいじる時、かなり魅力なのでSakuraを試してみたい(名前も良い〜)。
Tera Pad
※シンプルですが動きはメモ帳なみの軽さ。タグなどの色分け表示もあり必要最小限の機能。
Sakura editor(注:1)
※ブラウザで見かけるタブ機能が付いていて複数編集に便利です。
MK editor
※2009年以降、開発が止まっていますが、機能的には十分です。
Noeditor
※評価欄を見ると少し分かれますが、機能的には問題ないものです。サイトにタブ表示エディター有り。
Vx editor
※Tera Padと同じく、必要最小限の機能。簡単な方がいい人にお勧め。
Em editor free(注:2)
※シェアウェアのEm editorの機能を必要最小限にまとめたもの。サポートはありません。
(注:1):Sakuraはどれをダウンロードすれば良いか判りにくい場合は、こちらからパッケージ版をダウンロード出来ます。 softnic: Sakura editorのダウンロード
(注:2):Em editor freeのダウンロード先は、Topページ>ダウンロード>Em editor free
ビール。飲みに行けば最初に必ず言う言葉。でも今は、「とりあえず、ハイボール」だそうです。某社のCM戦略大成功という所でしょうか。
冒頭と全く関係ないんですけど、とりあえずホームページのリニュアル第一段階が終了しました。今回、ナビゲーションのプルダウン化。レイアウトの一部変更。「html」ドキュメント宣言を変える。文字コードを「shift_jis」からユニコードの「UTF-8」に変える。以上が主な変更点です。レイアウトとナビゲーションのプルダウンは見える部分でマンネリ化を防ぐのもあります。
問題は見えない部分。要はホームページをブラウザで表示させる為の指定の部分の変更なんです。これらの変更は今後の発展性を考えての事で、まぁ、やっておかないといけないな〜と。ホームページを作るのに必要なのは「html(ハイパーテキストマークアップランゲージ)」というコンピューターに指示する為の言語を使ってやらないといけません。「html」のルーツを説明すると長くなるので、知りたい方は検索してください。丁寧に説明されてるサイトがめっさあります。
「html」はずっと同じではなく、少しずつ改編され新しくなっています。現在は「html5」が一番あたらしいんですけど、ブラウザ対応がいっちゃん新しいものでないと表示されません。なので、一番ポピュラーなのは一つ前の「html4.01」で、殆どの(新旧含め)ブラウザで表示可能。この「html4.01」には、3つの文章形式があり、この文章形式を宣言しておかないとhtmlと見なされません(これが、ドキュメント宣言:実際は記載がなくてもブラウザが後に記す汎用タイプと見なして表示されるんですけど)。最も多く使われてるのは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
という汎用タイプ(一般にTransitionalとか言われてます)。こちらはちょいと文法ミスから、書き足りないのがあっても、大目に見て合格点を出してくれる教授のようなものです。
で、3つの中で一番厳格なのが<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
。これはstrictと呼ばれ、文法ミス、書きミスなどは見過ごしてくれません。大学で一番嫌われるタイプの教授ですね。「html」としてはstrictが良いとされているものの、現状のホームページでstrict表記は10%台くらいしかないようです。
strictが難しいのは、ミスが許されないのもありますが、レイアウトなどの装飾部を排除して、それらをCSS(スタイルシート)で表示させるようにしたためです。もしホームページがテキストだけなら、strictで書いても問題は殆ど起きません。Transitionalからstrictに変更すると大体レイアウトが崩れます。なので、html4.01でホームページを作ってる所はTransitionalで宣言してます。
最近はホームページよりブログを使ってる人が多いと思います。ブログは「html」ではなく、「xhtml」言語で作られています。「xhtml」は「xml」言語を「html」で表記させる言語で(xhtmlも長くなるので割愛です)、色々な拡張の発展性があるため、xhtmlが主流になりつつあります。ただし、xhtmlはきちっと書かないとhtmlのstrictと同じでミスを見逃してくれません(ブログが簡単なのは、一番面倒くさい部分はブログ管理人がやらなくて済む為です)。私の2つのホームページもxhtmlに変えていくつもりですが、今はxhtmlの知識が殆どありません。
ただ、xhtmlはhtml4.01のstrictと似た所が多くあり、strictで打ち込めるようになっておけば、xhtmlに移行はしやすいそうです。そんな訳で、ホームページをTransitionalからstrictに変更となったわけです。ちなみに、サーチエンジンはstrict表記のほうが、辿りやすいみたいで検索時に有効になるようです(確かな話じゃありませんので鵜呑みにしないでね)。
CSSをある程度理解していればTransitionalなら崩れません。ところがstrictにすると崩れちゃうんです。きっちりCSSを書いてもTransitionalで出来たレイアウト通りになってくれません。それは、ブラウザが持ってるデフォルトのCSSがあるからなんです。こいつがしゃしゃり出てきて、ちゃんと指定したはずなのに、上手くCSSが働いてくれなくなります。デフォルトのCSSは50点しかない答案を及第点の60点にしてくれ、多少のミスがあってもちゃんと表示出来る様にするカンペみたいなもので有り難いんですが、きっちり答えを書いたほうからすれば、入らぬおせっかいになります。
なので、strictでhtmlを打ち込む時は、ブラウザのCSSを無くすようにCSSに書いておきます。そうすれば、書いた通りにブラウザが表示してくれ、レイアウトの崩れもなくなります。これがCSSの初期化です(初期化も長くなるので検索すれば詳しいサイトが一杯ありますから、知りたい人はそっちを見てね:CSS 初期化 デフォルト で検索)。
レイアウトはばっちり。あとはstrictで使えないタグ(html言語)の整理をして「ドキュメント宣言の変更」は一応完了しました〜。
続く。