スマホ対応のサイトも作りたい今日このごろ。
入門者の役に立ちそうなサイトのメモ。
http://ascii.jp/elem/000/000/533/533011/
2011年6月2日木曜日
2011年6月1日水曜日
IEで背景画像がうまく表示されない
CSSで指定した背景画像が、IE7以下でちゃんと表示されないことがありました。
そんなときは、背景画像を設定しているdivの「width」を設定するとうまくいくことも。
私はwidthを100%にしたところ、表示されるようになりました。
そんなときは、背景画像を設定しているdivの「width」を設定するとうまくいくことも。
私はwidthを100%にしたところ、表示されるようになりました。
2011年5月31日火曜日
rollover(jQuery)とlightbox(prototype.js)の競合を回避する
javascriptを複数設定すると、干渉しあってうまく作動しないことがある、と聞いてはいたのですが、実際ロールオーバーとライトボックスを設定した際、競合が起きてしまいました。
これは初心者的な言い方で言うと、jQueryのjsファイルとライトボックスのprototype.jsファイルの両方に「$」の指示があるので、うまく読み込めなくなってしまう・・・というようなことみたいですね。
なので、jQueryの方のjsファイル(ここではrollover.js)の指示出しの「$」を置き換えればOKらしいっす。
手順は
1.HTMLファイルでjQueryのjsファイルの「$」を別のもの(「jQuery」)にするという指示を書く
2.jQueryのjsファイルの「$」を「jQuery」に置換する
・・・と意外に簡単!
で、具体的な書き方はこんな感じ。
【HTML】・・・赤字の部分を追加
<!-- jQuery読み込みと競合回避 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="common/js/rollover.js"></script>
<!-- lightboxスプリクト読み込み -->
<script type="text/javascript" src="common/js/prototype.js"></script>
<script type="text/javascript" src="common/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="common/js/lightbox.js"></script>
【rollover.js】・・・「$(」を「jQuery(」に一括置換
ここでちょっと注意なのが、rollover.jsの置換の際、「$」じゃなくて「$(」で置換すること。
すべての$をjQueryに置換するとダメです。
$1_on$2だとかの$をjQueryにしちゃったらうまくいきません。
参考サイト
http://mt.nosusume.com/2007/09/jqueryjsprototypejs.html
これは初心者的な言い方で言うと、jQueryのjsファイルとライトボックスのprototype.jsファイルの両方に「$」の指示があるので、うまく読み込めなくなってしまう・・・というようなことみたいですね。
なので、jQueryの方のjsファイル(ここではrollover.js)の指示出しの「$」を置き換えればOKらしいっす。
手順は
1.HTMLファイルでjQueryのjsファイルの「$」を別のもの(「jQuery」)にするという指示を書く
2.jQueryのjsファイルの「$」を「jQuery」に置換する
・・・と意外に簡単!
で、具体的な書き方はこんな感じ。
【HTML】・・・赤字の部分を追加
<!-- jQuery読み込みと競合回避 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="common/js/rollover.js"></script>
<!-- lightboxスプリクト読み込み -->
<script type="text/javascript" src="common/js/prototype.js"></script>
<script type="text/javascript" src="common/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="common/js/lightbox.js"></script>
【rollover.js】・・・「$(」を「jQuery(」に一括置換
jQuery(function(){
jQuery("img.rollover").mouseover(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
}).mouseout(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
}).each(function(){
jQuery("<img>").attr("src",jQuery(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
})
})
jQuery("img.rollover").mouseover(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
}).mouseout(function(){
jQuery(this).attr("src",jQuery(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
}).each(function(){
jQuery("<img>").attr("src",jQuery(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
})
})
ここでちょっと注意なのが、rollover.jsの置換の際、「$」じゃなくて「$(」で置換すること。
すべての$をjQueryに置換するとダメです。
$1_on$2だとかの$をjQueryにしちゃったらうまくいきません。
参考サイト
http://mt.nosusume.com/2007/09/jqueryjsprototypejs.html
2011年5月28日土曜日
ファビコン(タイトルのアイコン)の作り方
サイト上部のタイトルの左にあるアイコンって、ファビコン(favicon)って言うんですね~。
最初「ファミコン?」って聞き返しちゃいました。
で、本サイト(http://miigle.lolipop.jp/)にファビコンを設定してみました。
これが結構簡単に作れるんですよ。
という流れ。
もとの画像はサイズはどんなんでも良いと言うことなんですが、出来上がったときイメージが違ったりするので、最終サイズ(16ピクセル×16ピクセル)で作ったほうがいいかと思います。
上記2のサイトは英語ですが、そんなに難しいことはありませんでしたよ。
設定方法は、ダウンロードしたzipフォルダーにもRead meファイルで添付されてます。
手順の詳細(日本語)および参考にしたサイトはこちら
http://www.tagindex.com/hp_guide/img/favicon.html
最初「ファミコン?」って聞き返しちゃいました。
で、本サイト(http://miigle.lolipop.jp/)にファビコンを設定してみました。
これが結構簡単に作れるんですよ。
- 1. ファビコン用の画像を作成する
- ファビコンで使用する画像を作成します。サイズは問いませんが、正方形である必要があります。作成した画像は、GIFやPNG形式等で保存しておきます。
- 2. ファイル形式を変換する
- 作成した画像は、ファビコン用の形式に変換する必要があります。アイコン作成ソフトでも変換できますが、ここではFavIcon from Pics(変換サイト)を利用して変換することにします。このサイトで変換したファイルはzip形式でダウンロードすることになるので、それを解凍して使用します。
- 3. ファビコンファイルをアップロードする
- 作成されたファビコンファイル(favicon.ico)を、サーバーにアップロードします。
- 4. タグの設定
- ページの <HEAD> ~ </HEAD> 内に、LINKタグを設定します。
という流れ。
もとの画像はサイズはどんなんでも良いと言うことなんですが、出来上がったときイメージが違ったりするので、最終サイズ(16ピクセル×16ピクセル)で作ったほうがいいかと思います。
上記2のサイトは英語ですが、そんなに難しいことはありませんでしたよ。
設定方法は、ダウンロードしたzipフォルダーにもRead meファイルで添付されてます。
手順の詳細(日本語)および参考にしたサイトはこちら
http://www.tagindex.com/hp_guide/img/favicon.html
2011年5月20日金曜日
リストの文字が垂直方向中央に配置されないとき
ul、liでナビゲーションメニューなどを作る時、行の高さなどはliに指定しても aにしていしても同じかな・・と思っていたのですが、そうでもないようです。
liに指定すると、IEでは上付きに表示されてしまうことがありました。
そんなときは、 aに指定をすると大丈夫。
ただ、理由はよくわかりませんが、heightとline-height両方設定しないとうまく配置されなかったりします。
例)「Navi」idで囲っている、liで作ったナビゲーション
<CSS>
#Navi a{
display: block;
text-decoration: none;
height: 28px;
line-height: 2em;
}
なんだか、理屈じゃよくわかんないことがありますねえ。
それとも、ちゃんと理屈があるのかな??
liに指定すると、IEでは上付きに表示されてしまうことがありました。
そんなときは、 aに指定をすると大丈夫。
ただ、理由はよくわかりませんが、heightとline-height両方設定しないとうまく配置されなかったりします。
例)「Navi」idで囲っている、liで作ったナビゲーション
<CSS>
#Navi a{
display: block;
text-decoration: none;
height: 28px;
line-height: 2em;
}
なんだか、理屈じゃよくわかんないことがありますねえ。
それとも、ちゃんと理屈があるのかな??
IEでセンタリングできない時
ページ全体をセンタリングしたいとき、全体をdivで囲って、CSSで margin-left:auto; margin-right:auto; とか指示しますよね。
しかし、なぜかIE8にうまく適用できない時がありました。
そんなときは、全体を囲っているdivをさらにdivで囲ってこんなCSSを書くとうまくいきます。
<HTML>
<div id="wrapper">
<div id="contents">
<p>内容</p>
</div>
</div>
<CSS>
#wrapper { text-align:center; }
しかし、なぜかIE8にうまく適用できない時がありました。
そんなときは、全体を囲っているdivをさらにdivで囲ってこんなCSSを書くとうまくいきます。
<HTML>
<div id="wrapper">
<div id="contents">
<p>内容</p>
</div>
</div>
<CSS>
#wrapper { text-align:center; }
#contents{
width:500px;
margin-left:auto;
margin-right:auto;
background-color:#ffdff9;
text-align:left;
}
width:500px;
margin-left:auto;
margin-right:auto;
background-color:#ffdff9;
text-align:left;
}
text-alignは本当はブロックレベル要素には効かないはずなんですが、IEには効くという不具合があるそうで、それを利用したものだそうですよ。
そんで、指示したtext-alignは子要素に影響するので、leftで戻しておくということです。
参考サイトはこちら:
2011年5月18日水曜日
floatで並べたリストのセンタリング
サイトのフッターなどで、リストをfloatで横並びしてメニューを表示したりしますが、このリスト全体のセンタリングがうまくできず困ってました。
確かリストの要素をインラインにして・・というのもありましたが、今回は不思議な方法を使ってみました。
どーしてそうなるのか、いまいちよく分かってないのですが(^^;
ちなみに参照させていただいたサイトはコチラです。
http://www.coolwebwindow.com/csstips/csstechnic/000241.php
確かリストの要素をインラインにして・・というのもありましたが、今回は不思議な方法を使ってみました。
(X)HTMLコード
<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</div>
CSSコード
div#menu {
position:relative;
overflow:hidden;
}
div#menu ul {
position:relative;
left:50%;
float:left;
}
div#menu li {
position:relative;
left:-50%;
float:left;
}
どーしてそうなるのか、いまいちよく分かってないのですが(^^;
ちなみに参照させていただいたサイトはコチラです。
http://www.coolwebwindow.com/csstips/csstechnic/000241.php
登録:
投稿 (Atom)