Home > CSS

CSS Archive

CSSの読み込み @importとlinkはどちらがいいのか?

Webページで、複数の外部CSSをそのページに適用させるには、

  • import.cssを用意し、その中で複数のCSSをimportさせて読み込む
  • linkタグで複数のcssを読み込む。

があると思います。

参照:Screw-Axis
@importを使うべきでない理由

参照(英語):SteveSouders.com
don’t use @import

参照(上記サイトを日本語化して紹介されています):coliss
外部スタイルシートの指定は@importとlinkでどちらがいいか

Screw-Axisさんの検証結果とSteveSouders.comの検証結果が異なっているのが興味深いです。
IE7では並列で読み込まれないようです。IE8,IE9でも検証が必要になりそうですね。
これまで自分はずっとimport.cssを用意して、その中に@importで必要なcssファイルを読み込んでいました。
自分でも検証する機会を設けて、他の人の検証結果なども見守りたいと思います。

スクロールについてくるナビゲーション、スクロール追従ナビゲーション

スクロールに追従するナビゲーションを使うことになったので、
jqueryを使って動くモノに限定して調べてみました。

サイト名:CSS Tricks
記事名:「Scroll/Follow Sidebar, Multiple Techniques」
http://css-tricks.com/scrollfollow-sidebar/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:

jqueryのバージョンは1.3.2で動作。
WindowsのIE6、Firefox3.5.10、Chromeで動作確認済み。
Firefoxではやや動作がカクカクです。

設置方法

jqueryをリンクして、その直後に以下のソースコードを挿入し、
ナビゲーション部分をdiv#sidebarでマークアップしただけで動きました。

<script type="text/javascript">
$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
          $("#sidebar").stop().animate({
            marginTop: $(window).scrollTop() - offset.top + topPadding
          });
        } else {
          $("#sidebar").stop().animate({
            marginTop: 0
          });
        };
    });
});
</script>

Zen Coding

Zen Codingという素晴らしい拡張機能(エクステンション)を偶然発見。
何で今まで知らなかったんだろうって思ってしまうくらいコーディングにおいてとても便利。
もっと情報のアンテナを広く保っとかないとなぁ~ということを痛感しました。
色々なエディターに対応してるのも凄い。

使い方は以下の通り

自分はDreamweaverCS3を使っているので、
http://code.google.com/p/zen-coding/downloads/list
でCS4対応版の拡張機能(エクステンション)のファイルをダウンロードし、解凍します。
Dreamweaverを起動して[コマンド]→[拡張機能の管理]を開きます。
そして[ファイル]→[拡張機能をインストール]を開き、解凍したファイルの中にある.mxpファイルを選択します。
これでZenCodingはインストール完了です。

CS3を使用している方はその後、
http://code.google.com/p/zen-coding/issues/detail?id=121
から、CS3対応用修正版js(zen_editor.js)をダウンロードして、

ローカルの

該当ドライブ:\Documents and Settings\該当ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding

を開いて、その中にあるjsをさっき落とした「zen_editor.js」で上書きしてあげるだけで使えるようになります。
一連のインストール作業が終わったらDreamweaverを再起動することをお忘れ無く。

そしてHTMLファイルを開いて、

div#wrap>div#contents>ul#gNav>li*3

と記述した後、Windowsの場合は[ Ctrl ]+[ , ]を押すことで以下のHTMLソースに!

<div id="wrap">
  <div id="contents">
    <ul id="gNav">
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>
</div>

ちなみに*で個数、+で前のタグの下に要素の追加ができます。

div.box>p.img+p.txt
<div class="box">
  <p class="img"></p>
  <p class="txt"></p>
</div>

という感じでCSSのように書くことでザクザクとコーディングできちゃいます。

swfobject

swfonjectは現在(2010年5月27日)バージョン2.2が安定しているという話を聞きます。
自分も今のところ一番問題の少ないバージョンであると認識していますが、
何か問題が起こったとしても責任は持てませんのであしからず。

設置方法

▼HTMLの<head>内に記述

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {menu:'false',wmode:'transparent'};
var attributes = {};
swfobject.embedSWF("img_top/movie.swf", "swfContents", "1000", "349", "8.0.0","img_top/expressInstall.swf",flashvars,params,attributes);
</script>

▼解説

  • swfobject.embedSWF(“swfのパス”, “swfの挿入場所のdivのid名”, “swfの幅”, “swfの高さ”, “想定バージョン”,
    “expressInstall.swfのパス”,flashvars,params,attributes);
    という順番に記述します。
  • パラメータを持たせるにはvar params = {};の中に書く。
    menuはメニューの表示。 (falseが非表示、trueが表示。)
    wmodeはswfの背景を透過させるかどうか。 (transparent:背景透過させる、opaque:背景透過させない)
    wmode:transparentを使いつつ、透過pngや透過gifとtransparentを使用するとデザインの幅が広がり、見た目は良くなりますが、
    確実にデータ量は重くなるのを理解のうえ使用してください。

▼HTML本文内に記述

<div id="swfContents">
<p><img src="代替イメージ" /></p>
<!--/swfContents--></div>

▼解説

  • 代替イメージを用意している場合、挿入する場所を表す<id=”swfContents”>内に記述。
  • 代替イメージには、swf内で伝えたい内容を全て含んだ画像にするか、FlashPlayerのインストールを促す画像にするのが一般的。

以上で完了ですが、このswfobjectを設置されたページを表示するエンドユーザーは以下のケースに振り分けられます。

【ケース1】想定バージョンより新しいFlashPlayerが入っている場合
通常どおりswfを再生。
【ケース2】想定バージョンで記述したバージョンより古いバージョンのFlashPlayerがインストールされている場合
Flash領域内で新しいバージョンのFlashPlayerのインストールを促すexpressInstall.swfが作動。
【ケース3】FlashPlayerがインストールされていないPCの場合
代替イメージを表示。

動作確認

Windows IE6-8
Windows Firefox3.5-3.6
Windows GoogleChrome 4.1.2
Macintosh Safari3-4

CSSによるアルファ(透明度)

opacityを使ったCSSによる透明度の設定で、ロールオーバーのように見せかけることも可能です。
Chrome最新/IE6-8/Firefox最新/Opera最新/Safari最新で確認済み。

プロパティ 対応ブラウザ
opacity モダンブラウザ全般(通常の指定)
filter IE7以前対応
-moz-opacity FF1.5以降対応
-ms-filter IE8以降対応
opacity: 0.70;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
-ms-filter: "alpha(opacity=70)";

数字はそれぞれ%として解釈されるので、
これだとロールオーバー時に70%になります。

p.bnr a:hover img {
  opacity: 0.70;
  filter: alpha(opacity=70);
  -moz-opacity: 0.70;
  -ms-filter: "alpha(opacity=70)";
}

と設定することでロールオーバー時に色を薄くできます。
バナーなどでロールオーバー画像を用意する手間が省けます。

p.bnr a:hover {
  opacity: 0.70;
  filter: alpha(opacity=70);
  -moz-opacity: 0.70;
  -ms-filter: "alpha(opacity=70)";
}

という風にimgを省いてしまうとIE6で動きませんので注意してください。

ホーム > CSS

Search
Feeds
Meta

Return to page top