スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

--/--/-- --:-- | スポンサー広告 | PAGE TOP▲

jQueryでスライド(スクロール)を作成してみました

jQueryでスライドを作成してみました。
イメージ
http://yujiueda.sakura.ne.jp/blog/110620slider/

ソース自体は上記のイメージで見ていただくとして(かなり細かくコメントを記述してます)、
ポイントとなる部分を補足。

  1. 「slider.css」10行目「position: relative;」
    通常「overflow:hiden」を指定すると親要素からはみだす子要素は非表示になるのですが、IEは
    子要素に「position:relative」を指定すると親要素で指定した「overflow:hidden」が効かなくなる
    というバグがあるので、その対策。
  2. 「index.html」内の各スライドのdivに「slideList」というクラスを指定
  3. もしこのコードをそのまま流用するなら、下記項目を適宜、変更してください。
    ・「slider.css」2行目〜5行目のサイズ指定
    ・「slider.js」2行目のスクロール時間指定
    ・「index.html」17行目〜20行目、「slideList」というクラスを指定されたdiv内(数が変わってもOKです)

2011/06/20 02:21 | JavaScript | COMMENT(0) | TRACKBACK(0) | PAGE TOP▲

cssで複数のタグの属性をまとめて設定する

最近、私がやらかしたミスなんですが、調べてみると
ありがちな間違いらしいので、忘れないうちに。

とりあえず、このコードを例に。
 <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"に影響する事はありませんでした。

2009/09/03 23:01 | CSS | COMMENT(0) | TRACKBACK(0) | PAGE TOP▲

「charset」の宣言について

以前作成したサイトのクライアントから「一部のページが文字化けを起こしている」と
連絡を受けました。

とりあえず、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」宣言より前にマルチバイト文字があれば、
そりゃあ、おかしくもなるかな。
これって、私が知らなかっただけで有名なコトなのかな?
とりあえず、「そこは違うぞ」とか「こんな対策もあるよ」という方は情報を共有していただけると
うれしいです。

2009/08/29 23:03 | HTML | COMMENT(0) | TRACKBACK(0) | PAGE TOP▲

IMEの便利ワザ

「ワザ」と呼ぶのが適切かどうかわからないですが、すごく便利な操作方法を
紹介している記事を発見したので、感動の勢いでブログ更新です。

何と、Windows IMEの日本語入力が
  ○Shift+「無変換」で OFF
  ○「カタカナ/ひらがな」で ON
と、切り換えれるんですね。

「半角/全角」キーで切り換えるのって、今、どっちに設定されているか覚えていないと
いけないんで、微妙に使い勝手が良くないんですよね。

MACでいうところの「英数」キーと「かな」キーでの切り換えれ切り替えと同じですね。

2008/12/29 22:12 | Windows | COMMENT(0) | TRACKBACK(0) | PAGE TOP▲

異なるブラウザ間でのフォントサイズの差異解消の便利ツール

世の中には様々なOSがあり、様々なブラウザがあります。

で、全てのブラウザがCSSなどを同じ解釈で表示してくれればいいのですが、
なかなか、うまくいかず、閲覧環境が変わるとレイアウトがくずれてたりする
なんてことが、しょっちゅうあるんですよね。

そこで、見つけたのがYahoo! UI Libraryから調達可能な「fonts.css」とよばれる
CSSファイル。

このファイルを読み込むだけで、基本サイズが13pxにしてくれるというスグレモノ。

読み込み方はいたって簡単。
ダウンロードしたファイルを

<link rel="stylesheet" href="fonts.css" type="text/css">

というカンジで読み込むだけ。
あるいは「fonts.css」の部分を
http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css
に書き換えて直接YUIのサイトにリンクを張ってもOKです。

一度は試してみる価値があるのではないでしょうか?

あとはmarginの差異を埋めるようなライブラリがでてこないかなぁ・・・

2008/12/16 21:55 | CSS | COMMENT(0) | TRACKBACK(0) | PAGE TOP▲
トップへ戻る 次のページ