ホーム > タグ > CSS

CSS

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>

西在宅マッサージ

西在宅マッサージのWebサイトを制作しました。

西在宅マッサージ

http://www.nishi-massage.com/

「アットホームな暖かい雰囲気で」とのオーダーをいただいたので、クレヨン調のテクスチャを用いてデザインしました。
高齢な方が見られることも想定して、文字のサイズも大きめに設定。

日々更新+追加をしていくのを前提に、あえてコンパクトな状態からスタートさせています。
近々施術中の写真ページの追加とトップページFlashを制作予定です。

iepngfix_tilebg.js

これまでiepngfix.jsというIE6で透過PNGを使えるようにするJavascriptがありましたが、
CSSで背景で使用すると間延びしてしまったりと色々問題が発生しました。
その問題のせいで、使いどころには制約がありましたがiepngfix_tilebg.jsならそれを解消してくれます。
設置もそんなに難しくありませんでした。

http://www.twinhelix.com/test/

上記サイトよりIEPNGFix v2.0 Alpha(ZIP形式)をダウンロード&解凍して、
iepngfix.htcとblank.gifとiepngfix_tilebg.jsを取り出し、各サイトに放り込みます。
初期状態だと、この3つのファイルは同じ階層の場合で設定されているので、
blank.gifやinpngfix.htcの階層を移動させた場合はそれぞれパスを変更しなければいけません

【 フォルダ構成 】
html
┣index.html
┣iepngfix.htc
┣img/blank.gif
┗js/iepngfix_tilebg.js

【 html側に記述する内容 】

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

imgタグでhtml内にpngを挿入する場合に必要。htmlと同階層にある場合で記述しています。

<script type="text/javascript" src="js/iepngfix_tilebg.js" charset="utf-8"></script>

bakground等でpngを挿入する場合に必要。jsフォルダに格納した場合で記述しています。

【 iepngfix.htc内の記述を変更 】
16行目のblank.gifのファイルパスを格納した場所に変更。

IEPNGFix.blankImg = 'img/blank.gif';

※blank.gifをimgフォルダに格納した場合で記述しています。

iepngfix.htcからblank.gifを、htmlファイルからiepngfix_tilebg.jsを、
このそれぞれを呼び出すパスを制作しているファイル構成に合わせて書き換えるだけで
htmlファイル内の全てのpngファイルがIE6でも透過されます。

【重要な問題】

  • 問題1:ページを開くのが重くなった。
  • 問題2:IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。
  • 問題3:ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。

問題1「ページを開くのが重くなった。」の解決方法

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

を、透過PNGを使用している場所のみに書き換える

例)
<style type="text/css">
div#mainImg img,
div#contentsBg{behavior: url(iepngfix.htc);}
</style>

問題2「IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法

【 html側に記述する内容 】

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

を、以下のように書き換える。

<!--[if lte IE 6]>
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
<![endif]-->

意味としては、IE独自の条件分岐コメントでIE6以下のバージョンの時のみ適用するというもの。

問題3:「ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法

print.cssを用意してhtmlファイルにリンク、そのCSSの中に以下を記述。

script {display:none;}

以上で、印刷時にも表示されます。

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のように書くことでザクザクとコーディングできちゃいます。

Home > Tags > CSS

Search
Feeds
Meta

Return to page top