基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。
フォントをem指定 以前紹介したフォント関連の指定とは別にフォントの指定を紹介します。 と言いましてもWeb Designingで紹介されていたものなので、相変わらずメモの変わりにとっておいている程度です。今回はemを使ってピクセル単位の感覚で文字サイズをコントロールするというものです。 やり方はいたって簡単ですので、覚えておいて損はないかと思います。 bodyの指定 まずbody要素に対して"font-size: 62.5%;"と指定します。 body { font-size: 62.5%; } これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。 body要素に対して"font-size: 10px;"としてしまうと、IEのメニューから文字サイズを変更できなくなりま
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが(笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
Lovelog+* | WordPress テーマ WordPressとXOOPS、Mediawikiのテーマを配布。プラグインの解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介。 ブラウザ別にCSSを条件分岐させる方法 現在、サイトをXHTML+CSSで構成していくことが主流になりつつあります。 そんな中で、一番のネックになるのが、全てのブラウザは必ずしも正しいCSSを読み込んでくれないということ、つまりバグのないブラウザはないということです。 やっと統一されつつあるものの、ブラウザ独自のものもあって、WEBサイトを構築していく者は、ここに泣かされます。 本来なら、古いブラウザ環境なんか知った事ではない!と思いたいのですが、ユーザビリティーの視点からいくとやはりどのブラウザから見ても、きれいなサイトを表示しないと…と思うのです。 このサイトでも、IE7が出た時点で、I
CSS(スタイルシート)の注目テクニックなどをまとめて公開してます
CSS で簡単にメニューの上下中央揃えを実現する ネタ元:CSS で簡単に上下中央揃えを実現する IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。 haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。 hasLayoutに関してはコリスさんが詳しく説明されています。 参考:IEでのCSSのバグを回避するhasLayout 以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。 × display:inline-block; × height:any valu
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
htmlページのボタンはマウスでクリックすることを前提に作られることが多いが、 実はショートカット(アクセスキー)というものを指定することが出来る。 ■ 指定の方法例 <a href="save.html" accesskey="s" >文書の保存</a> ■ これが実際のブラウザではどういう操作になるかというと ・Windows IE 「alt」+「s」 でフォーカスを移動させた後に「Enter」で実行 ・Windows Firefox2「shift」+「alt」+「s」 で実行 ・Windows Opera 「shift」+「esc」 で一覧表示させた後に「s」で実行 ・Windows Safari3 キーボードショートカットがないらしい(?) ・Mac Safari 「control」+「s」 で実行 ・Mac Firefox 「control」+「s」 で実行 ・Mac Opera
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く