CSSは“全てのWEB屋”にとっては諸悪な根源でもない
少なくとも僕はそう思ってこなかったし、エントリ読んだ後でも特に変わらないな。文書をマークアップ（＝教科書の重要なところにマーカで線つける感じ）するために作られたHTMLが、見た目の表現のために表じゃないところで<TABLE>でレイアウトしたり、乱雑になりまくったから、「スタイルシートによるページ作成」というのが今のトレンドになっているわけですが、 Web屋さんにとってのすべての諸悪の根源 がここに集中してある、と思う、現在の私であります。
カテゴリー: CSS
諸悪の根源＝スタイルシート – Web屋さんのココロえ [ITmedia オルタナティブ・ブログ]CSSで垂直配置。
MovableTypeに移行する以前のサイトでは、 1ページが1テキストで、 それを垂直配置させて見せていた。デザイン的に。 それが結構気に入ってたので、 MovableTypeに移行してからもそうしようと思っていたのだけど、 同時に、アクセシビリティ的な観点から、 整形を目的としたTableの使用を止めようと考えていたので、 実現はなかなか困難だった。 NOBODY:PLACE – MUTTER: ブラウザ対応問題：垂直配置に悩む。 んで、捻り出したのが、 テキストの行数を計算し、テキスト全体の高さを概算して、 その半分量だけ、上方向にマージンを取るという、 なんつう力ワザ…（苦笑） （しかも結果的に、Table使ってしまっているし） 結局、垂直配置は諦めて、今みたいな、上揃えのデザインになりました、と。 で、もう垂直配置のことなんか、 殆ど忘れてしまっていたのだけど、 PHPSPOTにこんな記事が載っていた。
DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 （引用元：ex animo）
CODEとAAを入力するCSSのまとめ。
『等幅フォント』に関する意識がテキトーだったわけだが。 このエントリを読んで、ちょっと勉強してみるか、と。
昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。
選択できないテキスト
CSSで、『position:absolute』を指定した場合、 その要素の中のテキストを選択できないことがあるそうです。 今まで何度か不思議に思っていたんですが、 直しようもないしなーと思いつつ、放置していました。 しかし、先ほど、コメントへの返事を書こうとしたときにその不便さを実感。 引用できないじゃん… で、原因を探るべく検索してみたら、 hxxk.jpさんの記事がヒットしたというわけ。
このエントリでは、特別解決策が示されているわけではありませんが、 解決への十分なヒントを得られたので、試してみることに。 要は、positionの部分をコメントアウトすればいいわけだな。IE 6.0 では position: absolute; が指定されたブロック内のテキストを選択できない現象が発生することがあります。そして、 Movable Type のデフォルトのスタイルシート ( style-site.css ) では position: absolute; を使用しているので、たびたびその現象が発生しているようです。そういった場合の対処法をいくつか考察。
CSSで文字が消えることがある件について
CSS、タグの組み合わせによって、文字が消えてしまうことがあります。 MUTTER のコメント欄の文字がそうでした。 ドラッグしたり、スクロールしたりすると消えてしまうのです。 困ったなぁ…と思いつつも、 さほど実害はない（コメントがわかりにくいけれど）ので、 放置していました…が、逆に言えば原因もよくわからなかったのです。 で、その件がようやく解決にいたりましたのでご報告いたします。 ではなくて、メモと言うことで。 ヒントは、HTML,CSSバグ＆回避法リスト : 4. スタイルシートその他の話題の、 ■ 4.5 float指定時の問題(各ブラウザ) にあります。 そこに、似たような例が上げられており、症状として、
・ウィンドウ幅を大きくしても常に横スクロールバーが表示される(IE4) ・float:rightを指定した要素が親要素の枠の外に表示される(NS4) ・背景(色,画像)が指定されている場合に一部の文字列が消えることがある(IE6)となっています。 この3つ目が怪しい。 対処法としては、余り目立ちませんが、 『これらは親要素でwidthを指定(auto以外)すれば解決するようです。』 とあり、その通りに設定したところ、 きちんと表示されるようになりました。おお。 万が一、構造そのものに問題があったら、 全エントリ再構築か…と思っていたので、一安心。 よかった、よかった。
文字サイズの変更を可能に。
ユーザーフレンドリー糞くらえ、を標榜するサイト『NOBODY:PLACE』です。 どうも、こんにちは。 まあそれはどうでもいいんですけど、 表示文字サイズ、なかなか適当なサイズってのが見つからなくて。 今現在の小さなサイズ（7.5pt）がベストというわけではないんですけど、 やっぱり以前も書いたとおり、大きいサイズだと、ちょっとね…なんか違う。 見づらいな、と思う人が多いんだろうと、分かってはいるんだが… 今Diaryで採用している、少し大きめのサイズ（9pt）をmutterに使うと、 確かに読みやすいんだけど、書き手としては、 自分の文章があからさまになりすぎて、正直に言うと気恥ずかしい。 僕に興味を持ってくれた人が、こっそり読む、 というのが昔からのこのサイトの暗黙の了解で、 それはblogになってからも変わらないわけだけど、 それがあまりにユーザーフレンドリーになるとねぇ…ちょっと、なんだか。 まぁ、そういうことを考えて、 ずっと小さいサイズを通してきたんですけど、まぁなんてかな、 大きいサイズを必要とする人には、 それで提供するのもありかな、と思いまして。 CSSに手を加えてみました。 やり方は簡単。 今まで、絶対値で指定していたフォントサイズを、相対値に変更してやればいい。 『相対値』って、ブラウザによって変わったらどうしよう、 っていう心配があるんだけど、それほどは変わらないらしいので、まぁいいか、と。 で、相対値。
font-size: x-small;こう表示することで、大体、今まで通りのサイズが表示される。 で、これなら、ブラウザの『文字サイズ』を変更すれば、 文字が大きくなったり小さくなったりするんだけど、問題はIEの仕様。 だって、5段階しかないんだもん。 FireFoxなら、現状プラス1-2段階くらいで見やすくなると思うんだけど、 IEだと、僕の感覚では、『中』では小さすぎ、『大』では大きすぎ。 中途半端… まぁそういう問題はありつつも、 一応、ユーザーが選択できるようには。 敢えて、サイズを指定してるところもまだ多いですけどね。 （高さ指定して、調整して使ってるところなど）
より強調する。
最近、ようやくというか何というか、『文章の一部強調』をするようになってきました。 淡々と読ませたい（ほんとのこと言うと淡々と書いてるだけで読ませる気はさしてない）文章も有れば、 何となくリズムを持って読ませたい文章もあるわけで。 強調（太字、フォントサイズ拡大、文字色変更など）は、 その後者の方で、よく使うんだけど、ただ太字にしても、どーも、物足りない。 うーん。 かといって毎度フォント拡大するのは正直ダルイので（ボタン作れば良いんだけど）、 太字だけで済ませてました。 が、以前、サザエさん＋iPodで紹介したサイト、Truth Is No Wordsに、 面白いアイディアがあったので、それを拝借。 サイトを見てもらうと分かるんですが、 太字の文字の下に赤いフェルト風赤線が引っ張られている。 なんだかレジュメみたいだけど、これは凄くいいなぁ、と思ってソースを見てみたら、 なんと、背景画像でした。 うーむ。恐るべし。 strongタグに対してこれを設定してやることで、 こうなります。 Truth Is No Wordsさんのログを探してみたんですが 特にこれと言ってみつからなかったので スキンの元々のデザインなのかなぁ… さすがに画像をそのまま使うのは気が引けたので、似たような画像を作って下線としてみました。 どないでしょ？
RSS用スタイルシートを適用してみました。[XSLT編]
先日、RSSファイルにスタイルシートを適用してみました。 その際に、『概要（<![CDATA[ … ]]>）のタグが全部そのまま書き出されてる』わけで、 気になるなぁ…と言っていたのだけど。 それをなんとか解消する策を発見。 試験的に導入してみました。 とはいえ、XMLはおろか、XHTMLの知識も十分ではないので、 どっから手を付けて良いのかわからない。 どこか、いじりやすいサンプルを提供してくれているところはないか… 探してみると、発見。ありました。 HepCat Dev and Test: RSS 0.9x,1.0,2.0,Atom 0.3すべてに対応したXSLT 基本的には、自社開発されている、『HepCat』というRSSアグリゲータ（多機能なRSSリーダーというべきか。 リードするだけでなく、情報を効率よく取得、加工など様々な用途に利用できます → 用語） の出力に対応させたもので、決してMT用というわけではないんだけど、XMLはXML。 MTの吐き出すRSSファイルがvalidである以上、利用可能です。ハズ。 実際に適用してみる。 適用方法は、普通のCSSファイルと余り変わらない。 極めて簡単に書くと、 1) XSLTファイルをダウンロードし、適当な場所にアップロード。 2) RSSファイル内に、XSLTファイルを利用する宣言を記述する 以上。 宣言文は、XSLT用ということで以下の通り。
<?xml-stylesheet href=”ファイル” type=”text/xsl” media=”screen”?>CSSと同様に、保存、再構築。 これだけです。 このサンプルファイルが非常に良くできているので、 適用対象が、RSS1.0でもRSS2.0でもatomでも、問題ない。 ただ、このサイトがBulkfeedsを利用していないせいか、 コメントアウトしてある部分でエラーが表示されてしまったため、 該当部分を削除しました。これで問題なし。 できあがったファイル。 XSLT適用済みのRSSファイル(RSS1.0) 色や構成など、全くデザインをいじっていないけど、この完成度。遙かに綺麗。 RSSってのは、機械的処理が主流だけど、 元々は、サイトにある情報の概要をまとめることを目的に作られたんだし、 人への見え方を気にするのも、それはそれで筋は通ってるのかもな、と思いなおした次第。 それにしても、そろそろ、XML（少なくともXHTML）は勉強するべきかもなぁ。 XHTMLで知ってることといえば、タグは全て小文字、終了タグが必要、宣言文が必要…くらいだし。 HTMLの機能が既に一般人の満足できる水準に達している現在、 （この場合、ユーザビリティやアクセシビリティは考慮していない、表現したいことが出来るかということ） それ以上の後継言語が必要なのか、果たして一般化するのか、 正直にいうと疑問だが、プロとしてはやはり分かってないといけないようだ。 ことさらに必要性を説いて人に押しつけるつもりは、全くないけどね。
CSS: リンクアイコンをCSSで付ける
まずは、百式をご覧いただきたい。 百式は、毎日ひとつずつ、海外のドットコムサイトを紹介する、というページなのだけど、 そのエントリの一番下に、そのサイトへのリンクが貼ってある。 パッと見、何の変哲もないリンクなのだけど、これがCSSで制御されている。 目鱗だったのでメモっておく。 どの部分が制御されているかというと、表題にもあるとおり リンクの前に付けられた、矢印の付いたアイコン。 これは実は画像ではなくて、アンカーに設定された背景画像なのである。 通常、この手のアイコンを貼り付けるには、 実際に記述する部分でアイコンを画像として埋め込むのだけど、 もし、そのアイコンを変更したくなったら？ …当然だが、全てのエントリを書き換える必要がある。 MTであっても、テンプレ編集→全エントリ再構築ということに… しかし、CSSで制御していれば、CSSファイルを書き換えるだけで対応できる。 小さなことだがこれは案外重要。 これを参考にして書いたこのサイトでのCSSは以下の通り。 アイコンを付けないリンクと区別するため、classを付与してある。
これを実際に表示させたのがこれ。 リンク なんとも不思議な感じだが、これで綺麗に見えているのだから良いのだ。 あ、言うまでもないけど、例えばリンクテキストが2行にまたがったり、 paddingの数値と画像ファイルの幅が上手く合っていなかったり、 行の高さより画像の高さが大きかったりすると、上手く表示できないのでご注意のほどを。 ちなみにうちのサイトでは、MTのJavaScript関係をいじって これ用の編集ボタンを、エントリ投稿ページに追加してあります。 非常に便利。タグ部分<a href=”” target=”_blank” class=”OutLink”>リンク</a>CSS部分a.OutLink{ padding-left:15px; background:url(画像ファイル) left no-repeat; }
RSS用スタイルシートを適用してみました。
個人的にはもはや気にしなくなっているけど、最初にRSSファイルを見たときは、 確かにこれってソースが表示されちゃってるんじゃないの？と疑ったものだ。 （ぶっちゃけソースの方が何やってるかわかりやすいと思ってしまう時もあるけど…職業病） これはまぁ早い話、『整形前』の表示ということで。 これにスタイルシートを適用させてあげることで、見やすくなる。 さて、どっかに紹介ページがないか…と探したところ、Momomoさんのところに 導入がわかりやすくまとめてあった。 ADP: RSS用のスタイルシート 簡単に言うと、 1) W3CにRSS用CSSのテンプレートファイルがあるのでそれを活用すると楽 2) RSSファイル内に、CSSファイルを利用する宣言を記述する 3) RSSファイルをブラウザで表示できるようにMIMEタイプを設定する と言ったところ。 確かに、RSSファイルがいくら機械のものだと言っても、実体はXMLファイルなのだし ということは様式こそ多少違えどタグを基本にしているわけで、 それに適用するように記述してやれば問題ない、と。 まぁ理屈は分かります。 とはいえ、自分で1から作るのはかなりダルイので、W3Cのファイルをもらってきて加工するのが吉。 それすら面倒なときは、Momomoさん謹製のファイルが先ほどのページにあるので、 それをいただいてきて、適当な場所にそのままアップ。 （ありがとうございます） 次に、そのファイルへのリンクをRSS側に記述。 MovableTypeの場合には、『インデックス・テンプレート』の中の、 CSSに対応させたいテンプレート（例えばRSS 1.0）を開いて、2行目に、
<?xml-stylesheet href=”ファイル” type=”text/css”?>と記述し、保存→ファイルを再構築でOK。 また、サーバによってはrdfファイルを参照するとダウンロードになってしまうので、 htaccessに以下の記述を追加（index.rdfを表示する参照）
AddType “application/xml; charset=EUC-JP” rdf（もちろん権限が有れば、httpd.confでも良い） 以上で準備完了。 アクセスしてみると、ほほう。確かに綺麗に見えるようになってるねぇ。 さっきは、『これでも俺は分かる』と言ってたけど（笑）、 この方が遙かにわかりやすい。 欲を言えば、概要（<![CDATA[ … ]]>）のタグが全部そのまま書き出されてるのが気になるけど… 仕方ないね。 CSSは、内容はいじれないわけなので。諦めますか。 （註：CSSファイルではなく、XSLTを使うと実現できるかもしれない…詳しくないので 何が出来るか分からないのだけど） しかし、こうやって見るとぶっちゃけ、 外国のデータサイトみたいに見えるな（笑）