スタイルシートに関して皆さんのお知恵拝借

2006年1月24日:スタイルシートに関して皆さんのお知恵拝借
1月18日に一度挑んだ中央からの表示。無理だったので以前と同じように直してみたけど、やっぱり中央から表示したいということで、再びお知恵を拝借出来ればと思います。
珍しく謙虚ですね。
いつも謙虚じゃん。
……。
で、やりたいことは以前も述べたけど、上段表示後は中央、右、左の順で表示したいと思っている。そのため、メインページ他、各ページのbodyは<container><banner><center><right><left>の順になっている。
問題となるのはスタイルシートですね。
今現在のスタイルシートをすべてここに表示するので、指摘をいただけたらと。たぶん、インターネットエクスプローラーだとこちらの思惑通りに表示されていると思うのだが、前回の指摘を見る限り、Firefoxやネットスケープだとしっかり表示されないとのこと。特にFirefoxは閲覧者の7%近くの人が利用しているようなので、この対策はしておきたいのだが…。
是非、スタイルシートに詳しい方のご意見を頂けたらと思います。
それでは、下にスタイルシートすべて貼り付けておくので、よろしくご検討を。今回の修正以外でも、こうした方がよいのでは、との意見がありましたらよろしく。

body {
text-align: left;
margin: 0px 0px 20px 0px;
width: 980px;
background-color: #FFFFFF;
padding: 5px;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {
line-height: 135%;
text-align: left;
padding: 0px;
width: 980px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #999999;
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}

a#banner-img {
display: none;
}

#banner a {
color: #FFFFFF;
text-decoration: none;
}

#banner h1 {
font-size: xx-large;
}

#left {
position:absolute;
left:0px;
top:80px;
line-height: 110%;
padding: 5px;
width: 160px;
background-color: #FFFFFF;
overflow: hidden;
}

#center {
position:absolute;
left:170px;
top:80px;
padding: 5px;
width: 600px;
overflow: hidden;
}

.content {
padding: 0px 0px 5px 0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, sans-serif;
}

#right {
position:absolute;
left:780px;
top:80px;
line-height: 110%;
padding: 5px;
width: 190px;
background-color: #FFFFFF;
overflow: hidden;
}

.content p {
font-family: Verdana, Arial, sans-serif;
font-weight: normal;
line-height: 140%;
margin-bottom: 10px;
}

.content blockquote {
line-height: 140%;
}

.content li {
line-height: 140%;
}

.content h2 {
line-height: 110%;
font-family: Verdana, Arial, sans-serif;
text-align: left;
font-weight: bold;
margin-bottom: 20px;
}

.content h3 {
font-family: Verdana, Arial, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

.content p.posted {
color: #999999;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
border-bottom: 1px solid #000080;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
}

.sidebar {
padding: 0px;
}

#calendar {
line-height: 120%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
padding: 2px;
margin-bottom: 30px;
}

#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

#calendar caption {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}

#calendar th {
text-align: center;
font-weight: normal;
}

#calendar td {
text-align: center;
}

.sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}

.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

.sidebar li {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 120%;
margin-top: 10px;
list-style-type: none;
}

.sidebar img {
border: 3px solid #FFFFFF;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

#powered {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 120%;
text-align: left;
color: #666666;
margin-top: 50px;
}

#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}

textarea[id="comment-text"] {
width: 80%;
}

ここからは追記です。
今さ、Firefox入れたら、普通に見えているんだが…。
!?
ひょっとして、何の問題も無いのか?実は、前とまったく同じスタイルシートではないので、運良く普通に見られるようになっているかも。
つまり?
いちいち窺い立てなくても問題なかったっぽい。
……。
でも、せっかくなので、こうしたらいいよ、とかあればよろしく。配色関連でもかまわないので。
まだ誰もコメントつけていませんが、どなたかご意見、よろしくお願いします。

直近、直後の話題

1つ過去の話題:「スーパーロボット大戦 鋼のOG祭り」で発表されるのは?
1つ新しい話題:「MOTHER3」の発売日が糸井重里氏のサイトで発表

『スタイルシートに関して皆さんのお知恵拝借』へのトラックバック

トラックバックURL: https://www.makonako.com/mt/mt-tb.cgi/1237

『スタイルシートに関して皆さんのお知恵拝借』へのコメント

この暗号なに?
あらてのウィルスか^^^^^;;;

投稿者 : 杉

別に何か不便ってわけじゃないけども
文字を反転すると全体的に反転される。

投稿者 : Sleipnirユーザ

Firefox1.5ですが問題なく見れてます

投稿者 : 匿名

ググれ

投稿者 : 匿名

よし!パクろう!!

投稿者 : 適当

自分Firefoxですが、前回の変更の時も問題ありませんでした。

投稿者 : ROM人

火狐なんざ無視で良いのに。

投稿者 : 匿名

はて?
スタイルシートにしろ、HTMLにしろ、
優先表示させるような機能なんてあったっけか?


うろ覚えの知識でしかないが……

ソースの先頭にあるものほど早く表示され、
後ろにあるものほど遅くなる。

テーブルタグがある場合、
画像を除いたテーブル全体の読み込みが終わるまで、
そのテーブルの内容は表示されない。

たしかこんなもんだったかなぁ……。


あ、そうそう。

スタイルシートのfont-sizeにx-smallの表記を使うと、
ブラウザ側にフォントサイズが大きく左右されるので、
デザインが崩れやすくなります。
ptやemの絶対値指定をしたほうが、崩れにくいかも。

pxに関しても画面のdpiによってサイズが変わるので、
使い方に注意が必要かもしれませんね。

投稿者 : あのに

スタイルシートと関係ないけどHTMLのエラーが大杉
URL貼っちゃいけないみたいなんで、
結果の一部だけ貼っときますね。
Another HTML-lint gatewayというサイトで
チェックできますよ。

チェックの結果は以下のとおりです。

http://www.makonako.com/ を XHTML1.0 Transitional としてチェックしました。
1002個以上のエラーがありました。このHTMLは -352点です。文字コードは UTF-8 のようです。

投稿者 : 匿名

スタイルシートを使う以上
見えない人がいるのはしょうがないかと。

投稿者 : 匿名

始めまして。

以前から思っていたことなのですが、過去の記事にどんどん遡って行くリンクがないのが多少不便に感じます。『次へ』みたいなヤツです。久しぶりに来た時記事をどんどん遡って読みたいので、可能であれば付けて頂けないでしょうか。

アーカイブがあるのですが、あれだと月ごとにリンク飛ばなければいけなくて、あんまり好きじゃないんです…。

投稿者 : カオリ

WinXP SP2環境のIE6、Netscape7.1、Firefox1.07、Opera8.5にて確認しましたが、表示崩れはありませんでした。

CSSソースもさらっと見ましたが、大きな問題はないのではないでしょうか。(素人判断ですけど)
ID”container”に適用されているborderプロパティ等、
いくつか「必要あるのかな?」という記述もありますが。

※ ※ ※
以下はアクセスログの解析内容によっては必要かと。
※ ※ ※

marginプロパティが適用されている箇所ですが、
古いブラウザだと解釈が違うため表示崩れの可能性があります。
(IE5.0あたりは崩れるかも)

それと全体のwidth設定が980pxとかなり大きく指定されているので、
メニューの役割を果たすID”right”内の要素を、
左側に表示するようにした方がユーザビリティ的には良いと思います。
解像度が低かったり、ブラウザのサイズを小さくしている閲覧者には、
過去の記事へのリンクをクリックするのに横スクロールバーの操作が必要になってしまいますから。

そのほか細かい所ですが、
img要素に対してaltが指定されていないのも問題・・ですかね。

ターゲットユーザーがわからないので、必要ない意見ばかりの可能性もありますが、
とりあえず気がついた所を何点か書いてみました。

投稿者 : aa

>Another HTML-lint gateway
正確なHTML書く必要はまったくない。
表示されればそれでいいという考え方も問題だけど。
yahooとかでもマイナス点ですよ?
blogで-300はちょっと低いかもしれませんが。

投稿者 : a

文字半点できねぇからむちゃくちゃ不便。別に今のままでいいじゃん。もとから変なんだからさぁ。

投稿者 : 匿名

7%のうちの一人です。IEは融通が利くので、解釈の厳密めなブラウザをテストに使った方がいいかも。

W3CのチェックでValidをもらえる(せめてAnother~で正数点)までチューニングすると、環境による差が減るので、ある程度修正するのは悪いことではないかと。
スタイルシートも、設定内容を自分で把握出来る程度にはチェックしておいた方がいいと思います。無駄っぽい設定が散見されます。
#テーブル前提という時点でアレかもしれませんけど。summaryいるんですよね…

やるとすれば…
ここはテーブルの使用が前提(会話部分)なので、table-layoutの指定がないと、表示に時間がかかるようになります。
(テーブル部分を読み込み終わらないと表示されない)
流れとしては意図している通りでしょうけど、テーブル読むのに時間がかかって、結果的に逆転しているように見えるのではないかと。
なのでfixedを指定しておくのがいいのかな。
(その場合widthの指定も必要になります。centerのwidthが600pxなので、それより少し少ない程度かな)

あと個別エントリのコメント表示部分(か投稿部分)にIDつきのaタグを貼るようにして、インデックスのaタグにそのIDを追加していただけると助かります。
(ていうか、ないのが不思議)

うまく行っているのを下手にいじると戻せなくなったりしますので、くれぐれもバックアップは確実に。

投稿者 : Amorphous

わたしゃ反転しながら文章を読むので
すげー読みずれー.
これが続くようなら見に来なくなる可能性もある.
俺一人くらいが来なくても困らないだろうけど.

投稿者 : 匿名

FireFox使ってたけどIE使うと真ん中表示されてるのか・・
あまり気にはならないですが・・・。

HP運営してるとデザインが思惑通りいかないと気が済まないのは分かります。
頑張って下さい

投稿者 : 匿名

反転が出来ないのはオリジナル文章・コメント文章共々、引用をさせないためですか?

あ、反転できないと言っても、意図しないヘンなところを反転してしまうっていう意味なのですが。

投稿者 : 匿名

確かに一部の反転は出来ないけど、「全て反転」じゃ駄目なの?
反転しながら文章を読むってのは何で?

投稿者 : 匿名

反転しながら読むのに1票!!
不便です

投稿者 : 匿名

反転はわからない単語を検索に入れるときに
不便になるので直して欲しいです…。

投稿者 : nya

(´∀`)反転できないことにストレス感じてたのは俺だけじゃなかったんだ。

投稿者 : 匿名

反転できないというか、コピペしずらいので、元の方がいいに一票。スタイルシートについては素人なので、あどばいすできなくてごめんなさい。

投稿者 : 匿名

反転させようと思った時にびっくらこいたさ。
まあストレスって程じゃないけど、違和感はありまくり。

投稿者 : 匿名

Firefox だと、反転できますよ。とは言え、そのためだけに、Firefox 入れると言うのは、どうかと思いますが。

後、Firefox って、タブでまとめて開いたりすると、レイアウトが崩れる事がまれにあります。再読み込みすると治るので、おかしく表示されるのは、ここのスタイルシートの問題だけではないと思います。対処方法があるかもしれませんが。

投稿者 : DARL

反転読みしてるの俺だけじゃなかったんだね。
どこまで読んだかわかりやすいので目を離す事があっても安心なのさね

投稿者 : 匿名