CSS2010/03/08マッチー
ケータイ向けのページを作っていて、実機テストなんかをしてみると、何かドコモの端末だけスタイルが効いていない、みたいな事態に遭遇することがあるかもしれない。っていうか、あった。 まあ理由はよく分かんないんすけど、ドコモのケータイはＣＳＳを使うのにちょっち面倒な手続きが必要みたいです。 まずはＸＭＬ宣言やらＤＯＣＴＹＰＥの記述から。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLICCSS2010/03/01マッチー
HTMLでタグにcssを適用したい場合は、class属性をつけますよね。まあ、直接スタイルを書いても良いんですけど。 実は今まで、僕はclass属性には複数を適用することはできないと思ってました。だから似通ったスタイルなんかでも、いちいち個別に書いてそれぞれclassを適用してたんすよ。 .left { width: 300px; height: 300px; float: left; } .right {CSS2009/06/02ゴウ
CSSでborderをつかって囲みを表現する時ってよくあるんですが、たとえば以下みたいな場合、 上部のタイトル部分は画像をペタって置くかなんかして、その下のBOXはCSSで1pxの線を引くのが一般的かと思うんですが、まぁその時の書き方について、気がついた事があったのでメモ。 /* 四隅に1pxの線を引く */ .hoge{ border:1px solid #ccc; } これが一番省略できる書き方。四隅に同じ条件の線を引く場合はこうやって書きます。 でも、上の画像のような場合CSS2008/05/13ゴウ
どんなサイトを作っていても、必ず使うのが新着情報や更新情報などを載せる部分。 通常トップページにあると思いますが、これらをマークアップする時にdt ddを使ってデザインする方法があるのですが、どうも今までのやり方だと気に入らない部分があって、liなんかを使って作る場合もあったのですが、今日この記事をみて目から鱗が落ちました。 dtをfloatする場合の注意点 今度からこれを使おうと決めたので、メモ。 2008-05-13 ホームページを更新しました。 2008-05-13CSS2008/03/25ゴウ
CREAMEでCSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』という記事が紹介されていました。 丁度、今作っているサイトでどうしてもmin-heightを指定したい箇所があり、IE６で対応させる方法を色々さがしていたので、ナイスタイミングです。しかもこの方法、JSなどを一切使わない、CSSだけで実現できるお手軽な方法。 色々調べたけど、結局JSを使うやり方しか見つからなかったので、うれしい限りです。CSS2008/03/03ゴウ
今日サイトを作っていてちょっとひっかかった箇所をメモ。 floatしたｄｉｖ要素にmarginを指定すると、そのmarginの値がIE６だけ2倍になるバグってのがありました。なんでIE６で見ると隙間が空いちゃうのかなぁって思ったのですが、どうやらコレが原因らしいです。 今回の解決法は、paddingでも大丈夫だったのでpadding使ってみました。 それ以外にも、floatする前にdisplay: inline;してあげると直るみたいです。 うーん、そろそろ、こういったIE６のバグ対策っ