人跡未踏

この記事は、はてなブログ↓へ移動しました。

http://mamadeok.hatenablog.com/entry/2013/03/10/000000

中学国語教材におけるトジヒラキの主なルールと注意点

この記事は、はてなブログ↓へ移動しました。

http://mamadeok.hatenablog.com/entry/2013/03/06/000000
（10秒後に自動的にジャンプします。）

IE９で背景がずれる現象がこれで直った

長時間いじり倒したが、いうことをきかない
借り物のテンプレ。
IE９で表示確認されていないCSSだった、ということにカスタマイズの終盤で気づいた。

<div>～</div>の中に<ul>が入っている仕様。
div要素の背景が、Firefoxだと問題なし、IE９だと15pxくらい上にずれる。
しかし、ul要素はIEでも正しい位置で表示されている。
ためしに<ul>～</ul>を削除してみたら、FirefoxでもIE９と同じだけ背景がずれてしまった。
なんだろうこれ。
思いつく限りのタグを入れたり外したり、数値を変更したりしてみたが、div要素がほとんど動かない。

解決策は驚くほどシンプルだった
初めのCSSは
background:url(http://～) no-repeat bottom;
となっていた。

これを
background:url(http://～) no-repeat;
background-position: bottom;
background-attachment:fixed;
に変更したところ、IE９でも正しく表示されるようになった。
位置のXY軸をピクセルで指定してフィックスにしたときはダメだったのに、bottomでよかったとは。


で、今の今までディブと読んでいたdivは、ダイヴと読むのが正しいと判明。
【追記】
divisionの略なので、やっぱりディブのほうが適切なんじゃないかと思うしだい。
テキトーなこと書いてしまってごめんなさい。

画像ごとにテキストの回り込み方を変えるCSS

各記事内の画像にテキストを回り込ませるために、alignを入れていて、
当初はプレビューでもアップした記事でも、ちゃんと回り込んでいたのに、
しばらく時間を空けてみてみたら、どれもテキストが下に落ちていた・・・。なぜ？

調べたらこのタグ、もともと非推奨のうえに、近い将来使えなくなるとか。
そのせいかどうかはわからないが、このブログで反映されないことは確かなので、別の方法で回り込ませることに。


ほかの方の参考になるかもしれないので、解決策をメモ。

画像のimgタグにclass指定（例：<img class="mamadeok" />）をしたあと、
記事ごとに以下のようなタグを直接書き込む。
marginとpaddingの値を変えれば、レイアウトを記事ごとに調整できる。

<style type="text/css">
<!--
img.mamadeok {
float: left;
margin:0px;
}
-->
</style>


margin:0px;は一見要らないようだが、入力しないと回り込まなかった。
bloggerの「作成」モードから「HTML」モードに戻すと、なぜか最後の　-->と</style>　が入れ替わってしまうため、「作成」モードには切り替えないのが吉。
【11/03 追記】入れ替わらなくなっている模様。