こんにちは、なかわけです。
もうちょっと更新を頻繁にしたいところですが、今日はClearfixを使わずにメニューをキレイに作る方法です。まず、出来上がったものはコチラになります！
clearfixを使わないでfloatを解除する方法 – Rewish
終了・・・。
・・・だとちょっと味気ないので、ちょっとコメント。
昨日、仕事でバイトちゃんが作ったソースを見てClearfix相当のスタイルがないのにul要素でメニューが作られていて驚きました。そのソースコードを調べてみた結果、overflow:hidden; がキモだったことが分かりました。
これが初見だったので、びっくりしてちょいと記事にまとめてみようかと思ったんだけど、ググってみたらやはり既にキレイにまとめてらしゃる方がいらっしゃった・・・という感じです。記事を投稿されてる方は「clearfixの方が意味的には正しい」とおっしゃってますけど、ボク的にはclearfixも所詮ハックの一種だし余計なコードはないに越した事はないので、個人的には今回のHiddenハック(コレ名前あるんですかね？)がいいんじゃないかなと思います。
こんにちは、なかわけです。
cssで縦書きにする件について調べてみました。
結論から言うと、Firefoxが全く対応してないです。
Webkit(Chrome, Safari)やIEやなんかで見ると以下のように見れます。
個人的にはIEが対応しているのにびっくりでした。
以下が主なcssです。
-webkit-writing-mode: vertical-rl; font-family:"@ＭＳ Ｐ明朝", "@MS PMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", serif; writing-mode: tb-rl; direction:ltr;
1行目はプレフィックスからも分かるようにwebkit用の設定です。
2行目はフォントの指定ですが、ポイントは@アットマークです。このアットマークがないとWindowsのChromeで文字が横向きになった縦書きになってしまいます。
3行目はIE用の設定です。
4行目は念のための設定で、文字のどっち向きに方向に読むかという設定です。デフォルトはltr（左から右に）なので特に設定しなくても大丈夫です。アラビア語とかはrtlになります。
htmlのサンプルも用意したので参考にしてください。
で、今回仕事ではFirefoxにも対応させたいということだったので、竹取jsさんのjsを使わせていただきました。
今回webで縦書きを取り組んでみて、webで縦書きはwebの文化に反している様な気がして個人的にはweb縦書きは不要だと思いました。縦書きする言語はかなり少数ですし、webでは横書きの方が慣れてるかし。でも研究としては大変面白かったです。また本の話は別ですしね。epub系はこれからどうなるんでしょうね。がんばってください！
こんにちは、なかわけです。
仕事中に見つけたIE6の不具合。
メニューがあって、選ばれてるものだけ背景色を変えたかったときのこと。
こういう風に書くとIE6でうまく機能しませんでした。
<ul>
<li class="menu">ねこ</li>
<li class="menu selected">ゲーム</li>
<li class="menu">チョコレート</li>
</ul>
.menu {
background:#CCCCCC;
}
.menu.selected {
background:#CC0000;
}
この場合.menuと.selectedを同時に適用したゲームの背景はグレーになり、赤くなってくれません。
このときは、別の方法で解決しましたが、以下のページに回避方法が紹介されてました。
http://css-el.seesaa.net/article/108157845.html
でも、場合によっては無駄な要素を増やしたり、CSSのセレクタに文脈セレクタを追加したりしないといけないからヤダなー。
こんにちは、なかわけです。
今日も仕事中に見つけたIEのこと。
取引先からもらったHTMLとCSSを元にコーディングをしていて、IEだけ文字が小さくならない不具合にぶつかりました。
なかわけがfont-size:10pxと書いた部分は小さくならず、取引先が書いたfont-size:77%は小さくなります。
取引先からもらったCSSにはこんな感じに書いてありました。
font-family:'Lucida Grande',Arial,Helvetica,'ヒラギノ角ゴ Pro W3','メイリオ','ＭＳ Ｐゴシック',sans-serif; font-size: x-small; line-height:1.2;
どうやらfont-familyに日本語フォントより先に英字フォントを指定していると、
IEは指定されたフォントでは10pxにできないとご認識して10pxの文字指定を無視するようです。
（font-familyの順番を変えるとうまく10pxに変わりました。細かい検証はしてません）。
しかし、77%のようにパーセント指定すると小さくなります・・・。
調べればそれなりにわかったんだろうけど、ハメられたなー・・・。
こんにちは、なかわけです。
さて、今日のIEのバグ・・・
floatを含むブロック要素に謎のマージンが発生する
です。現象としてわかりやすく紹介しているサイトがありましたので紹介します。サンプル・対処法も書いてあります。
▼clearを指定した要素ではフロートに対して上マージンを設置する
ただ、今回なかわけが遭遇したバグはこれに近かったんですが、別物でした。いろいろやってみましたがいい方法が見当たらず、結局謎のマージン（実際にはパディングpaddingだったのかな）問題のブロック要素に高さheightを指定して解決しました。あんまいい方法じゃないな。
もううんざりです。今日もIEのバグに悩まされ時間を無駄にしました。たぶんIEに悩まされた時間を合計すると夏休みと同じくらいになりそう。はぁ。
IEなんて無くなっちゃえばいいのに・・・。
こんにちは、なかわけです。
先日の『IEのCSSバグ「これはなにハック?」』の原因がわかりました。やっぱりこれです。
文字コード!!!
ちゃんとhtmlファイルと同じ文字コードで（このときはEUC-JPでした）で保存すれば大丈夫でした。
はー。かなり苦しめられます、こいつに。そもそもこのサイト「oops!nakawake」も文字コード処理がうまくできてなくて時折文字化けするし。文字化けさんには気ぃ使うわ～。
こんにちは、なかわけです。
IEのCSSバグ（ハックなのか・・・？）を発見しました。これは、ヒドイ。。かなり苦しんだ。2時間苦しんだ・・・。
セレクタ {/*日本語のコメント*/
プロパティ: 値;
プロパティ: 値;
}
上記の赤字の部分がバグを引き起こす。
セレクタの{（始めカッコ）の後に日本語文字（つまり2バイト文字）でコメントを書くと、IE6でこのセレクタの以下のプロパティが無効になってしまいます。cssハックとかいいますが、これは明らかにバグです。
というか、ここにコメントくらい書く人なんてわんさかいるはず！IEがちょくちょく更新するせいなのか？
それとも、作業してる環境（サーバ・ファイル・拡張子・文字コード・HTML構造・・・など）のせいなのか？
とにかく、赤字部分のコメントをはずしたら問題なく表示された。なんだこれ、わからないよ。だれか～～！
こんにちは。なかわけです。
先日「JavaScriptの文字コードには気をつけろ！」という記事を書きましたが、CSSにも同じようなことがいえます。今日その問題にぶち当たりました。
javascriptの経験があったためか、すぐに気がつき大した時間の浪費はありませんでしたが・・・。
そもそも“Internet F Explore”の仕様がいけなかったんですけどねw
（FはなんのFか適当に想像してください）
対応策としましては、文字コードが変更できるテキストエディタ（たとえば、「秀丸」とか）で開いて、別名保存するときに変更したい文字コードを設定すればおｋ。もしくは、cssファイルの１行目に、
@charset “utf-8″;
と入力。もちろん、サーバ・ドキュメントに合わせた文字コードを入れてね。あ～あ、つまんなぇ。
よく使われるCSSの裏技です。名前は「clearfixハック」！
主にWindowsIE6が対象です。
これは下の英語文を訳すと「.clearfixクラスは（内側の）フロートされた要素の周りをブロック要素で囲っているクラスです。」ということです。実際使ってみるとよく分かりますが、よくfloatしているブロック要素を囲っているブロック要素が高さを指定しないとつぶれて表示されてしまうことがありますが、その問題点を回避する裏技的なクラスです。
必見です。
/* .clearfix class wraps enclosing block element around inner floated elements */
.clearfix:after
{
content: ” “;
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .clearfix { display: inline-block; }
/* no ie mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */
