ホーム > タグ > CSS

CSS

OOCSS(Object Oriented CSS:オブジェクト指向CSS)を初めて知った。

CSSや画像の命名規則について : Web Design KOJIKA17」という記事を読んで、「OOCSS(Object Oriented CSS:オブジェクト指向CSS)」のいうのがあることを初めて知りました。

いや、そういう方法があることは知ってたんですが、ちゃんとした名前まで付いた方法論として確立してるとは。
というか逆に、僕の認識では「やるべきじゃない」方に分類される方法だったんですがね。
知らない間に流れが変わってたんでしょうか。
この記事の続きを読む

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。
自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。
僕自身も医療系のサイトに関わることが多いのですが、「設置して当然」の要件となりつつある感じ。
まー、正直「周りがやってるから」というのが主な理由なんですが、結果としてユーザビリティやアクセシビリティにつながるなら良しとしましょう(誰

今回は、その「ボタンをクリックして文字サイズを変更」する機能を実現する方法について、定番を 1 つと、新しく見付けたのを 1 つご紹介します。
定番の方は、プラグインを追加するだけなので手軽&気軽にできるのが特徴。
新発見の方は、いろいろ書かないといけないので若干メンドくさいですが、その分、変更するスタイルの種類を混在させること(文字サイズ&背景色 等)も可能となっております。
この記事の続きを読む

各種ブラウザの印刷のバグが治る(かも知れない)CSS の設定。

float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。
というか、おかしくならないことの方が多い。
というか、float を使ってなくてもおかしくなることの方が多い。
(特に、IE6、IE7、IE8、Firefox あたり)

そんなとき、こんな印刷用 CSS を作っておいたら解決するかもよ! 的な内容です。
この記事の続きを読む

背景画像を設定した要素のテキストに IE でもドロップシャドウを表示する方法。

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます(色や距離やぼかし具合もコントロール可)。
ただし、IE 以外ですが。例に漏れず。

IE9 からは CSS3 にもある程度対応するそうですが、現行の IE8 までは完全に無視されます。

で、IE でも CSS3 を使えるようにしたり、ドロップシャドウを擬似的に実現する方法が幾つかあるらしく、色んなところで紹介されています。

ただ、なぜか上記の方法ではうまくいかず、結局「IE の独自拡張を直に書く」というベタ(?)な方法に辿り着きました。
なぜ他の方法が使えなかったのか、詳しい経緯は覚えてません。
ひょっとしたら、「本当はうまくいってたけど設定が間違ってて出来ないと勘違いした」なんてケースもあるかも……。
ちゃんと履歴は残しとかないとダメですねすいません。
この記事の続きを読む

Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

珍しく Firefox のバグです(だと思います)。
あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。
つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と。

発生した現象はタイトルの通りですが、テーブルに設定した線が、Firefox で見てみると表示されたりされなかったりするのです。
「されたりされなかったり」とは言っても、表示のたびに結果が変わるということではなく、再現性はあります。
ただ、文字サイズを変えたり行間を変えたりパディングを変えたりすると、表示される線と表示されない線が違ったりするということです。
色々な数値を微調整していけばすべての線がちゃんと表示されるポイントがあるかも知れませんが、環境が異なればまた結果も変わってくるでしょうし、根本的な解決にはなりません。

というワケで、色々試した結果、以下のような方法に落ち着きました。
かなり無理矢理ではありますが、今のところ正常に(?)表示されています。
この記事の続きを読む

1 / 41234

Home > Tags > CSS

リンク
フィード
メタ情報

このページのトップへ