タグ

tipsに関するnatto_tamagoのブックマーク (61)

  • rel="icon"と rel="shortcut icon"の違い

    2023 (6) ► 10月 (2) ► 8月 (4) ► 2017 (5) ► 6月 (2) ► 5月 (1) ► 2月 (2) ► 2016 (43) ► 12月 (4) ► 11月 (5) ► 10月 (4) ► 9月 (3) ► 8月 (3) ► 7月 (2) ► 6月 (5) ► 5月 (3) ► 4月 (1) ► 3月 (1) ► 2月 (7) ► 1月 (5) ► 2015 (61) ► 12月 (2) ► 10月 (6) ► 9月 (5) ► 8月 (6) ► 6月 (3) ► 5月 (7) ► 4月 (6) ► 3月 (6) ► 2月 (7) ► 1月 (13) ► 2014 (61) ► 12月 (1) ► 10月 (2) ► 9月 (3) ► 8月 (12) ► 7月 (8) ► 6月 (7) ► 5月 (3) ► 4月 (9) ► 3月 (16) ► 2013

  • html999 » Firefox・Safariでブラウザの戻るボタンを使うと画像がロールオーバーのままになる問題を解消

    JavaScriptの画像のロールオーバーを設定している画像をクリックしてページ遷移後、ブラウザの戻るボタンを押すと、Firefox・Safariでロールオーバー状態の画像のままになってしまう。(キャッシュが残ってしまう) 有名なバグみたいな仕様だったんですね。最近までなぜか気付かなかった! 検索してもぱっとした解消方法が見つからずだったんですが、たまたま気付きました! 解消方法 jQueryのバージョン1.3.2以下を読み込む(たとえjQueryを使用していなかったとしても)だけです!!! 普通に<head>内に読み込むだけでなぜかキャッシュが残らなくなりました。↓こんな感じで(完全に普通) <script type="text/javascript" src="xxx/jquery-1.3.2.min.js"></script> 不思議だったのが、jQueryを使用していないロールオー

    html999 » Firefox・Safariでブラウザの戻るボタンを使うと画像がロールオーバーのままになる問題を解消
  • Adobe - CSS Advisor beta - Keep consistent line spacing with sup and sub

    Start with Photoshop. Amazing will follow. With Photoshop and generative AI tools powered by Adobe Firefly, you can create gorgeous photos, rich graphics, and incredible art. Start free trial

    Adobe - CSS Advisor beta - Keep consistent line spacing with sup and sub
    natto_tamago
    natto_tamago 2012/03/31
    <sup><sub>で行間が広くなるのを防ぐCSS
  • 画像ファイルを事前にキャッシュさせておく | Bonkura Blog

    こなだいスライドショーをjQueryを利用して作ったんですが、IEだと画像の読み込みがどうも遅い。たぶん事前にキャッシュさせなきゃいけないんだろうなぁと思いつつも方法がわからず、先に読み込んでCSSで消すって方法を採用しました。 でもこれだとどうもスマートじゃない。何か方法があるでしょ、と思っていたらやっぱりありました。 こういうコードをDOM readyイベントの外に書いておくといいみたいです。 var images = ["hoge1.jpg", "hoge2.jpg", "hoge3.jpg"]; $.each(images, function(){ $("<img>").attr("src", this); }); こんな簡単だなんて・・・。jQueryはやっぱり凄いです。

  • more-link の #more-xxxx を削除する - dogmap.jp

    WordPress の more-link には URL の後ろに #more-xxxx が含まれるため、以前は wp-includes/post-template.php を直接修正して #more-xxxx を付加しないようにしていました。 WordPress 2.8.x からは "the_content_more_link" フィルタが追加されたので、more-link の #more-xxxx を削除するのは簡単になりました。 以下のようなコードをテーマの functions.php に追加するだけで実現できます。 <?php // #more-$id を削除する。 function custom_content_more_link( $output ) { $output = preg_replace('/#more-&#91;\d&#93;+/i', '', $output )

  • inputのimageボタンのロールオーバー

    ■サンプル ■ソース <input type="image" src="img/btn.gif" value="submit" tabindex="1" onmouseover="this.src='img/btn_o.gif'" onmouseout="this.src='img/btn.gif'" /> もと画像 img/btn.gif オーバー画像 img/btn_o.gif Comments otogawa | 2007/08/30 06:43 PM >hamaさん buttonタグってよく見るけど、まだ使ったことないですわー。css対応など他のサイトでも便利そうに聞いてるので、今度試してみますー♪java使わなくてもオーバーできたら便利ですもんね。 hama | 2007/08/09 08:17 AM http://kikky.net/pc/css_ir.html B

  • スマートフォンサイトで電話番号やメールの自動リンクを解除したい – helog

    iPhoneAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。 リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。 しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。 長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。 例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。 自動リンクを無効にする このような問題を回避するために、自動リンクを無効にする方法があります。 電話番

    スマートフォンサイトで電話番号やメールの自動リンクを解除したい – helog
    natto_tamago
    natto_tamago 2011/04/05
    横にしたときに文字が大きくならないようにする
  • blog.ipuheke.jp» Blog Archive » FlashPlayer10のMouse.cursorに「つかむ手」がありません。

    Flash, AcrionScript, Design… and more嬉しいのは「HAND」が標準でついてることなんですが、これは「手が開いた状態」のやつで、僕が欲しかった「つかむ手」がありません。残念。 マウスカーソルをオリジナルカーソルに変えてあげるのって、 1. Mouse.hide() でマウスを消す。 2. オリジナルカーソルをaddChild。 3. 「Event.ENTER_FRAME」か「MouseEvent.MOUSE_MOVE」で、オリジナルカーソルをmouseX、mouseYに追従させる。 4. オリジナルカーソルのmouseEnabledをfalseにしておく。 みたいなメンドイ処理が必要でした。「つかむ手」さえあれば、ほぼ「Mouse.cursor」を変えてあげるだけで済みそうだったのですが、「つかむ」は従来の方法でやらなきゃいけないような感じです。

  • ActionScript3 最適化・高速化Tips 簡易まとめ - actionscriptグループ - ConquestArrow.addEventListener( LifeEvent.WORK, this.studyActionScript);

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    ActionScript3 最適化・高速化Tips 簡易まとめ - actionscriptグループ - ConquestArrow.addEventListener( LifeEvent.WORK, this.studyActionScript);
  • 印刷用 CSS で背景画像を印刷させる方法 - lucky bag

    media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。 wg:Printing CSS background images (sort of) カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくい

  • KAYAC Engineers' Blog

    SREチームの長田です。 今回は、カヤックのメンバーが業務で使うために開発・公開しているOSSなプロダクトをまとめて紹介しようという企画です。 KAYAC organization以下にあるものだけでなく、在籍中のメンバーが作ったものもひっくるめて、実際に業務で使用しているものを中心に 紹介しています。 以下の3つのカテゴリに分けて記載しています。 各カテゴリ内はアルファベット順です。 ツール編 人間が手動で実行するもの アプリケーション編 どこかに常駐して、イベントを受け取ると動作するもの ライブラリ編 ツールやアプリケーションから参照されるもの 集めてみたらそこそこの量になったので、記事では詳細な説明は省いています。 GitHubリポジトリのURLや関連記事のリンクを併記していますので、より詳しく知りたい場合はそちらを参照ください。 (...) 内はそのプロダクトで使用している主なプ

    KAYAC Engineers' Blog
  • _level0 | Kayac Interactive Designer's Blog

    KAYAC Front End Engineer チームによるHTML5 iOS Android ActionScript Flash イベント デザイン ニュースのブログ

    _level0 | Kayac Interactive Designer's Blog
  • てらじろぐ | FLASH AS3 でのクロススクリプト

    FLASH AS3 でクロススクリプトするとき、 ロードする側(親)からの呼び出し方と ロードされる側(子)からの呼び出しかたを 一通り確認したのでメモっときます。 最小限のサンプルコードを書くと下記の通り。 下記コードを、 mc_a.fla と mc_b.fla のトップのタイムラインの 最初のフレームにでも書いてパブリッシュ。 mc_a.swf var loader:Loader = new Loader(); var url:String = "mc_b.swf"; var url_request:URLRequest = new URLRequest(url); function complete_handler(event:Event):void { addChild(loader); var mc_b:MovieClip = MovieClip(loader.content);

    てらじろぐ | FLASH AS3 でのクロススクリプト
  • 20 Vital Techniques & Best Practices For Effective Web Design - noupe

    20 Vital Techniques & Best Practices For Effective Web Design Creating beautiful, unique websites seems to get harder every day. There are so many amazing website designs out there that coming up with something fresh and different is getting close to impossible. And even if you're not looking for something entirely unique, creating beautiful designs that don't look dated is a constant challenge. B

    20 Vital Techniques & Best Practices For Effective Web Design - noupe
  • Photoshop VIP

    フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    Photoshop VIP
  • リンクをクリックした時に出る点線を消す! | Health is better than wealth

    リンクをクリックした時に出る点線を消す方法を紹介します。 なんのこっちゃわからない人もまだ出会っていない人もいると思いますが、知っている人はちょっとウザいと思うかもしれません。 まずはこの画像をご覧ください。 これはカテゴリのWindows Vistaをクリックした時の画像です。 borderのように点線が入っているのがわかりますね。 いくつかのブラウザで試したところ、表示されたのはFirefox3だけでした。 ≪ 確認したブラウザ ≫ Firefox3、IE7(Internet Explorer7)、Opera9.6、Safari、Google chrome リンクをクリックした時に出る点線を消す方法 CSSファイルに以下の文字を追加するだけです。超簡単(゚∀゚∩ a{outline:none;} 意味は、a(リンク)のoutline(アウトライン)をnone(無し)にする事です。 aセ

  • リンクを選択すると現れる点線枠を消す。onFocus="this.blur()"

    上の画像やリンク文字を選択してください。 周囲が点線で囲まれます。フォーカス(forcus)を他に移すと消えます。 リンクの選択が良く判っていいのですが 場合によってはデザイン的に目障りな場合があります。 この点線枠(アウトライン)を最初から現れないようにする方法は 点線枠を消したい a 要素に onFocus="this.blur()"を追加します。 style="outline:none;"はFirefoxでは動作します。 Firefoxはイメージマップのリンクではアウトラインは出ません。 <a href="リンク先URL">サンプル集</a> <a href="リンク先URL;" onFocus="this.blur()">サンプル集</a> 下の画像、リンクをクリックしても点線枠は表示されません。 JavaScript スタイルシートサンプル集 onFocus="this.blur

    natto_tamago
    natto_tamago 2010/01/19
    "outline:none;"がきかないIE6・7にはaタグにonFocus="this.blur()" を追加
  • スタイルシート[CSS]/ページ全般/カーソルの形を変更する - TAG index

    オリジナルカーソルについて 独自の画像をカーソルとして使用することができます。 指定方法 cursor: url(example.cur), text; url( ) … ( ) 内に、カーソルとして使用する画像ファイルを指定します。 オリジナルカーソルが表示できない場合に備え、カンマ( , )に続けて任意のキーワード(default や pointer 等)を指定しておきます。(上記の例では text を指定しています) カーソルの候補 cursor: url(example.cur), url(example.gif), auto; 上記のように、カンマ( , )で区切って複数のカーソル候補を設定しておくこともできます。この場合、ユーザーの環境で利用できる形式の画像が使用されます。(先に指定したものが優先されます) 対応ブラウザ オリジナルカーソルは、IE 6以上、Firefox、Sa

    スタイルシート[CSS]/ページ全般/カーソルの形を変更する - TAG index
  • 2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About

    CSSハックを使わずIEのバグに対処する方法(2ページ目)特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。IEでのみ表示がおかしくなる場合の対策なども紹介。

    2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About
    natto_tamago
    natto_tamago 2010/01/17
    <!--[if IE 6]>の書き方
  • IE6用透過png対応策、DD_belatedPNGの使用法と注意点

    以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl

    IE6用透過png対応策、DD_belatedPNGの使用法と注意点