miniturbo::Blog [(X)HTML/CSS] Archives

<p>この部分は<span class="red">期末試験の範囲</span>だよ！</p>

.red {
    color: red;
}

とか。

Continue reading

html要素とbody要素に背景色をあてて遊んでいたところ(*1)、不思議な現象が発生しました。

Continue reading

僕の師匠(と、勝手に認識)でもある3ping.orgのwuさんと、hxxk.jpの真琴さん、Lucky bag blogのe-luckさん、お三方が執筆された「実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips」が発売となりました。おめでとうございます！

Continue reading

CSS3から登場する予定のMedia Query。メデイアタイプ指定よりも、さらに細かくデバイスを指定してスタイルを適用することができます。実は、Operaに先行実装されており、Wiiブラウザ「インターネットチャンネル」にも実装されているのです。

Continue reading

amachangさん主催の、「新春 CSS 隠し芸大会」にスピーカとして参加してきました。ここ連日、プレゼン用の資料制作に追われていたのですが、なかなか終わらず...。できたのはプレゼン当日の朝でした(徹夜明け)。

以下に、資料を公開します。

Continue reading

皆さん、明けましておめでとうございます。…と、遅いご挨拶となってしまいました。今年も、どうぞよろしくお願い申し上げます。

さて、年も変わり気分も一転したい時期ですが、前々からデザインだけお見せしていた、miniturbo.orgのリニューアル作業が完了しました。どうでしょう？「ピンクが目にうるさい!!」とか「透過しているのっていいね」とか、ご意見募集します。前のデザインが部分的に残っているよ！って時は、一度ブラウザのキャッシュをクリアしてください。

…実は、プレゼンの資料ができていなくて焦っているのに、気分転換にリニューアル作業してました。どうしよ...(あばばばば)

先日、記事にした携帯電話での文字コードに対する疑問でしたが、いろいろな方からの協力により情報が集まってきましたので、ここで一度リストとして載せたいと思います。

Continue reading

miniturbo.orgは携帯でも一応見れるのですが(コンテンツ量が多すぎるとメモリエラーがおきるかも)、それもこれもXHTMLで書いているからなのです。そこでふと疑問に思うことが。

追記(2006-12-28 01:17)

サンプルページに直接飛べるQRコードを作成いたしましたので、「別に手伝ってあげてもいいんだからねっ」という方はご協力お願い致します!「QRコード対応してないんだけど…」という方は、お手数ですが http://miniturbo.org/m/ からご確認お願いいたします。

お使いの携帯電話の機種名と、各サンプルが文字化けしているか/していないかをコメント欄に書いていただけると大変助かります!

Continue reading

先日「お試し版」が公開された、Nintendo Wiiのインターネットチャンネル。現状では、mixiを見るとフリーズするなど、まだまだ安定しない面もありますが、さすがOperaだけあって概ね満足な状態で動作しています。

でも、VGA(?)表示なので文字が滲んで表示されます。かといって、+ボタンでのズームは画面幅が狭く感じますね。そこで、miniturbo.orgのコンテンツをWiiでも見やすくするために、新しくデザインを作りました。

Continue reading

数ヶ月前に、習作として作っていたbackground-position のサンプルがあったのを思い出したので、ここで書いてみます。

background-position のサンプルページ

Continue reading

前エントリーにて書いた「Mac IE でのセンタリング」は、固定幅のみに対応したものでした。今回は固定幅に加え、可変幅にも対応したものになります。さらに、コードをちょっとわかりやすくまとめてみました。

Continue reading

固定幅のフローティングレイアウトをしていて、ブロックレベル要素をセンターに配置したい時、通常なら

div#content {
    margin: 0 auto;
}

てな感じでセンタリングすると思います。

しかし、Mac IEではある条件のときにmargin: auto;が効かなくなります。今回は、それを解決するお話。

Continue reading

先日公開されたFirefox2(Fx2)や、待ちに待ったWindows Internet Explorer 7(IE7)が11月にローカライズ正式版をリリースなど、ブラウザの更新が目立っていますね。ましてや、現在の2強モダンブラウザなのだからなおさらですね。

ということで、「文書型宣言によって切り替わるモード一覧表」を書いてみました。これから作成するサイトや既存のサイトがどのモードで動いているのか、知っていると幸せになれるかもしれません。

Continue reading

「マイナスマージン」や「ネガティブマージン」で組み立てるレイアウトです。

てんぽさんの記事にあるように、floatにより発生するカラム落ちは、親のボックスが内包するこのボックスのwidthに原因があるのではなく、そのマージン辺に原因があります。

とりあえず、以下をご覧ください。

Continue reading

CSSでのおまじない...

* {
    margin: 0;
    padding: 0;
}

それとともに、最近これもよく使います...

/* Good-bye Mac IE \*/

    ここに書くとMac IEでは反映されない

/**/