[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
分割CSSファイルの構成とそのルール - 3ping.org
ひとつのスキンは、機能・役割ごとに独立したCSSファイルが複数組み合わさって構成されています。各CSSファイルがどのような役割をもち、スキンの一部として組み込まれているかを理解することで、既存スキンの編集が簡単になります。 ここでは、Vicunaで配布しているスキンについて、 全体の構成 コアファイルの役割 記述ルール 分割方法の特徴 に分けて解説します。 全体の構成 次の図は、各ページが読み込むCSSファイルを示したものです。Vicunaで配布している純正のスキンは、すべて以下のような構成になっています。 ページに直接読み込まれる 0-import.css は、その下の5つのファイル 1-element.css 2-class.css 3-context.css 4-layout.css 5-module.css を読み込みます。スキンのデザインのほとんどは、このうち 5-module.
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
外部CSSファイルを読み込む数と行数について - 規模が大きいサイトを制作しているのですが、共通読み込みCSSファイルが... - Yahoo!知恵袋
外部CSSファイルを読み込む数と行数について 規模が大きいサイトを制作しているのですが、 共通読み込みCSSファイルが3ファイル（各ファイルは300行程度）で、 各ページのCSSが60ファイル（各ファイル50行程度）あります。 読み込み専用のCSSをつくり、以下のような形で、一気に読み込んでしまおうと思うのですが、 初回アクセス時にブラウザの読み込み速度が遅くなるように思いますが、 一度に読み込むCSSの目安というのはございますでしょうか。 逆に一度読み込むとキャッシュに保存されるので、二度目からは表示速度アップを狙えるのですが。 ＜外部CSS読み込み専用ファイル＞ @import "common.css"; @import "html.css"; @import "color.css"; ・ ・ ・
CSSファイルどう分ける？ - Hato-Style
2006年10月20日 （金） XHTML/CSS サイトを構築するとき、HTMLとCSSを分離させ、HTMLから外部CSSを呼び出す形式の物が最も一般的な構築方法で一番好ましいといえよう。何故かというと早い話が文章と装飾定義を分離させるのがスマートなコーディング方法な訳で、ファイルを分けることで管理もラクになり、レイアウトをなおしたければ、CSSファイルだけ弄れば対処できるという事。 そこで問題なのが、CSSのファイル管理体制。一人で制作しているのであれば、独りよがりな管理方法でも殆ど問題ないだろうけど、複数人で同じサイト制作を分業するなんて場合はこの方法だと問題が発生する。 ファイル構造を示した図。 <link rel="stylesheet" href="style.css" type="text/css" media="screen,projection,tv" /> メリット フ
CSS作業効率向上うんぬん - Hato-Style
2006年07月15日 （土） XHTML/CSS CSSによるレイアウトでサイトを構築する場合の話。そういう場合は前提として(X)HTMLの中にレイアウトのための視覚的な指定や要素・属性を使用しない訳なので別途CSSファイルで視覚的な指定をする必要がある。あたりまえだが。 これが大型なサイトで複数人で作業するとなった場合などはCSSの記述規則や指定方法などをあらかじめ決めておく必要が出てくる。これもあたりまえだが。よって関わる作業員が全員内容を把握しておく必要がでてくる。 レイアウト関係であれば都度違った指定を各々が構築できるけれども、文字色や背景色に関する情報を後で追っていったりするなど結構労力を使う。そこで指定する色、指定した色を分かりやすい場所にドキュメントにまとめておくと便利だたりする。情報共有としてテキストファイルやエクセルデータなどで指定値をまとめておいたりしても良いのだけれ
HTML/XHTMLマークアップ・CSSコーディングガイドライン | ciqlie（シクリエ）
HTML/XHTMLマークアップ・CSSコーディングを代行するコーディングサービス。ディレクトリ構成 html ├common/ │ ├css/ │ │ ├import.css [各CSSファイル読み込み] │ │ ├common.css [各ブラウザスタイル調整定義] │ │ ├structure.css [サイト構造定義] │ │ ├editorial.css [サイト構成定義] │ │ ├component.css [サイト共通パーツ定義] │ │ └editorial/ │ │ └category-name.css [カテゴリ別構成定義] │ └img/ │ │ ├接頭辞_連番.拡張子 │ │ └category-name/ │ │ └接頭辞_連番.拡張子 │ └js/ │ └common.js ├category-name/ │ └index.html └index.
コーディングガイドライン
コーディングガイドライン 2006年7月6日 (木) 12:37 更新 目次 概要 ディレクトリ構造 イメージファイル名 ドキュメントタイプ コードフォーマット CSS／JavaScript Flash 送信フォーム 納品準備 概要 本ガイドライン制作メンバー 原田、田中 目的 本ガイドラインは、制作スタッフの個々人のコーディング仕様を共通化し、今後の制作・共同作業において品質の維持と向上を図るために必要な情報を明記しています。 内容的には、W3Cに準拠することを基本に、その他ファイル名やディレクトリ構造について最低限のルールを設けています。 今までとの違いに戸惑うこともあると思いますが、徐々にでも対応させて行って欲しいと思います。 また、以下で使用しているサンプル例をWeb共有に入れていますのでご確認ください。 →Web/common/gui
XHTML+CSSのガイドライン - webデザイナーのナナメガキ
最近新しく作るものに関しては(X)HTML+CSSで作るようにしている。感覚的になんとなくこうかなあと模索しながら作っていて、本当はなにが正しいんだろと思ってたらいいタイミングで以下の資料を見つけた。 『CSS Nite Vol.7 Web制作現場の対立を解消する！(X)HTML+CSSガイドライン作り』 を見て感動したので、忘れないうちに気になったところをメモ。 ■ビジュアルとテキストのバランスは、サイトの雰囲気などイメージ作り/ブランディングに影響する。何でもテキストにすればよいわけではない。 ↑これは一度失敗しました。目立たせたいパーツやSEO的に必要ない箇所は画像でも良いなと。なにごともバランスですが。 ガイドラインの必要性 誰が作っても一定の品質を確保できる 制作チーム、更新チーム、外注、クライアント間での「無駄」の発生が防げる。キーパーソンが抜けても比較的スムーズに穴埋めできる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
