ELLIPTiCUS » css |

float:left;の時のボックスセンタリング

Tue, 04 Aug 2009 10:00:12 +0000

みなさん、超おひさしぶりです。この所忙しかったり、ホケっとしてたり、気がついたら年月が過ぎていました。なんだかなー。
さて、今日の話題はボックスのセンタリングです。なんだよー。誰でも知ってるよー。と思われたらごめんなさい。でも、意外な落とし穴あったりしました。

#containerやら#layoutやら、いわゆるベースになる部分にfloat:leftが入るとmargin:0 auto;とtext-align:center;ではセンタリングされなくなる時があるのです。中身をfloatさせてる場合、IEなら勝手に親要素で囲ってくれますが、firefoxなどのモダンブラウザは囲ってくれません。子供をfloatさせるなら親もfloat。子供が蛙なら親も蛙。失礼。
しかし、それをやると前述したようにセンタリングが出来なくなります。なんでじゃっ！！firefoxが崩れてるとバグじゃないかもと思うfirefox信者です。
ですので、この場合は#containerの役割を分けてあげる必要があります。

body{
margin:0px auto;
text-align:center;
}

#base{
width:100%;
margin:0 auto;
text-align:center;
}

#container{
width:749px;
margin:0 auto;
text-align:center;
}

上記のように#baseを噛ませます。#containerにfloat:left;入ってないやんっ！ええ。そうなんです。ここにfloat入れると元の木阿弥です。入れないことでcontainerがfloatしている子要素を囲ってくれるのです。しかし、まったく理解出来ません。そして、こんな事で躓いてるのは私だけのようです。ググっても出てこないよー。それともググり方が悪いのかー。とほほ。

そして、ほんっっっとうに写真撮ってないので、とうとう猫です。かわいいのですが、大食漢で横暴で人に媚びるのが上手な、およそ猫とかけ離れたオカマです。

カテゴリごとにアイコンをつけよう

Thu, 11 Jun 2009 02:14:48 +0000

タイトルの横に、カテゴリごとのアイコンがあるブログ。よく見かけますよね。結構ベタなテクニックなのですが、これを使うことで変化に富んだブログになると思います。応用としては、タイトル文字の色を変えたり、背景色を変えたり実は意外と使えたりします。今日はそんなやり方をご紹介。

まずは、MTの設定から。

１、カテゴリを作る。名前は日本語でも英語でも。お好きなように。
２、『カテゴリの編集』で『説明』部分に半角英数字で適当な単語を入力

次に、スタイルシートを編集。

１、まずはベースとなるクラス名を決める。たとえば『articleBase』など。ここは任意で構いません。
２、『カテゴリの編集』で入力した説明を、先ほどのベースの名前のあとにつけて、カテゴリの数だけクラスを作る。
ex), 説明が『Blog』の場合　→　.articleBaseBlog{width:○○px;}
説明が『infomation』の場合　→ .articleBaseinfomation{margin:○○px}
３、好きな配色、画像、padding、marginを設定

最後にカテゴリを表示させる部分。主に『ブログ記事の概要』や『ブログ記事』を編集します。

以下のように設定します。

<$MTCategoryDescription$>”>

<$MTEntryDate language=”en” format=”%A, %B %dth”$>

<$mt:TagName$>

大切なのは１行目です。ほかは分かりやすくするために一緒に記入してるので、あまり気にしないでください。
最初に設定したベースとなるクラス名のあとに<$MTCategoryDescription$>を入れるのがポイントです。<$MTCategoryDescription$>で最初に設定した『説明』を表示させます。それによりクラス名を変える事が可能になります。

これで、出来上がりです。このテクニックは他の部分でも応用がきくのでぜひ！たとえばベースの名前を変えて、説明の設定をそのままに。新しいクラスを作れば、場所によっては同じカテゴリでも違うデザインに出来たりします。

IE8をHackしよう

Thu, 07 May 2009 07:37:34 +0000

実は今月からこっそりとIE8のユーザーが増え始めました。今までぜんぜん誰も見てなかったのに。Portfolioの最新の写真のサムネイルを表示する部分が、ほんの少しだけ崩れてたので使ってみましたよ。IE8専用ハック。

実はIE8だけサムネイルのmarginがちゃんと効いてなかったのです。むしろ、もともとこの部分はあやふやに作ってしまったので、marginが効かないほうが正しいような……まあ、せっかくなので練習代わりです。『WEB制作の現場から』のTKさんが考えてくださった方法です。

html>/**/body .latestPhoto_last .title ul li{
margin /*¥**/: 0 5px 3px 0\9
}

はい、成功しました。すごーい。詳しくはTKさんのサイトでごらんください。なんか、よく見出せたなぁと思うばかりです。ありがたい。なるべく使わないように作っていこうとは思いますが、緊急時はまたこの方法を使わせて頂きたいと思います。

:hoverの恩恵をIE6にも

Mon, 27 Apr 2009 04:16:21 +0000

このサイトもものすんごい使用率なのですが、【:hover】擬似クラスはとっても使い勝手が良いのです。ちなみにサイトのトップも【entry】というクラスに対して【:hover】を使う事で、マウスオーバーすると記事が見えるという使い方をしています。しかし、IE6がこの擬似クラスに対応していない事がネックでした。

で、見つけちゃったIE6も対応させられる方法。いやあ、世の中には天才っていっぱいいるんですね。私のような凡才はそこから恩恵を受けまくっているのですが。.htcファイルでIE6のBehaviorsをちょこちょこっと操作してやるやり方です。

http://www.xs4all.nl/~peterned/csshover.html#Changes

上記からダウンロードできます。使い方に関してはこちらのサイトが詳しく説明してくださっています。とっても分かりやすいです！ありがたや。ありがたや。
『ウェブのあれこれ格納庫』さんでもご説明頂いてますが、ローカルだと一切反応しません。あと、私のサイトはwordpressで作ってるのでheader内にタグを絶対パスで挿入してみたところ、ちゃんと動いてます。

こんな状態ですね。しかし、絶対パスが効くなら、他の場所でも使えるかな……pngfixとダブルで使うのが怖くてあまりいじってないのですが。あはは。そのうちやってみようと思います。

おくればせながら、今年の桜です。皇居にて。

safariのためのハック

Thu, 16 Apr 2009 02:25:37 +0000

普段はサファリなんてハックする必要のないブラウザですが、たまぁぁぁぁによく分からない動作をする時があります。特にjava scriptとcssを併用した部分では、1pxくらいずれたりずれなかったり。いっその事気づかないふりしたいじゃないか。そんな時の覚え書き。

【for safari3】
body:first-of-type クラス名・ID名{
margin:5px 0 10px 5px;
}

body:first-of-typeってヤツがキモのようですね。

【for safari2】
html:¥66irst-child クラス名・ID名{
margin:5px 0 10px 5px;
}

html:¥66irst-childは場所によってはOpera9でも反応するように書いてますが、私のOpera9では大丈夫でした。なんでだろう？
それにしても、あまり必要ないからこそ、2と3でHack方法が違うのがなんか腹立たしい。cssの量がほんの数行増えるだけなのに、なんかやるせない気分になる。バリ島が伊豆大島あたりにあったらいいのにな、と思うくらいに一緒にして欲しい（それはムリだろ）Hackなんかしないほうがいいに決まってるし、その為にちゃんと書いてるつもりなんだけど、上手くいかない時もあるもんですね。

IE7のハックが効かない時

Mon, 23 Mar 2009 06:11:15 +0000

あるいは、IE6専用のはずのアンダースコアハックや*htmlハックでIE7まで動いてしまった時。そんな時はDOCTYPEを確認する事をお薦めします。

そもそもDOCTYPEとは、そのhtmlの中でどんなタグが使えるか、どういう使い方をするのが正しいのかを宣言する文章です。タグよりも上に書き、その一文で、どう書くかが微細に変わって行きます。そして、その中のひとつが、宣言すると過去互換モード。つまりIE6と同じようになってしまうようです。

なので、IE6のために宣言したHackは全てIE7にも適用されてしまいます。大体、IE6でかけるHackで一番多いのがmarginだと思います。floatをかけたブロック要素のmarginを倍にして表示してしまうIE6のバグ。そのためにHackで数値を半分にして書きなおします。しかし、上のDOCTYPE宣言をしていると、marginを正しく読んでいるIE7も、IE6のハックを読んでしまい、結果的に崩れを起こします。

解決策としては、DOCTYPEの宣言を変えるというのが一番良いです。ただ、殆ど出来上がっているページだと今更DOCTYPEを変えるのも面倒だと思うので、IE6用にcssを作って、htmlにブラウザがIE6の時だけ読ませるようにします。

他にも方法がありそうなのですが、どうでしょうか？もっとスマートな方法を知っている方がいらっしゃったら教えてください。
でも、DOCTYPEなんてよくわかんないし、作りながらじゃないと分からないよというあなた！そして私！！とっても使えるのが『Wikiウサギ』のレンダリングテストページです。１個のブラウザだけで見ていると分かりませんが、IE7、IE6、safari等々。色々なブラウザで見ると、何が対応されているのか分かります。ありがたいです。

web創世記（というよりは、今は出エジプト記くらいでしょうか？）を生きている私達は、まだまだその時代の波に翻弄されそうですね。

INDEXページ修正しました

Fri, 06 Feb 2009 03:53:12 +0000

ほんっっっと外見変えないで修正出来ちゃいました。なんだったんだろう、あの時はすごい混乱してたのに。意外と単純なところに犯人はいたようです。

このページは見ての通り1番目の画像の隣にタイトルが入り、そのまま文章が続くという形をとっています。しかし、当たり前ながら画像は文章の中に入るので、画像だけを

で括るわけにはいかないのですね。

»’,', ’,”); } ?>

タグで言うとこんな状態。投稿で入る文章は全て

内に入ります。なので、cssで無理やり1番目の画像にマイナスマージンをかけて引き上げます。ついでにタイトルとかタグリストとかは

で括って、margin-leftで右に寄せます。さてさて、わたくし当初は

内のimgに対してマイナスマージンをかけてたのですが、2番目の画像にもマイナスマージンがかかってしまうわけです。なので、2番目以降にはpicというクラス名を付けて無理やり下に戻していたのですね。もちろん、全ての問題の原因がそこにあったわけじゃないけど、複合的に絡んだ要素のひとつだったわけです。
なのでこんなふうにチェンジ。

.singlePage .text img{
border:1px solid #000000;
margin:10px 15px 0 0;
float:left;
}
.singlePage .text img.titlePic{
border:1px solid #000000;
margin:-57px 15px 0 0;
float:left;
}

一番最初の画像だけにtitlePicという名前をつければ良いようにしました。するとすると、するっと全てのナゾが解けたのです。この記事にあるような小さいサムネイルを横に並べると、怪談階段のように10pxづつ下にずれた原因も、画像にリンク貼った場合、右上に黒い四角が出てくる原因も。
両方とも

内のアンカーに対してつけたcssが原因でした。リンク部分は背景黒で文字色ピンク（これが黒い四角の原因）と、見やすくするためにつけたpadding:0 1px;（10pxづつ下がる原因）。paddingに関してはなぜそういう現象になったかは微妙に分かりません。ただ、wordpressって投稿画面で改行すると（HTML入力バージョンにしても）勝手に
を入れていくクセがあるみたいですね。そこで10px近くのずれが生じていたみたいです。

いつも思うけど、分かりやすいコードを書くって本当に大事ですね。ただ、納期が近づいてたり、ずっとやってたりすると、いつの間にか頭がこんがらがって、ひどいコードになってる。ううーん。ちゃんと焦らず、冷静に。あ、それ私の人生自体に欠落してる部分だわ（涙）

あとマイナーチェンジですが、コメントカウントをタグリストの隣から日付の隣に移動しました。タグは記事によっては増えていくのでちょっと邪魔。これからも、こんな風にちょこちょこ色々書いて行こうと思いますですよ。

背景透過css

Sat, 31 Jan 2009 12:59:27 +0000

IE6未対応だったBOOKMARKを修正しました。これでIE6でもリンク先に飛べるはずです。
今回の問題点は『リンクを貼ってある画像にマウスを置いてもカーソルが変化しない（飛べない）』でした。原因は『IE6でもPNGを表示させる為に使っているjava script』です。しっかしjava scriptをよく分かっていない私は何をやっても、直すことが出来ず……すみません。お恥ずかしい。仕方ないのでcssで背景透過させてます。なんだかなあ。

filter:Alpha(opacity=60); /* IE系 */
opacity:0.6; /* Mozzila系 */

考えてみれば、しばらく前はMozzila系は背景透過なんて出来なかったのに、いつぐらいからこんなにメジャーになったんでしょう。この調子でIE独自の白黒フィルターも使えるようにならないかしら。
さてさて、その話は置いておいて。
実はこのindexページは相当無理して作ってるので、色々とひずみが生じてきております。ちょっと自分でもタグみて、よく分からなくなってます。なので、そのうち修正かけようかとおもいます。

デザインはそんなに変えるつもりはありませんが。修正の際に不可抗力で変わっちゃうかも？

入っていきなりサイトが見えなくなったりしても驚かないでください。たぶん作業中なだけです。
すみませんが、ご理解よろしくお願いします。