CSSの@importを無くしただけで劇的にレンダリング速度が速くなった | チバのブログ
今日、仕事で試してみたのですがとても効果があったので書いておこうと思います。 なにかというと共通のCSSとかjavascript用のCSSとかをまとめて@importで読み込むためにimport.cssとかって作ったりしますが、そこで読み込んでいる順番で<head>に書いてえば@importで読み込んでいるCSSが多い時はサイトのレンダリングの時間がかなり早くなります。 import.cssの場合 例えばこんな感じでCSS内で共通のCSSをインポートしていると思います。で、それを各ページ用のCSSでまたimportするみたいな感じです。 @import 'reset.css'; @import 'font.css'; @import 'thickbox.css'; 変更後 これを以下のように変えるだけで今回の案件では劇的にレンダリングの速度が変わりました。 <head> <link re
title属性をつけてスタイルシートを読み込む場合の注意点
title属性をつけてスタイルシートを読み込む場合の注意点 link要素にtitle属性を付けてスタイルシートを読み込ませるとこれは優先スタイルシートと呼ばれるスタイルシートになります。 この件について問題があるサイトが報告されていますので、この辺の仕様と注意点について紹介しておきましょう。 固定スタイルシート(persistent style sheet) 固定スタイルシートとは文字通り、固定的に読ませるスタイルシートの指定方法です。 これによって指定されているスタイルは、以下で説明する優先スタイルシートや、代替スタイルシートと同時に適用されます。 固定スタイルシートはtitle属性を付けずにlink要素を記述します。 <link rel="stylesheet" href="foobar.css" type="text/css"> 優先スタイルシート(preferred style s
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
CSS「display: table」と「display: table-cell」で出来ること｜アイビーネットblog
IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を比較してみたいと思います。 「float」を使った従来の
セレクタ - CSS2 リファレンス
作者ホームページサービス（hp.vector）は終了いたしました。 長らくのご利用、ありがとうございます。 ご不明な点があれば、お問い合わせページをご覧の上、お問い合わせください。 ※15秒後にトップページに戻ります。 (c) Vector HOLDINGS Inc.All Rights Reserved.
自分が使っている Firefox 3 の Add-on 30種を紹介する - インフラメンコ
自分が使っている Firefox 3 の Add-on 30種を紹介する 自分が使っている Firefox 3 の Add-on 30種を紹介する Jul252008 Author: ゴリ丸 Categories: IT関連, その他 Tags: add-on, firefox Bookmarks: 人が登録 Next Page: Plurkについてアレコレと Prev Page: デスクトップを3Dにすると、すごく楽しいことになった もうすでに様々なブログなどでFirefox 3 の Add-on は紹介されているわけですが、あえて今、私が使っているAdd-onを紹介してみたいと思います。 使ってるAdd-onの数は、まあ普通だと思います。が、誰かの新しい発見になればいいかなぁと思っている程度の記事です。 またFirefoxのAdd-onは本当に数多くあるため、みんなで情報共有したいとい
Firefox だと沖縄県警サイトが悲惨になる件について - xenoma日記
Firefox で沖縄県警のサイトを見てみましょう。たぶん悲惨なことになっていると思います。縮小キャプチャを以下にあげておきます。 ▲左：Firefox3 右：IE7 (沖縄県警のサイトTOPのキャプチャ（部分・縮小）) IE など他のブラウザだとキレイに見えるのに、なぜ Fx では悲惨なことになるのでしょうか？ 原因の推測 スタイルシートの指定の仕方が原因かと思います。ソースを見てみます。 <link rel="stylesheet" href="css/import.css" type="text/css" media="print" /> <link rel="stylesheet" href="css/import.css" type="text/css" media="screen" /> このように同じファイル（import.css）を2度指定しています。指定されている imp
IE6で閲覧すると。
hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
![[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
CSS 3における新しいレイアウト手法：ボックスレイアウト - builder by ZDNet Japan
ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認
ブラウザの設定を初期化させるCSSとチェックツール
CSS入門の3回目は、Webブラウザにあらかじめ設定されているスタイルの初期化とボックスモデル、CSSの状態を確認するツールとしてFirebugを分かりやすく説明します。 初心者の方は少し難しい部分もあるかもしれませんが、第1回「ちょっとサイトをステキにするCSSの基本」、第2回「良いデザインを行うためのCSSの下地を作ろう」の連載を読んでいただければ幸いです。 Webブラウザの初期スタイルをなくす CSSを使ったデザインを行ううえで最初に行わなければならないのが、Webブラウザの初期スタイルをなくすことです。 前回の記事でh1タグについて解説しましたが、そのとき実際Webブラウザには大きいサイズの文字が表示されたと思います。 ●スタイルを初期化せずにWebブラウザに表示した結果 皆さんもご存じのとおりサイズの大きい文字が表示されましたね。 これがまさに各Webブラウザが持っているh1タグ
画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む 画像の下に謎の余計な隙間が見える 背景色を付けたボックス内に画像を配置した際に、画像の下に謎の隙間が見えることがあります。この無駄な空間は、なぜ表示されるのでしょうか。また、この隙間をなくすには、どうすれば良いでしょうか？
![画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/07356548dced5830ac122644793311a373810346/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F8%2F9%2Ftopimg_original.png)
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
Basic HTML data types (ja)
上記の通り、色指定の値「#800080」と「Purple」とは、どちらも紫色を表す。 6.5.1 色を用いる際の注意 カラー化によって、文書はより多くの情報を表すようになり、また読みやすくもなるだろう。しかし、カラー化については以下の指針を考慮に入れられたい。 HTMLの要素や属性によって色指定を行うことは 推奨しない。その代わりにスタイルシートを用いるよう勧める。 色盲の人を困らせるような配色には様々なパターンがあり、どの組み合わせにおいても慎むこと。 背景画像や背景色の指定を行う場合は、テキスト類への色指定も行うこと。 BODY要素や FONT要素、そして表のbgcolorによる色指定は、環境が違うと見え方も異なる。 (例えば、ワークステーション、マック、ウインドウズの違いや、液晶表示とCRT表示の違い。)従って、ある特定機種での見栄えに完全に依存するべきではない。 ただし将来的には、
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
書字方向 - ばけらの CSSリファレンス
content プロパティは、以下のような値をとります。 <文字列> …… 文字列を指定します。指定された文字列がそのまま内容となります。 <URI> …… 外部リソースの URI を指定します。たとえば、画像を要素の内容としたい際に画像の URI を指定することが出来ます。ユーザエージェントがそのリソースを扱えない場合は、単純に無視されます。代替テキストのようなものは指定できませんので、利用の際には注意してください。 <カウンタ> …… 「1,2,3……」「い,ろ,は……」などの連番を内容とします。詳しくは<カウンタ>の項を参照してください。 attr(X) …… 当該要素の X属性の値を内容とします。たとえば、attr(title)とすると、title属性で指定されている値が要素の内容となります。残念ながら CSS2 では、他の要素の属性値を参照することは出来ません。 open-quo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
userchrome.css - Mozilla Firefox まとめサイト
XHTML/CSS リファレンス [WEB ARCHIVES RETURN AGAIN]
http://www.favorite-labo.org/archives/467.html
CSSによる段組（マルチカラム）レイアウト講座