- カタチグラフィックスのBlog – Katachigfxの日記と制作メモ

「html・CSS」というかたログ

01.27

CSS Compressor CSSの圧縮に！

Published 1月 27th, 2010 Posted in html・CSS No Comments »　　

CSS Compressor

スタイルシートを圧縮できるWebアプリ。
結構の圧縮率！

–制作メモ

01.26

【IE6 ハック】IE6だけにstyleを…

Published 1月 26th, 2010 Posted in html・CSS No Comments »　　

margin: 20px !important;
margin: 10px; /* for only IE6 style */

margin: 20px !important;
margin: 10px; /* for only IE6 style */

通常、importantを指定したスタイルが適用されるが、
どうやら IE6 の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまう。

–制作メモ

01.21

Ajax – SqueezeBox – Expandable Lightbox (v1.1)

Published 1月 21st, 2010 Posted in html・CSS No Comments »　　

thumb

MooTools JavaScript Framework を使ったAjaxを紹介。

SqueezeBox – Expandable Lightbox (v1.1)

おなじみAppleのサイトで使われていたポップアップウィンドウです。
利点は、通常のポップアップではないので、ポップアップブロックされる心配がないこと。

Lightbox2.0と違う点は、画像だけでないく、htmlやform、YouTube Flashを表示できます。
iFrameを使えば何でも表示できます。

使い方は簡単。

まず、上記SqueezeBox – Expandable Lightbox (v1.1)のページから下記ファイルをダウンロードします。

  • MooTools JavaScript Framework
    ここで必要なコードは「Element.Dimensions」「Fx.Tween」「Fx.Morph」「Selectors」「JSON」「DomReady (facultative)」※うまく動かない場合はすべてチェックするとうまくいきます。Download Optionsでは「YUI Compressor」を選択しましょう。最高圧縮ファイルにしてくれます。
  • SqueezeBox.rar (Package with source and assets)
    これは、「SqueezeBox.js」「SqueezeBox.css」と画像パーツが入ったパッケージ。rarはちょっと特殊な圧縮ファイルなので、rarが解凍できる解凍ファイルを探してみてください。

あとは、下記の方法を参考にしてやってみよう。

Ajax Requests Request the content via Ajax.
From Elements Content cloned or adopted from existing Elements.
IFrame Content Include site content via IFrame.
Single Images SqueezeBox for single images from a gallery.
Youtube Flash Inject flash content from Youtube.

MooToolsは色々できるね〜。
面白い。
サンプルを紹介しているサイト発見。こちら

–制作メモ

01.08

jQueryを使ってマウスオーバーエフェクト

Published 1月 8th, 2010 Posted in html・CSS No Comments »　　

sample

画像のマウスオーバーをきもちよ〜くする方法。

サンプルはBOOMBOOM-BASHのGllary

フワッとした感じがたまらない★

必要なものは、jQueryとちょっとしたJavascriptだけ。

まず、jQueryは、Google AJAX Libraries APIを使うと便利。

AJAX Libraries API についてはこちら

今回使うjQueryのURLは「http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js」

これをhead内に書く。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>

ちょっとしたJavascriptはこれ

$(document).ready(function() {
  $(".gallery a img")
  .hover(
    function() {
      $(this).fadeTo(200, 0.5);
    },
    function() {
      $(this).fadeTo(500, 1.0);
    }
  );
});

↑の表記だと改行、余白がうまくとれないので、サンプルを用意しました。

.hover(
function() {
    $(this).fadeTo(200, 0.5);

これは、オンマウス時200ミリ秒の速度で、透明度50%になるという意味

function() {
     $(this).fadeTo(500, 1.0);

これは、マウスアウト時500ミリ秒の速度で、透明度100%になるという意味
ちなみに、0にすると、透明になる。

– 制作メモ

10.29

フッターの位置を固定して常に表示 (IE6対応)

Published 10月 29th, 2009 Posted in html・CSS No Comments »　　

最近、このブログにも登場！ウィンドウ下部から離れたくないフッター。
そんな愛嬌いっぱいのフッターを作る方法を紹介します。

CSSはこう

html,body {
height:100%;
}
html {
overflow-y:scroll;
}
div#footer {
position:fixed;
bottom:0;
width:100%;
}

/* IE6 */

* html,
* html body {
overflow-y:hidden;
}
* html div#main {
height:100%;
overflow-y:scroll;
}
* html div#footer {
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

IE6対策としてハックを使用。*htmlを頭に付けるとIE6のみにスタイルを当てられる。

htmlはこう

<body>
  <div id="main">
    中身。。。。。
    <div id="footer">
      フッター部分
    </div>
  </div>
</body>

以上

–制作メモ

最近の記事

アーカイブ



HELLO! SANCHES LINKS

リンク