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:
リストの扱いの差
MozillaとIEはリストをレンダリングする時に、違う方法でアプローチしてます。デフォルトの状態だと多少インデントされる幅が違うだけで、たいした問題は無いのですが、CSSを使ってインデントされる幅をいじってやろうとか思うと、この違いに対応してやった方がすっきりしますね(気分的に)。 まぁなんのことはないわけで、リストのmarginで制御しているか、ulのpaddingで制御してるかの違いに過ぎないので、どっちかに統一するようにしてやればいいわけです。 ul { margin:0 0 0 2em; padding:0; } ulの場合は、こんなんでOK。各ブラウザで見比べてみるとわかるかもしれないテストHTMLも参照してみると良いかも。 このサイトの場合は、各ブラウザのデフォルト・スタイルシート(こんな呼び方が本当にあるのか知りませんが)とかいう、レンダリングの初期状態(CSSをまったく使
パイプ区切りナビゲーションバーをネガティブマージンで | Takazudo Clipping*
パイプ区切りのテキストナビゲーションバーが、単純な構造でできた。これなら2行目以降の左や右端に無駄パイプが残らなくてよさげ。 サンプルHTML <div> <ul> <li>HTML</li> <li>Blog</li> <li>XHTML</li> <li>CSS</li> <li>Seminar</li> <li>Usablity</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:
すごいdiv - 3ping.org
あまりに多いので書くのも気が引けるのだけど、body要素直下のすべての内容をdiv要素で何重にも囲ってるサイトが増えてきてますね。これ変だと思うんです。 大抵こんな感じに <body> <div id="wrap"> <div id="container"> . . </div> </div> </body> wrapper(包み込む), container(入れ物)なんていう名前がつけられていて、さらにすごいdivになると、さらにこの内側に inner(内側)というものが出てくる。 「class名やid名は、デザインに依存しないものが好ましい」と言いうのなら、「包み込む」や「内側」もデザインにかなり近いものだと思うのですが、真面目に突っ込む人は見かけず、このようなHTMLは増加しているようです。 再利用性という点からみても、「内側」という名前の要素郡ならば、移動するときは「外側」と一緒で
pre 要素に対する印刷用 CSS
サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト （Preformatted Text） として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が
MOONGIFT: よく使うスタイルをユーティリティ化「logicss」:オープンソースを毎日紹介
CSSを使うのが当たり前になり、Webエンジニアと言えどもある程度のデザインはこなす必要がある時代になっている。だがいざやってみると色々と大変なのがCSSでもある。 よく使われるスタイル指定や、テクニックをまとめてしまったのがこちらのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはlogicss、どこでも使えるCSSフレームワークだ。 logicssはがちがちな固定ではなく、通常使うタグを便利なように上書きしたり、サブセット化してくれる。例えばh-listというクラスは水平方向に、v-listというリストは垂直方向に項目をリスト化してくれる。 CSSを眺めてみるだけで、便利だと思えるスタイル指定も数多く登録されている。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)
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
中間色を生成してくれる·Color Blender MOONGIFT
IEとFireFoxの表示を確認しながらCSSを編集できるエディタ: ある SE のつぶやき
系统发生错误 - 通发国际娱乐登陆,通发娱乐手机版appios下载