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要素が記述されています。
これは確実に文法エラーです。やめませう。
(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要素が記述されています。
これは確実に文法エラーです。やめませう。
slashdot jpのソースを検証と訂正 More ログイン