2011年6月2日木曜日

ブックマーク：スマホサイト

スマホ対応のサイトも作りたい今日このごろ。
入門者の役に立ちそうなサイトのメモ。


http://ascii.jp/elem/000/000/533/533011/
投稿者 M氏 時刻: 13:58 0 コメント
ラベル:

2011年6月1日水曜日

IEで背景画像がうまく表示されない

CSSで指定した背景画像が、IE7以下でちゃんと表示されないことがありました。
そんなときは、背景画像を設定しているdivの「width」を設定するとうまくいくことも。
私はwidthを100%にしたところ、表示されるようになりました。
投稿者 M氏 時刻: 0:39 0 コメント
ラベル:

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(」に一括置換
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"))
    })
})


ここでちょっと注意なのが、rollover.jsの置換の際、「$」じゃなくて「$(」で置換すること。
すべての$をjQueryに置換するとダメです。
$1_on$2だとかの$をjQueryにしちゃったらうまくいきません。


参考サイト
http://mt.nosusume.com/2007/09/jqueryjsprototypejs.html
投稿者 M氏 時刻: 20:01 0 コメント
ラベル:

2011年5月28日土曜日

ファビコン(タイトルのアイコン)の作り方

サイト上部のタイトルの左にあるアイコンって、ファビコン(favicon)って言うんですね～。
最初「ファミコン？」って聞き返しちゃいました。
で、本サイト(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
投稿者 M氏 時刻: 22:47 0 コメント
ラベル:

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;
}


なんだか、理屈じゃよくわかんないことがありますねえ。
それとも、ちゃんと理屈があるのかな？？
投稿者 M氏 時刻: 1:11 0 コメント
ラベル: ,

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; }
#contents{
width:500px;
margin-left:auto;
margin-right:auto;
background-color:#ffdff9;
text-align:left;
}

text-alignは本当はブロックレベル要素には効かないはずなんですが、IEには効くという不具合があるそうで、それを利用したものだそうですよ。
そんで、指示したtext-alignは子要素に影響するので、leftで戻しておくということです。


参考サイトはこちら：
http://www.dspt.net/stylesheet_css/001/ie_error2.html
投稿者 M氏 時刻: 0:16 0 コメント
ラベル: ,

2011年5月18日水曜日

floatで並べたリストのセンタリング

サイトのフッターなどで、リストをfloatで横並びしてメニューを表示したりしますが、このリスト全体のセンタリングがうまくできず困ってました。
確かリストの要素をインラインにして・・というのもありましたが、今回は不思議な方法を使ってみました。


(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
投稿者 M氏 時刻: 23:04 0 コメント
ラベル:

クリックしたらデフォルトの文字が消えるテキストフォーム

簡単なひとことを入れるだけ！

<input type="text" name="namae" size="100" value="最初に入ってる文章" onClick="this.value=''">


参考にしたサイトはこちら
http://blog.livedoor.jp/fpvl/archives/51129559.html
投稿者 M氏 時刻: 0:49 0 コメント
ラベル:
登録: 投稿 (Atom)