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

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

04.23

「¥」マークの文字化け

Published 4月 23rd, 2010 Posted in html・CSS 2 Comments »　　

半角円マーク（¥）は、OperaやSafariなど一部のブラウザでバックスラッシュ（＼）で表示されてしまいます。
解決方法は、

＆yen;
＆#165;
（＆は半角にする）

問題は、音声読み上げに対応していないこと。

–制作メモ

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_box_1 a img,.movie_box_1 a img”)
.hover(
function() {
$(this).fadeTo(200, 0.5);
},
function() {
$(this).fadeTo(500, 1.0);
}
);
});

$(document).ready(function() {
$(“IDかclass 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);
}

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>

以上

–制作メモ

03.03

Flashのキャッシュ対策

Published 3月 3rd, 2009 Posted in html・CSS No Comments »　　

Flashにて、外部ファイルを常に新しいものと認識させる方法。

例：通常xmlを読み込む場合なら
........
rssXml.load("http://hoge.com/rss.xml"); 

と表記。

が、 常に新しいファイルと認識させるために
.......
rssXml.load("http://hoge.com/rss.xml?"+Math.floor(Math.random()<*1000));

と表記する。 

これは、“http://hoge.com/rss.xml”に、GET方式でクエリとして乱数（ランダムな数字）をくっつける事で、ブラウザに「前回とは違うファイル（リクエスト）である」と認識させることにより、しっかり新しいファイルを読み込ませるというもの。
つまり、“http://hoge.com/rss.xml?123″というURLをリクエストすることになる。
?以降の３ケタの数字がランダムで変わる。

実際問題もあり、
サーバーログの問題にぶち当たったら、参考サイト（知ったかFlash　第四回）へ。

 

–制作メモ

11.17

折りたたみできるコンテンツ表示 JavaScript

Published 11月 17th, 2008 Posted in html・CSS No Comments »　　

コンテンツが長くなる場合に、部分的に折りたたむ（非表示）ことで、すっきりと表示させることができる。簡単にアコーデオン機能を実装できるJavascript。

Accordion v2.0　-サンプルにもなっている

使い方

prototype.jsとscript.aculo.usのeffects.js、そしてaccordion.jsをhead要素内などで読み込む。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function(){
new accordion("accordion");
}, false);
</script> 

accordion（特定のID）は任意のidを設定する。

xtmlには特定のID（サンプルではaccordion）で、
accordion_toggleを付けた要素とaccordion_contentを付けた要素を囲む。
<dl id="accordion">
<dt class="accordion_toggle">タイトル</dt>
<dd class="accordion_content">本文</dd>
・
・
・
</dl>

オンマウスでアコーディオンを開いたり、はじめから特定のID部分を開いた状態にすることも可能。詳しくは、Googleで検索→「Accordion v2.0 使い方」

–制作メモ

09.04

UTF-8を強制的にSJISへ変換して表示する

Published 9月 4th, 2008 Posted in html・CSS 2 Comments »　　

携帯サイトはShit_jisで作らなくてはならない。
じゃないと、文字化けしてしまう。
WordPressなどSJISではないシステム環境を使って携帯サイトを作る場合、ブチあたる問題だ。

そこで、最終的にブラウザで表示するタイミングでUTFもしくはEUCをSJISにしてしまう方法を教えてもらった。Thanks enworks!!!
※実際は、一度UTF(EUC)で書き出したものをキャッシュし、そのキャッシュをSJISにして表示する。そのため、ソースのcharsetにはSJISと表記されていない。

方法

テンプレートになるphpファイルの頭に、

<?php
header("Content-Type: text/html; charset=Shift_JIS");
ob_start();
?>

phpの最後に、

<?php
$out = ob_get_clean();
$out = mb_convert_kana($out, "rak", "UTF-8");
$out = mb_convert_encoding($out, "SJIS", "UTF-8");
echo $out;
?>

と表記。つまりこれらのphpで変換する部分を囲めばいいわけだ。

 

–制作メモ

08.23

Googleサイトマップのつくりかた-2

Published 8月 23rd, 2008 Posted in html・CSS No Comments »　　

以前紹介した「Google Sitemaps Generator」よりもスマートなGoogleサイトマップ（sitemap.xml）を作れるサイトがありました。

Sorizeサーチエンジンフレンド

twitter

最近の記事

アーカイブ



HELLO! SANCHES LINKS

リンク