|
コードの基本構造の再確認
インターフェイス=導線設計とコンテンツを整理それらを考慮した上で、ヘッド要素には ■シート宣言（UTF-8が親和性が高い） ■ＳＥＯに関係するtitle要素 ■全体の基本情報meta要素 ■link要素 ■スタイル要素。CSS読み込み（優先順位等）ここに直に記述か外部にふる ■script要素にはjavaソースや他の外部ファイル（優先順位＆相性等） XTMLには内部に書くのは望ましくはない ■ｏｂｊｅｃｔ要素は画像、動画、音声各種プラグインを埋め込むタグＦｌａｓｈが一般的。 ■base要素に各種指定のurlやリンク表示するウインドウやフレームの設定。 ※文字コード（charset）をUTF-8にしたらIE8.0で不思議な現象が発生。確実にHTMLページ上にはない「?」はてながスペースと一緒に画面の一番上に表示される。サーバー上のファイルを確認してみると確かに「?」は存在しない。 文字コードをshift_jisに設定すると「?」はなくなる。 解決策はドリームウィーバーで作成したコードをほかのテキストエディターにコピペした後「名前を付けて保存」(UTF-8,「Unicode Signature(BOM)を付ける」を選択解除)してまたサーバーにアップすると「?」がなくなる。 ●参考／Adobeヘルプセンター
|
|
ＣＳＳとＪＡＶＡコードの書き込み場所
ＣＳＳのチェック項目の順序としては ●ブラウザスタイルの初期化 ●body要素の定義 ●大枠ぼレイアウト設定 ●スタイルの定義 ●細かいレイアウト調整 ●クロスブラウザ対策 ●文法の妥当性チェック その事からスタイルの詳細度と継承のプロパティルールを適応していく。 その他.jsの混在と対処方法。 基本的にはヘッドでもボディ内でもいいらしいのだが、ページ内のエレメント=基本情報が読み込まれた後に処理を実行する場合twitterのバッジの要に＜/body＞タグの直前に書き込む。しかしIEのみは全てのバージョンが読まずにsrc="/ http://www.tsuka-time.com //test.jsという外部サーバーにスクリプトを振っています〜出来るだけファイル数は減らすべし〜 ※jQueryは別ページ  |
バグに関しての対処
残念ながら、Macは10.4とWindows7なので、マック版ファイヤFoxとサファリ、オペラとウィン版はIEは8版しか見れない。今も使用数が多いと思われるＩＥ6のバグが検証できないのが心配なのだが…あとFlashが描画できないiphone3Gも閲覧対象となります。
■コーティング形式・・・・HTML+CSS
■CSSバージョン・・・・・2.1に準拠
■html・・・XHTML1.0に準拠
■拡張子・・・.html
■文字コード・・・ＵＴＦ-8
■幅指定・・・1000pixel（960）
■対応OS・・・Windouws7、Macintosh10.4〜
■対応ブラウザ・・・IE8、safari2.0〜3.0、Firefox2.0〜3.0
《IE表示シュミレータ》
※ＩＥ5.〜6はたいがいエラー。（WinのキャプチャはPrtScで保存です。）
※ブラウザレンダリングモードhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
IE6でのXML宣言の問題と回避方法
Internet Explorer6は、XHTMLの <!DOCTYPE...宣言よりも前に文字やスペースがあると、古いブラウザ用の表示モード（互換モード）になってしまいます。この不具合は、サイトの表示が崩れる大きな原因にもなります。IE 6で互換モードになってしまうと、CSSで指定したwidthプロパティやheightプロパティの解釈が変わってしまうのです。この問題を避けるため、 XML宣言をしないサイトも多いようです。
そこで以下のコードを、テーマファイルに書き込みます。header.phpの一番最初にペーストすればOKです。<?php と ?>の前後に、余計なスペース・改行などは入れない様に…。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (!(ereg("Windows",$ua) && ereg("MSIE",$ua)) || ereg("MSIE 7",$ua)) {
echo '' . "\n";
}
?>
上記のコードは、訪問者のブラウザがWindowsのIE以外だった場合に、XML宣言をするようになっています。ただし、XML宣言の不具合はInternet Explorer7.0bでは直っているそうなので、その場合の処理も書きました。
●参考／BirDesign
この前FirefoxがやっとIE6を市場シェアを抜けて一位になった記事がありました。(Firefox＞IE6＞IE7＞IE8の感じかなトータルではもちろIE全体がまだトップ)IE6はもう早く下がってほしい
●参考／jQuery Browser Pluginも要検討。
このHPでは問題ないがトップページの視覚効果も含めiphoneの自動切り替えも導入していきたい
●参考／CSS以外のiPhoneへの自動切り替え振り分け方法
|
このHPの3種類ＣＳＳソースコード記載
|
|
|
|
|
|
| 3 / 4 ページ |
