TAG | Webサイト制作
CSSを使った簡単なロールオーバーのやり方メモ。
/* CSS */
ul#menu {
lsit-style:none:
width:100%;
/*必要に応じてmargin-leftやpadding:0;を使う*/
}
ul#menu li {
list-style:none;
float:left;
width:〇〇px;
height:〇〇px;
/*必要に応じてpadding:0;を使う*/
}
ul#menu a {
display:block /*ポイント*/
width:〇〇px;
height:〇〇px;
text-indent:-9999px; /*ポイント*/
text-align:center; /*ポイント*/
/*必要に応じてmargin:0;を使う*/
}
a.home {
background:url(画像パスを入れる):
}
a:hover.home {
background-position:0px -〇〇px;
}
・・・
画像はこんなものを乗せる。
サンプル画像
これで、画像のwidthとheightを取得して、必要分だけロールオーバーした時に下の画像に切り替えることが出来ます。
JavaScirptの方が簡単にロールオーバーが出来ますが、JavaScriptがOFFになっている場合を想定して、CSSでロールオーバーした方がいい場合もあります。しかし、googleの検索規定かなにかで、ページに写らないもの（例えばtext-indent:-9999px;等）はいけない事になっていますが、特に今まで使用していて問題はありませんでした。
自分用のメモと参考までに記しておきます。
では。
昨日も今日も、Webクリエイターやっていました。
基本的にCSSコーディングをするのですが、CSSでブラウザによって表示が異なることが一番困ります。
特にMicrosot社製品の【Internet Explorer】シリーズはバグが多いことで知られていますね。
【IE8】になり、ようやくまぁまぁ使えるブラウザになりましたが、【IE7】までは酷いですね。
ここで、ちょっとブラウザハッキングについてまとめてみます。
【Internet Explorer6以下】
■スターハック
* html #hack { xxxx }
セレクタの前に【* html】をつける
■アンダースコアハック
#hack { _xxxx }
プロパティの前に【_】アンダースコアをつける
【Internet Explorer7】
*:first-child+html #hack { xxxx }
セレクタの前に【*:first-child+html】をつける
※注意
実は【Internet Explorer7】には、WindowsXP用の128ビット板とWindowsVista用の256板があります。
それぞれハッキングの方法が違うようです。まだ検証していません。
困ったものです・・・
【Internet Explorer6 or 7】
#hack { /xxxx }
プロパティの前に【/】をつける
【Internet Explorer6のみ除外】
#hack { xxxx /**/ xxxx }
プロパティの後ろに【/**/】をつける
【Firefox】
#hack { xxxx }
#hack,x:-moz-any-link { xxxx } // Fire1以降に適用される
#hack,x:-moz-read-only { xxxx } // Fire1.5、2.0以降に適用される
#hack,x:-moz-broken { xxxx } // Fire3.0以降に適用される
#hack,x:x { xxxx } // 一部ブラウザが未対応セレクタが含まれているグループを無視しないことがあるため、一番最初のデフォルト指定と同じ指定をする
【【Internet Explorer7以外のモダンブラウザ】
html>/**/body #hack { xxxx }
セレクタの前に【html>/**/body】をつける
※対応ブラウザ：Firefox、Safari、Opera、Chrome、IE8
html[xmlns] #hack { xxxx }
セレクタの前に【html[xmlns]をつける
※対応ブラウザ：Firefox、Safari、Opera、Chrome、IE8
一通り、よく使うブラウザのハッキング方法をまとめてみました。
今後の自分用のドキュメントとして使います。
では。
お久しぶりです。
なんだか、案件が急に沢山舞い込んできて、忙しい日々を過ごしております。
つくづく、自分の「スキルの無さ」を痛感します、仕様書とか見ると・・・
そして、案件の依頼をしてくださった会社様には大変申し訳ないのですが、
断ざるを得ない案件もありまして、ただただ陳謝致します。
今もまだ案件を抱えている状況下ですが、嬉しいことに沢山お話がきます。
その中でも、マルチタスクで動けるような案件を選んでご返答さしてもらっています。
決して稼いでいる訳ぢゃないのですが、なかなかどうして。
Webの世界は難しいですね。
さて、暇になったら「やるぞやるぞ」と言っていましたsixpass.netのリニューアルですが、多忙につき延期します(笑)
ご勘弁を～(汗
バッテリでもMax Performanceで設定しているWindows7×X60ですが、
Full Speedで2時間は持ちますﾈｰ♪使えるノートです♪ﾎﾝﾄ♪
でわまた。
＠tak
Office SixPass · sixpass.net · ThinkPad · Webサイト制作 · Windows7 · ホームページ制作
只今、抱えている案件でWebサイトを制作しているのですが、ブラウザチェックにかなりの徒労を費やしました。
とにかくIEはバグが多い！
FireFox3.6ベースで作ったので、ブラウザチェック時に大変苦労しました。
そこで、IEハックのまとめをメモっときます。
【IE6.0】
CSSのプロパティにアンダースコアをつける
例：
margin-left:10px;
↓
_margin-left:10px;
【IE7.0】
CSSのセレクタに「*:first-child+html」をつける
例：
*:first-child+html .class {
＊＊＊＊
}
【IE8.0】
CSSのセレクタに「html>/**/body」をつける。また、その他のブラウザ用には「html:not(:target)」
例：
/*IE8.0のみ*/
html>/**/body .class{
＊＊＊＊
}
/*その他のブラウザ*/
html:not(:target) .class{
＊＊＊＊
}
こんな感じでIEハック出来ました。
それにしても・・・
IEなんて嫌いだぁ～っ！
と、つくづく思いました(笑)
ちなみに一番苦労したのが、IE7.0でした。
あれ、辞めません？Microsoftさん？(笑)
でわ。
＠tak
ようやく、サーバーという名前に相応しい状態になったFedora11。
今回はLAMP環境の構築をしました。ubuntuのLAMP環境構築のページはググれば沢山出てくるのですが、Fedora11でのサイトが中々見つからなかったので、覚書程度に残しておきます。
まずは、Apacheの設定。GUIで行きました。「ソフトウェアの追加と削除」からApacheを検索して、インストールする、だけ。ドキュメントルートは、「/var/www/html/」になります。html配下にディレクトリとかを別ユーザーから操作する時は、パーミッションを変えてあげましょう。「chmod 777 /var/www/html」とか。作成したら、711あたりに戻しておきましょう。http://localhost/でTestPageが表示されればOKです。
次にPHP。これもGUIで行きましょう。「ソフトウェアの追加と削除」からPHPを検索して、インストールする、だけ。先ほどのApacheのドキュメントルートに、次のような内容でコードを書き、ドキュメントルートに配置しましょう。
＜?php
phpinfo();
?>
これを、index.phpと命名し、ドキュメントルート直下に置きましょう。ブラウザでhttp://localhost/でPHPの情報がずら～っと出てくればOK。
最後にMySQL。これもGUIで行きましょう。「ソフトウェアの追加と削除」からMySQLを検索して、インストールする。これにはちょこっと文字コードの設定をしてあげましょう。viで/etc/my.cnfを開きます。[mysqld]の項目の一番下の「old_passwords=1」の下に、以下の文を書きましょう。因みにviの使い方は、「i」で挿入。「:w」で保存。「:q」で閉じる、です。
default-character-set=utf8
これで、デフォルトの文字コードがUTF-8になります。あとはクライアントの文字コードも追加しましょう。以下の文を追加します。
[mysql]
default-character-set=utf8
MySQLを起動しましょう。
# /etc/rc.d/init.d/mysqld start
これで起動します。PHPと関連付いているか、次のようなPHPファイルを作成し、DBに接続出来るか確認します。
＜?php
mysql_connect(“localhost”,”root”,”") or die(“Error MySQL);
echo “Success MySQL”;
?>
これをmysql.phpとかに命名して、ドキュメントルートに置きましょう。http://localhost/mysql.phpを叩きます。Success MySQLと表示されれば接続OK！Error MySQLの場合は、上記の手順のどこかが間違っているか、MySQLのユーザー及びrootのパスワードを先に作っちゃったか、です。念のため、mysql_connect(“localhost:3306～でも試してみましょう。3306はMySQLのデフォルトのポート番号です。
ここまで出来ればLAMP環境の完成です。最後にMｙSQLの自動起動設定をしてみましょう。
# chkconfig mysqld on
これで自動起動になります。ubuntuよりも簡単かもしれませんね。GUIベースでの説明ですいません・・・CUIが苦手なもので・・・
でわ。
＠tak
Fedora11 · LAMP · Linux · PHP · ubuntu · UTF-8 · Web · Webサイト制作 · インストール · 文字コード
