英文多読を実践中のおーたむさんが運営するウェブサイト。最近は少しペースが落ちているようですが、以前は10万語前後/月というペースで読んでいらしたのだという。
私はおーたむさんにアドバイスの依頼を受けるまで、英語多読の世界について全く知りませんでした。多読に挑戦している人々のことをタドキストというのだそうで、リンクを辿っていくと、様々なコミュニティへ導かれます。SSS英語学習法を見ると、多読は英語学習法のひとつであるらしい。けれども、コミュニティの雰囲気は、趣味の集い。なんだか楽しそう。
そして需要あるところ、供給あり。これまで近寄ることもなかった洋書コーナですが、顔を出してみるとタドキスト向けの本が何冊も並んでいる。なるほどね……内容的には日本語文献で用は足りそうな本が（いいお値段で）たくさん売られているのは、こういうわけだったのですか。世界が開けた気分。
以前Firefoxで見たときにはだいぶ文字等が重なっていました。IEでしかまともにみれないと思います。どこまできちんと見れるようにするのかは悩み中です。
ＨＴＭＬ、ＣＳＳについてナビやマークアップやサイトの構成など。私見でかまわないので、見やすさ、バランスなども見ていただきたいです。
何をどうアドバイスしたものか、と悩んでいる内に1月になってしまいました。参ったな。
- 0．
たいへん長期間お待たせして申し訳ありません。とうとう業を煮やして（?）リニューアルを敢行され、しかもそれさえ数週間前であるという……。
だから、というわけではありませんが、サイトの全面リニューアルにつながるようなアドバイスはありません。
- 1．
HTML はスッキリしており、見出しレベルの設定なども、よく配慮されたものです。ご心配の CSS の記述は、なるほど迷走気味ではありますが、基本的にはしっかりしたものだと思います。
サイト内の様々な文書に対し、ていねいにスタイルが指定されており、統一感は十分でしょう。和風の配色が英文多読という内容となぜか違和感なく、落ち着いた雰囲気と明るさを兼ね備えたよいデザインとなっていますね。
- 2．
Firefox で文字が重なる件ですが、基本的な理屈は簡単です。文字サイズの変化にボックスの縦方向の位置や高さが追従するように設計すれば、問題を回避できます。
具体的な対策は簡単で、いずれも無指定でかまわないのです。そうすれば、原則としてボックスの縦方向の位置は直前の要素の直後となって他と重なりませんし、ボックスの高さは内容にぴったりとなります。……無論、複雑なレイアウトを組む場合にはそう簡単にはいかないこともあるわけですが、その場合には em という文字サイズ追従の単位系でレイアウトを組んでいけば、文字サイズの変更によって文章が読めなくなることは減ります。
とはいえ、どれほどあれこれ工夫をしてみても、極端な文字サイズ指定には対応しきれないことがふつうです。Firefox では文字サイズを通常の5倍以上にもできるわけですが、それでも崩れないレイアウトなどというものを追求することには、一般的なレベルでは努力する必要性が乏しいというべきでしょう。
#navi h2{
clear:both;
font-size:small;
color:#fefbcc; /* クリーム */
background-color:#669966; /* 緑 */
border-top:4px solid #336633; /* 濃い緑 */
border-right:4px solid #336633; /* 濃い緑 */
border-left:4px solid #336633; /* 濃い緑 */
padding:1px 5px;
width: 662px;
height: 20px;
}
#navi ul{
clear:all;
list-style:none;
line-height:1.4em;
font-size: small;
padding:1px 5px;
width: 662px;
height: 20px;
border-right:4px solid #336633; /* 濃い緑 */
border-left:4px solid #336633; /* 濃い緑 */
border-bottom:4px solid #336633; /* 濃い緑 */
text-align:center;
}
#navi li{ display :inline;} /* リストにしない */これはナビゲーション部のスタイル設定ですが、私なら以下のように書きます。
div#navi
{clear:both; border:4px solid #363;}
#navi h2,#navi ul
{margin:0; padding:3px 5px; font-size:small;}
#navi h2
{color:#fefbcc; background:#696;}
#navi ul
{list-style:none; text-align:center;}
#navi li
{display:inline;}
これはひとつの解に過ぎませんが、何かしらのルールにしたがってスタイルシートを書いていくことには意味があるだろうと思いますので、私の思考経路を簡単にご紹介しておきます。参考になさってください。
私はまず、border を div#navi に渡すことを考えました。該当部分の HTML の記述は以下の通りです。
<div id="navi">
<h2>Contens</h2>
<ul>
*<li><a href="http://autumn.pepper.jp/index.html">Home</a></li>*
*<li><a href="http://autumn.pepper.jp/first.html">始めに</a></li>*
*<li><a href="http://autumn.pepper.jp/blog/diary/">日記</a></li>*
*<li><a href="http://autumn.pepper.jp/bookshelf/bookshelf.html">本棚</a></li>*
*<li><a href="http://autumn.pepper.jp/tadoku/index.html">多読</a></li>*
*<li><a href="http://autumn.pepper.jp/bbs.html">掲示板</a></li>*
*<li><a href="http://autumn.pepper.jp/new.html">更新履歴</a></li>*
*<li><a href="http://autumn.pepper.jp/link.html">Link</a></li>*
*<li>mail</li>*
</ul>
</div>ul 要素直下に「 * 」といったテキストを配置するのは文法違反ですから、「 * 」は li 要素の中に入れるべきですが、それはともかくとして、ナビゲーション用の h2 要素と ul 要素をグループ化する要素として div#navi が存在することに気付きます。
そもそも何のための 4px 幅の枠線なのか? それは、「Contents」という見出しと、ナビゲーションリンクのリストが同じ情報グループに所属していることを示すためでしょう。そのことは HTML のレベルで既にきちんと表現されているわけですから、それを素直に装飾すればよいのではないでしょうか。div#navi を無視して、h2 要素と ul 要素の装飾として上半分と下半分の枠線を指定するのは不自然です。
CSS は「素直」に使う限り、それほど難しいものではないし、面倒な記述も、かなりの部分を避けられるよう仕様が策定されています。（注：例えば「段組」は直線的な構造を持つ HTML 文書の装飾としては不自然なものなので、必然的に苦労させられることになります。多くの方は、HTML が本来は表現できないことを無理にでも表現しようとするから HTML にも CSS にも四苦八苦させられるのであって、「素直」な表現を心がければ多くの悩みから解放されます）
div#navi を「素直」に活用して枠線を担当させることで、CSS の記述は簡単になります。
また今回は、幅や高さの指定も無用ですね。ブロックレベル要素は、とくに指定しなければ幅いっぱいに広がりますし、内容に合わせて高さが伸縮します。仕様上、そのようなデフォルトスタイルが期待されているので、おまかせしておけば期待通りの枠線が実現されます。
div#navi 内の h2 要素と ul 要素には共通するスタイル設定がいくつかありますので、続いてそれらを指定します。この手順は面倒くさいように思われるかもしれませんが、一定以上の分量の記述を何度も繰り返し書くよりは、お勧めです。
あとはそれぞれの要素について細かい指定をすれば完成。
スタイルシートの記述は、「全体から部分へ」という流れを意識すると見通しがよくなります。「div#navi のスタイル設定→div#navi 内の h2 要素と ul 要素に共通の設定→各要素単独の設定」…… HTML 文書の構造を再確認してください。外側から順に、そして上から順に、デザインの指定が進められていることが分かるでしょう。じつはおーたむさんの CSS も同様の流れとなっているのですが、こうしたことを意識的に行っていくと、CSS の混乱が解消されるものと思います。
余談ですが、#aabbcc 型の色指定は #abc で代替可能です。私は短い表記の方が好きで、よく使っています。RGB がそれぞれひとつの数字に対応するので、数字を見ただけで結果を予測しやすいのですね。
- 3．
私が CSS を書く際、もうひとつ、注意していることがあります。
「一般から特殊へ」という流れです。
@charset "Shift_JIS";
/*-- position, width, height, float, display, margin, padding, color, background, font, border, etc. --*/
/*-- common --*/
*
{margin:0; padding:0; color:#140; background:transparent; font:normal normal normal 100%/1.4 Times,"Times New Roman","ＭＳ Ｐゴシック",Osaka; font-weight:inherit; border:none; text-align:left; text-decoration:none; vertical-align:baseline; list-style:none outside;}
html
{background:#fff url(http://deztec.jp/x/etc/img/x-p-body.jpg) no-repeat top center; font-size:95%;}
body
{width:596px; margin:auto; padding:180px 70px 2em;}
h1,h2,h3,h4,h5,h6,strong,caption,th
{color:#251; font-weight:bold;}
h1
{margin:20px 0 50px; font-size:160%; text-align:right;}
h2,h3,h4,h5,h6
{margin:0 -70px; padding:20px 72px 10px;}
h2
{padding-bottom:17px; background:transparent url(http://deztec.jp/x/etc/img/x-p-h2.png) no-repeat left bottom; font-size:140%; border-bottom:1px solid #fff;}
h3
{background:#fff url(http://deztec.jp/x/etc/img/x-p-h3.png) no-repeat left bottom; font-size:120%;}
h4
{background:#fff url(http://deztec.jp/x/etc/img/x-p-h4.png) no-repeat left bottom; font-size:115%;}
h5
{background:#fff url(http://deztec.jp/x/etc/img/x-p-h5.png) no-repeat left bottom; font-size:105%;}
h6
{background:#fff url(http://deztec.jp/x/etc/img/x-p-h6.png) no-repeat left bottom;}
address,#address
{margin:2em -70px; padding:0.25em 70px; background:#f1ffee; text-align:right; border:1px solid #cddecb; border-width:1px 0;}
p,ul,ol,pre,blockquote,table
{margin:0.5em 0 0.5em 0.5em;}
p
{text-indent:0.8em;}
pre,.source,.longsource
{text-indent:0; padding:0.5em; font-family:"ＭＳ ゴシック",monospace; border:1px solid #665600;}
ul li
{list-style:disc outside;}
ul ul li,ol ul li
{list-style:circle outside;}
ol li,ul ol li
{list-style:decimal outside;}
dl,dd blockquote dl,dd dl.lv3
{margin:0.5em 0;}
dd dl
{margin-left:-0.5em;}
li,dt,dd,li ul,li ol
{margin:0.2em 0;}
li
{margin-left:2em;}
dt
{padding-left:0.5em;}
dt
{background:#e2ffde; border-top:1px solid #9ecd97;}
dd
{margin-left:2em;}
blockquote
{padding:0 0.5em; border:thin dashed #959162;}
q,em,strong
{padding:0 0.3em;}
q
{color:#663; border-bottom:1px dashed #959162;}
em,strong
{background:#eef;}
table
{border:1px solid #9ecd97; border-collapse:collapse;}
td,th
{padding:0 0.4em; border:1px solid #9ecd97;}
th
{background:#f0ffea; text-align:left; vertical-align:top;}
table.fig td
{text-align:right;}
textarea,input,#ln,.sss
{border:1px solid #464;}
a
{padding:1px 1px 0; border-bottom:1px solid #caf;}
a:link
{color:#885d01;}
a:visited
{color:#2f281e;}
a:visited,a:active,a.note:hover
{background:transparent;}
a:hover
{padding:0 0 0; background:#f1ffee; border:1px solid #9ecd97;}
img,#address address,a.note,a.note:hover
{border:none;}
img
{vertical-align:text-bottom;}
del,hr,.hidden,#ln
{display:none;}
ins
{background:#eee;}
/*-- class,id --*/
.lv1,.lv3
{float:left;}
.lv1
{width:50%;}
.lv2 h2,.lv2 h3
{margin:0; padding:20px 0 10px 72px;}
.lv2 h2
{padding-bottom:17px;}
.lv3
{width:50%;}
.break,.end,#address
{clear:both;}
#gn,#ln,.sss
{background:#fff;}
#gn
{position:absolute; right:0; top:0em; margin:0; padding:0.2em 1em 0.1em 0.5em; z-index:1; border-width:0 0 1px 1px; border-style:solid; border-color:#bbb #777 #777 #bbb;}
#gn li,.memo li,#address li,#address address
{display:inline; margin:0; padding:0 0.2em;}
#ln
{width:17em; float:right; margin:0 -30px 1em 1em; padding:1em 1em 0.5em 0.5em; border-width:0 0 1px 1px;}
#ln ul li
{margin-left:1em;}
.sss
{position:absolute; right:1em; top:2.5em; margin:0; padding:0.5em 0.5em 0.2em; z-index:1;}
.longsource
{height:200px; overflow:auto;}
a.note,a.note:visited,a.note:hover
{padding:0; color:#779; font-size:10px;}上記は CSSplant.css という、私が書いたスタイルシートです。このスタイル自体の良し悪しは別としまして、書き方には参考になる部分も少しあるかと思います。
まず最初に全称セレクタ「 * 」でベースを整え、次に html 要素、body 要素などの大物を処理し、続いてブロックレベル要素、インライン要素についてスタイルを設定、最後に class 属性や id 属性が付された特殊な要素についてスタイル設定して、デザインを決めています。
いうなれば、料理のようなものだと思うのですね。最後の盛り付けにばかり目が行ってしまうと、しっちゃかめっちゃかになってしまうのです。まずはベースの味を調え、続いてそれぞれの材料（＝要素）について、きっちり下ごしらえをする。盛り付けについて考えるのは、最後でいいのです。
……先に完成図が決まってしまっているプロのコーディング担当者には、このような手順は許されないことが多いでしょう。しかし趣味のウェブサイト製作においては、「素直」な手順を採用できるはず。場当たり的でなく、全体の作業進捗状況を見渡しながらコツコツとスタイル設定していくことができるようになると、CSS 記述時の先の見えなさ、不安感を、かなりの部分、解消できるようになるかと思います。
以前の tadokustyle.css と比較してリニューアル後のスタイルは洗練されてきているのですが、さらに改善の余地はあるように思いました。
- 4．
「本棚」のコーナが Firefox では崩れています。原因となっている記述は以下の通り。
.EntryBody ul{
padding:1px;
list-style:none;
font-size: small;
height: 20px;
}どこが問題か? 正解は height:20px; です。IE はこの記述を勝手に無視してボックスサイズを広げてしまいますが、Firefox はボックスサイズを維持したまま、テキストだけは全部表示します。なので、はみ出した文字列が続きの部分と重なってしまうのですね。
じつはこの動作の違いこそが、文字サイズを大きくしたときに、ナビゲーションについて IE では問題なく表示されるのに Firefox では崩れる原因でもあるのです。単に高さを指定しなければいいものを、20px などと決め打ちするところから問題が生じます。まあ、よほどのことがない限り、高さは指定しない方がよいですね。そして高さを指定する場合には、
div {overflow:auto;}
のような指定を行って、内容物があふれる場合にはスクロールバーを出すよう記述しておきましょう。W3C の勧告書によれば初期値は overflow:visible; なのですが、何だか不便な気もしますね。
ところで、MacIE は overflow プロパティの処理に厳しい制限を設けています。その詳細を勉強して MacIE 対策をしても悪くないのですが、個人的には、overflow プロパティを用いるなら MacIE のことは忘れた方がよいと思います。あるいは、overflow は使わないと決めてはいかがでしょうか。
結論ですが、今回のケースでは、そもそも本棚ページにおいて div.EntryBody の存在意義が不明ですし、height:20px; も意図不明。いずれか、あるいは両方を削除してかまわないでしょう。
- 5．
HTML について、簡単に印象を述べておきます。
おそらく、とくにリニューアル後は MT の管理画面から「改行を変換する」設定で記事を作成されているものと推察します。
記事をざっと拝見した限りでは、CSS を当てるためのマークアップになっているのかな、という印象がありますね。文書全体のレイアウトのためにはいろいろ div 要素を配置したり、細かく class 属性を設定したりなどする一方で、あまりマークアップにこだわりのないらしい本文については、ほとんど br 要素と p 要素だけで片付けてしまう。
それでいいのか悪いのかが問題なのですが、まあ、いいんじゃないかと私は思いました。連続改行で p 要素挿入という仕様なので、ソースを見ると br 要素と p 要素が入り乱れて奇異な感じがしないでもないのですが、（ユーザスタイルを常用していない）大半の閲覧者はソースなんか気にしませんからね。それに少数の気にする人にとっても、文章を読んでいて違和感が生じるようなマークアップにはなっていないと私は思いました。br 要素無効化とか、p 要素の前後の行空きを3行にする、といった極端なユーザスタイルを当ててみましたけれども、問題ない様子。
本文部分について、ひとつだけ気になったのは、段落のはじめに全角空白を入れている文章。改行が多い文体だけに、段落の頭だけ字下げがあると、ちょっと気持ちの悪い見た目になります。改行のたびに全角空白を入れるか、あるいは段落の最初にも空白を入れない、そのいずれかを勧めます。おーたむさんが全然気にならないとおっしゃるなら、今のままでもいいけど……というくらいの些細な話ですが。
あと、今後、テンプレートを新規作成する際には、class 属性値のバリエーションを最小限度に収めていく方がいいのではないかと思います。ブログツールはずいぶんいろいろと情報過多な文書を吐き出せるので、テンプレートには大量の div 要素が登場しがちです。それらを全部活用するんだ、という気構えならばよいのでしょうが、よく分からないまま振り回されることになりがちです。
私には tadokustyle.css は複雑すぎて理解困難でした。一部を理解すると、他がもう分からなくなる。おーたむさんの実力はわかりませんが、私と大差ないとすると、これはたいへんだろうなあ、と思ったものです。「本棚」コーナのあまり意味のなさそうな div.EntryBody は、そのあたりの困惑・混乱の産物ではないかとも思われました。
なるべくシンプルなところから出発して、たしかに必要だと思う分だけマークアップを足していく、そうした手順でテンプレートを作成することができれば、
他の方のアドバイスに「ＨＴＭＬとＣＳＳというのは、本当はもっと便利な道具なのです。100個の文章の見た目を変えるのに、たった一つのファイルに手を入れればいい。そう、掛け算の世界なんですよ。」とありました。このサイトを知ってから、そのようになＨＴＭＬ、ＣＳＳを書きたいと思ってるのですが、どんどんかけ離れていってしまうように思います。
この悩みも自然と解消されていくのではないでしょうか。
あるいは、じつのところ文章は表現の形を意識して書かれるのがふつうだ……と考えるなら、ひとつスタイルシートを決めてしまって、そのスタイルシートで装飾されるのに都合のよい HTML 文書を作成する、という作業手順もありえます。HTML を主、CSS を従、とすると、どんどん class 属性値が増えてしまって収拾がつかなくなる、という問題で困っている場合には、発想を逆転させることも有効なのですね。
- 6．
バランスの話。ひとつだけ、書きます。
原則として、極端はよくないのです。だから、少しだけ、遊びを入れておく。すると、まとまりがよくなります。
具体的には、例えば h3 要素の装飾。左に border があって、文字も左寄せ。border と文字がピッタリくっついている。こうしたデザインがよい効果を上げるケースはありますが、ふつうは、避けた方がよいですね。おーたむさんのサイトでも、成功しているとはいいがたいと思います。では、どうすればよいのか。
border と文字の間に、少しだけ隙間を入れるのです。padding:2px 5px; とかですね。border の幅が px 指定なので、隙間も px 指定としてみましたが、文字サイズに合わせて em 単位で隙間を設定するのも悪くありません。
全体的には、どこかのサイトで紹介されていたというテンプレートがよくできているので、とてもよい感じだと思います。これを少しずつマイナーチェンジしていくのであれば、既に述べたスタイルシートの書き方であるとか、本項で述べたちょっとした padding の設定であるとか、そのあたりについて見直していかれてはいかがでしょうか。
- 7．
サイト全体の（ほぼ）MT化、お疲れ様でした。私は面倒くさくなって、何度も挫折しました。やれば便利だろうなと、Lecture の記事を修正などするたびに思うのですが。
……というわけで、少しだけやってみました。テンプレートは1枚しか書かない（目次は手動で作成する）という手抜きのやり方です。カテゴリ周りのお勉強には、すぐに飽きてしまったのです。頭を使うより手を動かす方がいいや、と。おーたむさんは正攻法で取り組み、問題を解決するのに最適なプラグインをどんどん探索・導入などされていて、偉いなあと思いました。
アドバイスは以上です。
