jQueryでスライドを作成してみました。
イメージ
http://yujiueda.sakura.ne.jp/blog/110620slider/
ソース自体は上記のイメージで見ていただくとして(かなり細かくコメントを記述してます)、
ポイントとなる部分を補足。
最近、私がやらかしたミスなんですが、調べてみると
ありがちな間違いらしいので、忘れないうちに。
とりあえず、このコードを例に。
<table id="table1">
<tr>
<th>表題</th>
<td>内容</td>
</tr>
</table>
こんなテーブルで、"table1"というIDを割り付けたテーブル内の
属性を"th"と"td"の"align"をまとめて設定しようとしたのですが、
#table1 th , td {
text-align: right;
}
と、記述して失敗しました。
これだと、「"table1"内の"th"」と「全ての"td"」となってしまい、
"table1"というIDが割り付けられていないテーブルの"td"にも
影響してしまいます。
なので、
#table1 th , #table1 td {
text-align: right;
}
と、記述すれば「"table1"内の"th"」と「"table1"内の"td"」を指定でき、
別のテーブルの"td"に影響する事はありませんでした。
以前作成したサイトのクライアントから「一部のページが文字化けを起こしている」と
連絡を受けました。
とりあえず、Firefox3.5、IE6、IE8、Chrome2.0で確認したが、別に文字化けは起こしておらず、
正常に表示されていた。
念のため、別の端末でチェックすると、これはこれは見事な文字化け・・・。
てか、画面全体が真っ白で何も表示されていないページまであって、
私の頭の中まで真っ白になりました・・・。
で、状況を検証すると、IE8でエンコードの「自動選択」にチェックを入れずに閲覧した場合に
この症状が発生していました。
「charset」を正しく指定してもなぜか、ダメ。
「自動選択」にチェックを入れていれば正常に表示されるということは分かったけど、
IE8の初期設定では「自動選択」にチェックが入っていないはずなので、何の解決にも
ならない・・・。
で、いろいろと調べた結果、「charset」の宣言前に他の情報(「title」など)を記述していたことが
原因でした。
つまり
[これだとダメ]
<html>
<head>
<title>タイトル</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
※特に日本語が入るとダメなようです
[これなら大丈夫]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>タイトル</title>
</head>
※「<head>」の直後に「charset」を宣言するのがポイント
よくよく考えてみると、「charset」宣言より前にマルチバイト文字があれば、
そりゃあ、おかしくもなるかな。
これって、私が知らなかっただけで有名なコトなのかな?
とりあえず、「そこは違うぞ」とか「こんな対策もあるよ」という方は情報を共有していただけると
うれしいです。
「ワザ」と呼ぶのが適切かどうかわからないですが、すごく便利な操作方法を
紹介している記事を発見したので、感動の勢いでブログ更新です。
何と、Windows IMEの日本語入力が
○Shift+「無変換」で OFF
○「カタカナ/ひらがな」で ON
と、切り換えれるんですね。
「半角/全角」キーで切り換えるのって、今、どっちに設定されているか覚えていないと
いけないんで、微妙に使い勝手が良くないんですよね。
MACでいうところの「英数」キーと「かな」キーでの切り換えれ切り替えと同じですね。
世の中には様々なOSがあり、様々なブラウザがあります。
で、全てのブラウザがCSSなどを同じ解釈で表示してくれればいいのですが、
なかなか、うまくいかず、閲覧環境が変わるとレイアウトがくずれてたりする
なんてことが、しょっちゅうあるんですよね。
そこで、見つけたのがYahoo! UI Libraryから調達可能な「fonts.css」とよばれる
CSSファイル。
このファイルを読み込むだけで、基本サイズが13pxにしてくれるというスグレモノ。
読み込み方はいたって簡単。
ダウンロードしたファイルを
<link rel="stylesheet" href="fonts.css" type="text/css"> |
http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css」