[B! css] kkobayashiのブックマーク

css - ルビもCSSで : 404 Blog Not Found

2006年05月31日00:55 カテゴリTips css - ルビもCSSでこれ、実はCSSでなんとかなります。檜山正幸のキマイラ飼育記 - ルビ︵ふりがな︶タグの話 IE6では期待通りの表示︵ふりがなの﹁おびただ﹂が﹁夥﹂の上に乗る︶が得られます。FireFoxはダメでした、以下をご覧ください。夥︵おびただ︶しい数のWebページどうです?当blogでは、現在以下をCSSに加えてrubyを実現しています。IEでもSafariでもFirefoxでもちゃんと見えます。 /* * based upon * http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3 */ ruby { display:inline-table; text-align:center; white-space:

kkobayashi 2009/10/11

css

リンク

リストの扱いの差

MozillaとIEはリストをレンダリングする時に、違う方法でアプローチしてます。デフォルトの状態だと多少インデントされる幅が違うだけで、たいした問題は無いのですが、CSSを使ってインデントされる幅をいじってやろうとか思うと、この違いに対応してやった方がすっきりしますね(気分的に)。まぁなんのことはないわけで、リストのmarginで制御しているか、ulのpaddingで制御してるかの違いに過ぎないので、どっちかに統一するようにしてやればいいわけです。 ul { margin:0 0 0 2em; padding:0; } ulの場合は、こんなんでOK。各ブラウザで見比べてみるとわかるかもしれないテストHTMLも参照してみると良いかも。このサイトの場合は、各ブラウザのデフォルト・スタイルシート(こんな呼び方が本当にあるのか知りませんが)とかいう、レンダリングの初期状態(CSSをまったく使

kkobayashi 2008/01/14

CC万歳！

css

リンク

パイプ区切りナビゲーションバーをネガティブマージンで | Takazudo Clipping*

パイプ区切りのテキストナビゲーションバーが、単純な構造でできた。これなら2行目以降の左や右端に無駄パイプが残らなくてよさげ。サンプルHTML <div> <ul> <li>HTML</li> <li>Blog</li> <li>XHTML</li> <li>CSS</li> <li>Seminar</li> <li>Usa bl ity</li> </ul> </div> div{ overflow:hidden; _height:0; /* holly hack for ie6 */ min-height:0; /* fix has layout bug for ie7 */ } ul{ margin:0 0 0 -11px; _height:0; /* clear float for ie6 */ min-height:0; /* clear float for ie7 */ } ul:

kkobayashi 2007/11/27

すごい。けど、めんどくさー

css

リンク

すごいdiv - 3ping.org

あまりに多いので書くのも気が引けるのだけど、body要素直下のすべての内容をdiv要素で何重にも囲ってるサイトが増えてきてますね。これ変だと思うんです。大抵こんな感じに <body> <div id="wrap"> <div id="container"> . . </div> </div> </body> wrapper(包み込む), container(入れ物)なんていう名前がつけられていて、さらにすごいdivになると、さらにこの内側に inner(内側)というものが出てくる。﹁class名やid名は、デザインに依存しないものが好ましい﹂と言いうのなら、﹁包み込む﹂や﹁内側﹂もデザインにかなり近いものだと思うのですが、真面目に突っ込む人は見かけず、このようなHTMLは増加しているようです。再利用性という点からみても、﹁内側﹂という名前の要素郡ならば、移動するときは﹁外側﹂と一緒で

kkobayashi 2007/11/21

デザインと論理構造は分けるべき、というのは理想論でしかないんだよね・・・

css

リンク

pre 要素に対する印刷用 CSS

サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト（Preformatted Text）として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が

kkobayashi 2007/11/19

印刷用CSSを書いておくのはよいことだと思うのだ。サイドバー消すとか。めんどいけどやろうかな。 ●css

リンク

MOONGIFT: よく使うスタイルをユーティリティ化「logicss」:オープンソースを毎日紹介

CSSを使うのが当たり前になり、Webエンジニアと言えどもある程度のデザインはこなす必要がある時代になっている。だがいざやってみると色々と大変なのがCSSでもある。よく使われるスタイル指定や、テクニックをまとめてしまったのがこちらのソフトウェアだ。今回紹介するオープンソース・ソフトウェアはlogicss、どこでも使えるCSSフレームワークだ。 logicssはがちがちな固定ではなく、通常使うタグを便利なように上書きしたり、サブセット化してくれる。例えばh-listというクラスは水平方向に、v-listというリストは垂直方向に項目をリスト化してくれる。 CSSを眺めてみるだけで、便利だと思えるスタイル指定も数多く登録されている。CSSの勉強材料としても良さそうだ。もちろん印刷時の設定もある。また、サイトのグリッドを定義してくれるツールも付属している。これは指定した幅などで枠線やフォント

kkobayashi 2007/10/31

css

リンク

小粋なインターフェースを実現する25のコード（パート4） | S i M P L E * S i M P L E

先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。小粋なインターフェースを実現する25のコード小粋なインターフェースを実現する25のコード（パート2）小粋なインターフェースを実現する25のコード（パート3）今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)

kkobayashi 2007/05/06

css

リンク

ふつうに横三角 - ぼくはまちちゃん！(Hatena)

ＣＳＳで横三角。﹁半キャラずらし﹂ (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる﹁ＣＳＳで横三角をやる方法﹂。2バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »

kkobayashi 2007/04/22

(»)すごい

css

リンク

中間色を生成してくれる·Color Blender MOONGIFT

二つの色を選択して、blendボタンを押すと、中間色を生成してくれるサービスです。Midpointを増やすと、段階的な色調を表示します。これはMidpointが1の場合。 Midpointが6だとこのように段階的になります。色調を整えると、画面の見栄えも良くなりますので便利に使えそうですね。 Color Blender

kkobayashi 2007/01/06

多段組のサンプル。便利かも？

css
web

リンク

IEとFireFoxの表示を確認しながらCSSを編集できるエディタ: ある SE のつぶやき

CSSVista IEとFireFoxの表示を確認しながらCSSを編集できる、とってもナイスなエディタが公開されています。以下の画像のように、CSSを編集しながら、右側の上下でIEとFireFoxのプレビューが確認できます。バージョンはまだ、v0.1ですが、これはいいですね。尚、CSSVistaを使用するには、.NET Framework2.0が必要になります。

kkobayashi 2006/11/02

これはいいね