top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_888

HTMLlint:さて、先日の続き。この「創るmetaboy」のソース見直し、だ。html-lint のお世話になろう・・・ 【HTML-lint 100点への道】

 2009-05-01

 先日から始めた
 ・html-lint で100点への道


  ・HTMLlint:おざなりになっている、HTMLのベース。html-lint で追究して常に学び直さねばならない・・・ 【HTML-lint 100点への道】


 さぁ、続けよう・・・
 ■まず、本日の(現在の)チェックだ。
  ※原稿を毎日書いているから、当然変わっているはず、だが。
  830個のエラーがありました。このHTMLは -33点
   ・830個のエラー
   ・-33点
   おやおや、マイナスが増えているなぁ。
・・・さぁ、直すぞ。


  追記に ▼


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more

************************************************
◎ 目指せ! html-lint で100点への道:2回目
************************************************


それでは、順にチェックしてゆこう。


++++++++++++++++++++++++++++++++++++++++++++++++
■「1: line 105: <div> と </div> の間が空です。
  → 解説 51」
++++++++++++++++++++++++++++++++++++++++++++++++


 ・該当部分のソースは、
  

<div class='clearboth'></div>

  ・CSSで、レイアウトブロック配置する際
   float:left 、などの処理を
   一度解除させる などの用途で、よく使っているのだが・・・
  点数は、-1点、だ。


   HTML-lint の解説では、、

<TAG> と </TAG> の間が空です。 
ある種のタグは、要素が空であるのが好ましくないことがあります。例えば、
<ADDRESS></ADDRESS>
などというのでは、何のための <ADDRESS> なのかわかりません。
特に、<P> を <BR> の代わりに改行の意味で使っていたりすると、
</P> が省略されているとみなされて、さらにこの警告が出ること
が多くなります。<P> は段落のためのタグであり、改行のために
あるのではありません。

   ということだ。


  この問題。やはり同じような利用している方が
  質問をされていた。
tagの間を空にせずに、floatを解除する望ましい方法を教えてください
tagの間を空にせずに、floatを解除する望ましい方法を教えてください いくつか
 回答がされているが・・・




  「DIV内にそれらしい適当な文字を入れて
   div.clear_HOGEHOGE{text-indent:-9999px;}
  なんてのは、面白いなぁ。


  コメントには、
  「<hr class="clearboth">として、
   cssでhrを非表示とかheight0」
  というのもあったぞ。


  またここで紹介されていた
clearfixでfloatを解除
clearfixでfloatを解除 では



 ・・・反対の意見として
  「<div class="clear"></div>
   /*内容のない無意味な要素を入れるのはよくない*/」
  とおっしゃる。
  対案として、「clearfixという手法」を紹介されている。


  要は、
  ・親要素の一番下に入れる要素をCSSで生成する
  ということだ。


  これでやってみよう・・・
  ■次のCSS を用意しておく

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

  解説コメントを咀嚼する・・・
  ・content: ".";;
   ※親要素の一番下に入れる要素
    これを、CSSで生成するわけだ
  ・display: block;
   ※ブロックレベル要素にあてる
  ・clear: both;;
   ※メイン要素
  ・height: 0;;
  ・visibility: hidden;;
   ※高さのない表示されない要素に


  ブラウザ互換対応・・・丁寧だな
   ◇IE6,7
   ・疑似要素 :after をサポートしていない。
    バグを利用
    「要素の幅か高さを指定した場合,
     floatした子要素の高さも含めて算出」
    >> 枠や背景が途中で切れる問題を解決


   ◇IE7 のため

.clearfix {
min-height: 1px;
}


   ◇IE6 のため
   ・IE6以前ではmin-heightプロパティをサポート
    していない
    バグを利用
    「要素の幅と高さが内容物に合わせて
     押し広げられる」

* html .clearfix {
height: 1px;
}

    ※* htmlをつけると
     IE6以前(Mac IE5を含む)でしか効かなくなる。


   ◇Mac IE5.x のため

* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
 ・・・とする。


  上記用意の上、
  親要素に

<div id="wrapper" class="clearfix">
<div id="content">
<p>content</p>
</div>
<div id="menu">
<p>menu</p>
</div>
</div>
 ・・・などと
     class="clearfix" を指定するわけだが、


  ■さて、このブログの
   該当親要素部分は・・・

<div id="header-bottom">
 ・・・だが
    ここに追加。


   ・単に、<div class='clearboth'></div> を
    はずすだけだと、
    おかしくなっていた表示
     おかしくなっていた表示が ▼
    正常表示されるようになった
     正常表示されるようになった。


   ・一応、IETester
    (過去記事:IETester って知ってます? ・・・ 【ブラウザ対応】
    で、IE7 や 8ベータ のテスト
    IE7 や 8ベータ のテスト


   ・IE7 ではスクリプトエラーが出るのだが・・・
    (それはまた別の問題)
  IE7 ではスクリプトエラーが出るのだが・・・
    一応、大丈夫なようだ。


  CSSハック。奥が深そうですねぇ。


------------------------------------------------
◇一応思い通りの状態なので、
  → 再チェック!
------------------------------------------------
 ・クリアだ。


++++++++++++++++++++++++++++++++++++++++++++++++
■「7: line 131: <a> の id の属性値 `886` は
  正しくありません。英字または_から始まる:を
  除く名前文字列(ID)でなければなりません。
  → 解説 102」
 「1: line 131: <a> と </a> の間が空です。
  → 解説 51」
++++++++++++++++++++++++++++++++++++++++++++++++


 ・該当部分のソースは、
  

<a id="886" name="886"></a>

   これねぇ。
   FC2ブログで、特別な頁の指定をしたくて aタグ付けたんだけど
   自動的に、記事Noが入るように・・・
  
<a id="<%topentry_no>" name="<%topentry_no>"></a>


  ここは、
  中にスペースタグ入れて、素直に直そう・・・


<a id="no_<%topentry_no>" name="no_<%topentry_no>"><img src="*****.gif" alt="" border="0" width="1" height="1" /></a>
   ・   ・頭を数字始まりにしないで、no から始めて
   ・スペースイメージ入れて・・・


------------------------------------------------
◇一応思い通りのうごきなので、
  → 再チェック!
------------------------------------------------
 ・おぉ!クリアだ。


 今日はここまで。
 それでは
 ■現在のチェック (2009/05/01 14:43)
  820個のエラーがありました。このHTMLは -32点
   ・820個のエラー
   ・-32点


   確実に、エラー個数は減っているけど
   ・・・道は遠いな。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/888-3d427293
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。