「北アルプス山麓写真館 / 自然風景壁紙館」へ戻る

« 2006年01月 | メイン | 2006年03月 »

2006年02月28日

スタイルシート主体のページづくりは、至難の業!


清音(きよと)の滝

当館HPのスタイルシート化を目指していたが・・・
各ブラウザの違いが有り過ぎ一時中断・・・と言うか仕切りなおし顔を洗って出直します。

いや〜、ムズカシイです。
何がって幅のとらえがWin IEと他のブラウザ(Win Firefox しか試していませんが・・・)で違うんです。
IEでwidth: 600px;とした場合、border幅、padding幅(または、margin幅)が含まれての数字なのだがFirefoxの場合、border幅、padding幅(または、margin幅)が含まれない数字になる。つまり各幅がプラスされるという事だ。

この違いは、大きすぎる!。建築設計では、絶対許されない事だ。こんないい加減な寸法のとらえでは、家がいびつになってしまう。

ピッタシカンカンの幅でwebページを設計すればどちらかの表示が崩れて当然の結果となる訳である事がこれでわかった。

どちらの寸法の取り方が正しいのかは知らないがえらい迷惑な話ではないだろうか・・・。
どっちかに統一してくれ〜ぇ。

そんな訳で付け焼刃のスタイルシート化など到底出きるものでないと解ったので1から勉強して出直します・・・。(*ノ-;*)シクシク4×9=89

投稿者 kitaalps36 : 23:49 | コメント (2)

2006年02月21日

IEは、アバウト?と書いたが・・・


松本市三城の氷

どうやら代表的なブラウザには、「標準モード」で解釈するか「互換モード」で解釈するかを設定する方法があるらしい事を「All About ホームページ作成」で発見した。

「標準モード」とは、HTMLやCSSの文法解釈を厳格にしたモードのことで、「互換モード」とは、従来のあまり正しくない文法でも適当に解釈して表示させるモードだそうだ。
※標準モードでは、文法ミスは無視されます。(間違いは、無視され表示しない)
互換モードでは、文法ミスがあっても従来のブラウザのように解釈します。(これがアバウトに表示される要因だそうだ。)

では、標準モードと互換モードの切り替えは、どうするのか?
以下 「All About ホームページ作成」から抜粋させて戴く。

『代表的なブラウザは、「標準モード」で解釈するか「互換モード」で解釈するかを、「DOCTYPE宣言」と呼ばれる記述の内容で判断します。
「DOCTYPE宣言」とは、HTMLの1行目(XHTMLの場合は2行目になる場合もあります)に記述される、「そのHTMLがどのバージョンのHTMLの文法規則に従って記述されているか」を示す文字列です。 』

と、言われてもそりゃ何だと言う方が多いと思う・・・。
例えば、ホームページビルダー等でHPを作成した時に、自動的にソースの1行目に書かれる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> のおまじないの事だそうな・・・。
HTMLモードで編集した事のある方は、見た事があるでしょう?。

では、、「標準モード」になる例と「互換モード」になる例を抜粋させて戴きます。
(HTML4.01(Transitional)の場合)

○標準モードになるDOCTYPE宣言の例
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

○互換モードになるDOCTYPE宣言の例
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

なお、DOCTYPE宣言を省略した場合も、互換モードになるそうです。
※IEとNetscapeは 6.x から、Operaは 7.x からDOCTYPE宣言によるモードの切り替えが行われます。と書かれていました。

何かのおまじないと思っていたこの1行に、こんな意味があったなんて新発見です。
知らなかったのは、私だけだったりして・・・。(* ̄∇ ̄*)エヘヘ

投稿者 kitaalps36 : 18:52 | コメント (0)

2006年02月18日

Win IE は、アバウト?


大峰の大楓

当館トップページのスタイルシート(css)を使っての段組化は、一向にはかどっていない・・・。
「できるホームページ スタイルシート入門」と言う本を読んでその通りにやって見ているのだがWin IEでは、正常に表示されているのだがMacのブラウザで見てもらうと相変わらずのグチャグチャ!。

これだけグチャグチャなのは、どうやらソースにまずいところがあるとしか考えられない?。じゃあIEで正常に見えるのは、ナゼ???
IEこそ間違っているソースでも正常に見せるバグというかアバウトさがかなりあるらしい・・・。
私の使っているMSのフロントページもしかり!

しかし、間違っているものは、あくまでも間違っているのであってその間違いを気づかせないのは、いくらアバウトであってもちょっと困った親切である。
これでは、一向に何処が悪いのか解らないままにこれでいいのだと終わってしまう事になり進歩がない。

話は、ちょっと飛ぶが皆さんは、「Firefox」ってご存知でしょうか?
私は、今回のスタイルシートの件があるまでこの名は、聞いた事は、あったが何かのソフトの名前かな〜?くらいしか思っていなかった。
今回の件でMacには、色々なブラウザがありその中に、「Firefox」と言うブラウザがあるんだ〜・・・。と思っていた事も事実である。
しかし、まてよ!。Googleが「Googleツールバーを搭載したFirefoxでインターネットを快適に!」宣伝していたのを思い出し、まてよ、、、「Firefox」ってWin用ブラウザもあるかもしれないと気づき検索を掛けて見るとアタ〜リ!。ちゃんとWindows用もあるのだ!。しかも近頃IEからの乗換えが進んでいるとか・・・。

興味のある方は、Mozilla Japan - 次世代ブラウザ Firefox とメールクライアント Thunderbird の公式サイト
http://www.mozilla-japan.org/を見てみるとよい。
そのページには、「世界で数千万人のユーザに支持され、数々の賞に輝く次世代ブラウザがさらに進化しました。使いやすく便利な機能を兼ね備え、高い安全性を実現した Firefox 1.5 は、どなたでも無料でお使いいただけます。あなたも今すぐダウンロードして、かつてない Web 体験をお楽しみください。」とあるので最新のFirefox 1.5をダウンロードしインストールして見るのも良いかも・・・。

私も試しにインストールして使ってみていますがIEと殆んど同じ操作性なのでネットサーフィンに戸惑う事はないです。ただネットを見るのに必要なプラグインのインストールが上手く出来ないものがありその辺が???なんですが・・・。

新しいものが好きなお方は、どうぞ〜・・・。

投稿者 kitaalps36 : 20:55 | コメント (2)

2006年02月08日

Macのブラウザで正常に見せるのは

トップページの開きが遅いのでテーブルタグを利用したデザインからDIVタグを利用したスタイルシート対応へ組み替えテストをして見た。
仮アップして見ると今のトップページよりかなり早く開く。これは、シメタ!。ヤッタ〜と思った。

Win IE環境では、まともに見えるのだがおそらくMacでは、グチャグジャ状態が予想できた。
どれくらい崩れるのか知りたくなってMy氏とTo氏にお願いをしてスクリーンショットを送って戴いた。

結果は、予想通りMacには、IE、Safari、Firefox、Opera といくつかのブラウザがあるようだがいずれもWin IEのようにまともに見られるものがない。

中でも一番まともに近く見れるのが唯一Opera!。これは、ほとんどWinIEと同じ状態に見える。
Safari、Firefoxもくずれるがまだましである・・・。(でもグジャな事は、間違いない。)

一番ひどいのは、IE! もうグジャグジャです。(下の写真)
MacのIE5.2は、2年以上アップデートもしてないし、去年サポート停止していてMacのブラウザからすでに手を引いてしまったようだ。
こんなブラウザがスタイルシートに対応していなくても仕方がない状態だそうな・・・。

結論として、Macブラウザは、Opera以外のものは、最新のスタイルシートを100%理解しないのである。
スタイルシートの適用は、簡単な部分だけにして重要な段組などは、以前のとおりテーブルで組んで置いた方がよさそうである。
もっともMacユーザーは、少ないからWin IEのみ対応ページと割り切ってもいいのだが・・・(* ̄∇ ̄*)エヘヘ


Mac IE5.2では、こんなにグジャグジャ状態に見える

投稿者 kitaalps36 : 15:46 | コメント (2)

2006年02月05日

リニューアルアップして見たものの・・・

P1250460s.jpg
北安曇池田町北部へ来ている白鳥
後ろの北アルプスは、左から北葛岳、針ノ木岳、蓮華岳

トップページのリニューアルアップが済んでやれひと安心としたのは、ほんの少しであった・・・。
ページが重い・・・。完全に開くまでちょっと時間がかかり過ぎるのだ。
フラッシュを使っているので多少重くなる事は、覚悟していたがこれ程とは思わなかった。

作業中は、My PCの中にフラッシュがあったので気にする程の重さは感じなかったがサーバへアップするとやはり重過ぎる。
原因としては、ページのレイアウトにテーブルタグを使っている為テーブル内のすべてのデータが読み込まれるまでページが開かないようだ・・・。
改善するには、大きなテーブルを細切れに分割し遅い部分は、遅くてもかまわないので軽い所から先に表示させれば待つストレスがなくなるらしい。

セルが重ね餅状態になっている所は、大きなテーブルをちょん切りやすく簡単であるが左右2列になっている部分は、ただちょん切れば重ね餅となってしまうのでダメである。

そこでスタイルシート(CSSファイル)の登場となるわけである。
スタイルシート初心者の私でも理屈は、わかっている。(理屈だけしかわからんのだ・・・。)

間違っているかも知れないがと断ってから書くが
まずテーブルをDIVタグに変更しIDかクラスを付ける。<div id="hogehoge">・・・・・・・・・</div>か
<div class="hogehoge">・・・・・・・・・・・・</div>とHTMLを区切る。
ここまでは、適当にhogehogeの名前を他とバッチングしないように付けるだけであるから簡単!

これからCSSファイルへの書き込みとなるがここからが問題となる。
例えば左側の列のIDをmenu、右の列のIDをmainとした場合

左列は、
div#menu {
width: ○○%;    ○○は、%指定かpix、emなどの単位指定
float: left;      左列がleftである事は理解できるが
}

右列は、
div#main {
width: ○○%;    ○○は、%指定かpix、emなどの単位指定
float: left;      右列もleftである事は不思議?とにかく考えずにleftなのだ。
}

とするだけで2列になるらしいのだが全体幅を決め左右を概略の%で決める場合は、これで行けるがきっちりとpixで割り付けるとむずかしくなってここから先に???マークがいっぱい付くのだ。

頭がそろそろグジャッて来たので今夜は、ここまで・・・。
後日つづきを書けるように理解できたらまた書くことにするが・・・?
オ(^o^*)ヤ(*^O^)ス(*^^*)ミー(*^-^)ノフリフリ

投稿者 kitaalps36 : 00:37 | コメント (2)

2006年02月01日

SEO対策って知ってます〜?


自然が作るカタチっておもしろい

SEO対策って知ってましたか?
最近SEO(Search Engine Optimization)と言う単語をよく聞きませんか!。日本語では「検索エンジン最適化」と言うらしい・・・。

私は、最近まで気にもしていなかったし知らなかったのです・・・。
最近になって我が「北アルプス山麓写真館」へのお客さんが以前と比べ極端に減って来て、
あれ!どうして?何かしなきゃ〜・・・と思いはじめたころ「SEO対策」と言う言葉が耳にはいりました。
そこで興味を持って検索サイトを「SEO対策」と調べて見ました。
(検索エンジン対策をその検索エンジンで調べるのもオモシロイ!(^―^) ニコリ)
「SEO対策」で出て来る検索結果は、「SEO対策」とは何ぞや?、どう対策をすれば良いかを説明するサイトより「HP製作、SEO対策します」なんて宣伝しているサイトが多いんだよな・・・。

そんな中でGoogle検索の最初に出てきた「SEO 対策 Su-Jine」 を見てみました。
ここは、よく説明もされているし初心者SEO対策ツールなんてものもある。
興味のある方は、私がここでSEO対策について色々説明するよりこのサイトへ行ってみて勉強される方がマチガイがないと思う・・・。

私がこのサイトを訪れた後のSEO対策の感想は、
1.TITLEタグ
  これは、知っていたよ!。じゃあどう付けるかだよな〜ぁ・・・
2.H1タグ
  う〜ん、なるほど・・・ そうか〜ぁ うちは、使ってないな・・・
3.上位に表示したいキーワードをうまく使って文章を構成
  これは、むずかしそうだ・・・
以上でした。

ショックだった事
このサイトにあるYahoo!でのページランクを調べるツールを試して見た・・・。
Σ( ̄ロ ̄lll) ガビーン ランクゼロだ〜ぁ。どおりでカテゴリー表示での処遇もわり〜いしな〜ぁ。(原因は、アレかな???多分アレだ!)
ヤフー経由でお客さんが減っている訳だ・・・。本気でSEO対策と言うよりYahoo!対策しなくちゃ・・・。

投稿者 kitaalps36 : 22:35 | コメント (0)