パスワードを忘れた? アカウント作成
621679 journal

ADの日記: slashdot jpのソースを検証と訂正

日記 by AD
とりあえずSlashdot JPのトップページのソース検証。
(http://srad.jp/)

lin12~19:

<style type="text/css">
      @import url("http://srad.jp/slashdot.css");

      a:link{ color: #006666; }
      a:visited{ color: #000000; }
      a:active{ color: red; }
</style>

styleについてはコメントアウトで記述したほうが良いとされている。
しかし、埋め込みスタイルもまたよろしくはないと思われる。
そのためCSSにimport url文を入れてしまう。

/* HTML内部 */

<link rel="stylesheet" type="text/css" href="css/default.css"
  charset="shift_jis" title="Slashdot JP">

aに対する修飾を独立させてしまいたいのなら、外部参照にする
仮にアンカー用の修飾ファイルa.cssを用意。

/* 以下 slashdot.css内部冒頭部 */

@charset "shift_jis";
@import url("http://srad.jp/a.css");

/* a.css内部 */

@charset "shift_jis";
      a:link{ color: #006666; }
      a:visited{ color: #000000; }
      a:active{ color: red; }

もっとも、日記システムにおいてもトップページにおいても
アンカーの修飾が変わらないため、slashdot.cssに
現状では記述しても良いと考える。
なお、日記システムではslashdot.journal.cssもインポートするため
インポート用のCSSファイルを仮にjornal.cssとする。
その場合、以下のようになる。

/* 以下 css内部冒頭部 */

@charset "shift_jis";
@import url("http://srad.jp/slashdot.journal.css");

______________________

line29:

<body bgcolor="#000000" text="#000000" topmargin="0"
leftmargin="0" marginwidth="0" marginheight="0" class="default">

全体的に言えることですが、/.jpのソースでは、CSSを利用する意味がありません。
CSSはスタイルをHTMLのソースと切り離せるところに利点があるのです。
辛口にいえば、今の状態では切り離しもできていませんし、CSSを用いるだけ無駄。

改善案:
/* HTML内部 */

<body>

/* 以下 CSS内部 */

body{
        background-color: #000000;
        margin: 0 0 0 0;
}

という具合でよろしいかと。

______________________

line32:
<table width="100%" border="0" cellspacing="0"
ellpadding="1" bgcolor="#EEEEEE" style="border-bottom: solid 1px #999999;">

bgcolorは後方互換性のためということでスルーもしくは削除。
style属性はCSSに切り離すべし。
line32に記述されているテーブルはどうやら画面最上部にあるグレーのバーの

OSDN Japan: ネットワーク - イベント - メルマガ - RSS - 広告掲載    検索[ ]GO

といった内容を表すために用いられているらしい。
これは「パンくずナビ」に相当するものであり、P要素によってマークアップされるほうがマシといえる。
したがって、現在のソース

<table width="100%" border="0" cellspacing="0" cellpadding="1" bgcolor="#EEEEEE" style="border-bottom: solid 1px #999999;"><form action="/search/namazu.cgi" method="GET"><tr>
          <td nowrap width="99%" bgcolor="#EEEEEE" align="left" style="color:#666666; font-family:verdana,arial,sans-serif; font-size:10px; text-decoration:none;">
                  <a href="http://osdn.co.jp/" style="text-decoration:none; font-weight:bold; color:#000000;">OSDN Japan</a>:
                  <a href="http://osdn.co.jp/gallery.pl">ネットワーク</a> -
                  <a href="http://osdn.co.jp/event/">イベント</a> -
                  <a href="http://japan.linux.com/email.pl">メルマガ</a> -
                  <a href="http://osdn.co.jp/rss.shtml">RSS</a> -
                  <a href="http://osdn.co.jp/advertise/">広告掲載</a>
          </td>
          <td nowrap bgcolor="#EEEEEE" valign="middle" align="right" style="color:#666666; font-family:verdana,arial,sans-serif; font-size:10px; text-decoration:none;">
                  検索:
          </td>

は、以下のソースに置き換えることが可能であると考えられる。

改善案:

/* HTML内部 */

<div id="FLOAT_LEFT">
<p>
        <a href="http://osdn.co.jp/" class="menu_osdn">OSDN Japan</a>:
        <a href="http://osdn.co.jp/gallery.pl">ネットワーク</a> -
        <a href="http://osdn.co.jp/event/">イベント</a> -
        <a href="http://japan.linux.com/email.pl">メルマガ</a> -
        <a href="http://osdn.co.jp/rss.shtml">RSS</a> -
        <a href="http://osdn.co.jp/advertise/">広告掲載</a>
</p>
</div>

<div id="FLOAT_RIGHT">
        <form action="http://srad.jp/search/namazu.cgi" method="GET">
                <p>
                        <input type="text" name="query" size="20" class="inbox">
                        <input type="hidden" name="whence" value="0">
                        <input type="hidden" name="sort" value="score">
                        <input type="hidden" name="max" value="20">
                        <input type="hidden" name="result" value="normal">
                        <input type="hidden" name="idxname" value="articles">
                        <input type="submit" value="Go" class="submits">
                </p>
        </form>
</div>

/* CSS内部*/

.menu_osdn{
        text-decoration:none;
        font-weight:bold;
        color:#000000;
}
.submits{
        background-color:#CCCCCC;
        border:1px #666666 solid;
        font-size: 10px;
        color: #666666;
        font-family: arial,sans-serif;
        font-weight:bold;
}
.inbox{
        background-color:#ffffff;
        border:1px #666666 solid;
        font-size: 10px;
        color: #666666;
        font-family: arial,sans-serif;
}
#FLOAT_LEFT{
        float: left;
        width:50%;
}
#FLOAT_RIGHT{
        float: right;
        width:50%;
}

なお、namazによる全文検索欄がページの右最上部にある必要もない
と個人的には思っている。
設置位置はページ左端にあるメニューの最後に『全文検索』
という項目を作ったほうがいいような気がする。

あと、line32のTABLE要素直下にFORM要素が記述されています。
これは確実に文法エラーです。やめませう。
この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
typodupeerror

計算機科学者とは、壊れていないものを修理する人々のことである

読み込み中...