Skyscraper

SLPのタグ設計とか2。

というわけで、今回で最後。

STAR LIGHT PARADE CSS完成版

正直ここまで出来れば卒業といえる所まで、タグを直しました。

ここまでやる必要は無いと思いますけどね。

いやしかし実際、ここのタグは驚かされた

文字を小さな太字にしたいという理由でh4タグ…。ずっと昔、blockquoteは引用部分をあらわすためのタグで、文字をインデントするためのタグではありませんよーとCSS界隈のサイトで言っていて

「そんなことするやつはいねーよ」

と勝手に思っていたのですが、予想外のタグの使い方を思いつく人っているんだなぁ…と、うん。

あと、幾つかタグ周りで直したほうが良いものとか…。

fontタグでの強調をやめた代わりに強調文字を、em、strongで統一。

私の場合は、mozilla.orgマークアップ参考資料を基準に、追加を行っているので、今回もそれに習ってem, strong, strong.stronger, strong.very-strongを

em	フォントサイズ５
strong	フォントサイズ６
strong.stronger	フォントサイズ７

として適応しています。

div.invislble要素

STAR LIGHT PARADEでは背景色とも地色を同じにしてテキスト内容を不可視にするのを良く見かけるので必要だと感じましたので。

特にこういうのはスタイルシートでやっておかないと、デザイン変えて背景色変えた瞬間にものすごく困りますから、次のように書きました。

マウスオーバーするとテキストの内容が出てくるというのも手段のうちですから

というのもアリですが、実際使うとあまりにあっさり写るので意図しない操作で答えが見えてしまうことも多いですし、正直Ctrl+Aで全文選択で見るのも、ある程度慣習化されている感じもあるので

あと、ここから先は別に知る必要のないことですが…

孫ニュースサイトの記事の構造

孫ニュース系サイトは構造的に

まず前文
- ニュースへのリンク
- ちょっとした感想
- 以下ループ
最後の話

というのが定着しているのでこれに対応させて

div.entry-header
dl.news(中身はdt、ddタグで再現)
div.entry-last

としましたが、実際、十分なタグ補完機能を準備していないとコレは面倒くさい、逆にフォーマットがかなり固定化されているので準備があれば労力同じなんですけどねそれが出来る人がいない

実際、テキストエディタ以外のツールで納得いく入力体系を用意するのは難しいところがあります、特にブログツールなどの自動タグ補完では、まず何処までが前文で何処から記事が始まっているかすら判別できませんから

blockquoteの使い方とか…

人のサイトの文章を引用したときはblockquoteとか使うとなお良いですが、次の様にスタイルシートを書くと自動的に引用符を補完してくれますよ

問題は:beforeプロパティがIEで動かないことなんですけどね。だから現在では最大公約数的な解とはいえないでしょう。

あと、最後に一言だけ言っておかないといけない気がするので、自分で言ってしまいますが…。

色々と小うるさい事言ってすいません。

投稿者 baban 2007/04/29 at 20:59

no comments no trackbacks

STAR LIGHT PARADE CSS

一応cssと間違いのないHTMLできちんとお同じ事を出来ますよと言う例で…

STAR LIGHT PARADE CSS

正直、かなりの手抜き作業です。作業完了までが約30分です。そのうち作り直します。

（コンテンツそのままコピーしました、ごめんなさい）

投稿者 baban 2007/04/27 at 22:19

no comments no trackbacks

SLPのタグ設計に関して。

正直な話、タグの設計を最初から正しくやろうというのは、なかなか難しいんですよね。

(でもどうしてこれで、PHPとかを仕事で使う事が出来たんだろう…。正直グレンラガンというよりキャベツレベルで壊れていますから)

一応、今日から出来る範囲の正しいタグの組み方。

まず、DTDを当てる

おそらく現段階でXHTMLにする事を求めるのは難しいのでしょうから、HTMLのバージョンは4.01Translationで逃げることになるのだろうと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">

を<html>の前に挿入してください。

タイトルがあると良いです。

ページ最初の見出しはh1(header)タグを、日付の所にh2タグがあると良いのです。

fontタグは全廃を目標に

もし少しだけスタイルシートを学ぶ気があるなら、全廃する事をお勧めします。正直これは格好悪いので。

STAR LIGHT PARADEのタグ周りは、ざっと見た感じでは

フォントサイズ4が文字の基本の大きさ。
強調したいときはフォントサイズ5（亜種もあり）
特に強調したいリンクもフォントサイズ5で指定

等ですが、emタグとstrongタグで代換えして全く問題ないなぁ…と言った印象です。

エントリーを区切る

あとは、１日ごとのコンテンツですが、hrタグで区切るのをやめてdivタグで囲う方法をお勧めします。

クラス名にはentryとかnewsとかtopicとか、そんな感じでよいのではないでしょうか？

あと、比較的大きなHTMLのミスですが、人のサイトからの引用を行ったときの引用符ですが

> 日本政府はこの問題にこだわることなく輸入条件の緩和を認めるよう、改めて要請した。 <br>

ジパング舐められてるよ、ジパング。<br>

引用符は、そこは「>」を使うのが適当です。気持ちは分かりますが、ちょっと致命傷。(でも、なんか今日作業したら直ってましたね。

ほかにもあるのですが、あれもこれも直す事より、要点だけしっかり直すほうが大事な気もしますので、ここらへんで…。

投稿者 baban 2007/04/27 at 20:51

no comments no trackbacks

さて、STAR LIGHT PARADEのタグでも直してみようか。

以前、掲示板でアドバイスとかした手前、少しあちらのお手伝いでもできないかなーとか、思ってSTAR LIGHT PARADEさんのタグを見直してみました。

正直なところ、いまさら正しいタグと言われても、プログラムでテキストを入れ替えれば、情報を書き換えることはできても、情報を新しく入れることは結構難しいですから、まぁ、fontでされているデザインを変えて、DTD付けて、１日分のトピックをdivタグで囲んでもらって、ソレで終わりかな…とタグを見る前はそう思っていたのです。

実際の所、HTMLの中身を見てみたところ…。

うん、まぁ分かる。DTD(定義型宣言)入れていないのは。初めから予想していた。

headタグの中にtitleタグ以外情報入れていないのも予想内だ。

fontタグとaタグとbrタグ以外見あたらないのも予想通りなんですが…

なんでっ

お前はっ！

fontタグすら

閉じていないのだぁぁー！

今までも時々酷いタグのサイトに出会いましたが、この次元は久しぶりです。というかfontタグを閉じないのが当たり前というのは初めての体験です。

この後もすごいのですが

…タグが入れ子になっていない。どうしてこれに気づかないで平然と作業できるんだこの人は…。

htmllintにかけて