CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
CSSレイアウト崩れの原因について | Web制作 ウェブマジック
CSS指定によるレイアウト崩れの原因について、初心者の方々でも分かりやすく解説していきます。例えば、下記のような場合の対処です。 IEでは上手く表示しているのに、Firefoxで表示したらサイドバーが落ちていた。 IE6では上手く表示しているのに、IE7で表示したらサイドバーが落ちていた。 Macで表示したらレイアウトが崩れていた。 CSS指定によるレイアウト崩れの原因については、さまざまな要因が考えられますが、基本は(X)HTMLのマークアップが正しく記述されているかを最初に確認しておきましょう。 以下のレイアウト崩れに関する解説は、CSSハックの解説ではありません。IE7の登場によりIE6で使用可能だったハックがIE７では無効となるように、ブラウザ側の対応も次第に改善方向に向かいます。ハックは取り敢えずの処置と考え、CSS指定の基本を理解しましょう。 ボックスモデルの概念 レイアウトの
HTML,CSSバグ＆回避法リスト : 4. スタイルシートその他の話題
標準モードの場合、IE6.0,Opera7.0,NS6+の各ブラウザでは テーブルの内部にも多くの属性を継承しますが 互換モードやモードの区別のないブラウザ(IE4-5.5,NS4)では異なります。 互換モード(デフォルト)の場合、IE6.0では font-familyのみ継承するようです。 モードの区別のないIE4-5.5,NS4も同様です。 一方 NS6.1,NS7.0,Opera7.0では color,font-style,font-weight,letter-spacing,line-height のうち幾つかを継承しています。 いずれの場合も互換モード(デフォルト)では テーブル内部にfont-sizeは継承していません(IE3.0以外)。
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://less-ja.studiomohawk.com/
「オレがルールだ！」：HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その２
HTMLの外部ファイル化