タグ

2011年5月18日のブックマーク (3件)

  • すぐに実施できる、あなたのウェブページのスピードを改善する10のチップス

    ウェブページのスピードを改善することは最適なユーザエクスペリエンスを提供するだけでなく、Googleの検索結果にも影響を与える大切な要因です。 すぐに実施できる、あなたのウェブページのスピードを改善する10のチップスを紹介します。 10 Tips for Decreasing Web Page Load Times [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 現在のスピードをチェック 2. 画像の最適化 3. 画像は実寸で配置 4. コンテンツを圧縮して、最適化 5. スタイルシートは上に配置 6. スクリプトは下に配置 7. スクリプトとスタイルシートは外部ファイルで 8. HTTPリクエストは最小限に 9. キャッシュの利用 10. 301リダイレクトは避ける 参考資料とツール 1. 現在のスピードをチェック まず、現在のあなたのウェブページのスピードの分析からはじ

    yuta0121
    yuta0121 2011/05/18
     速度改善のtips
  • [CSS]テキストに面白いエフェクトを与えたデモと実装の注意点

    Fun With Blurred Text デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストにブラー効果を与える方法と注意点 テキストにブラー効果を与えたデモ テキストにブラー効果を与える方法と注意点 テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。 .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } しかし、このままでは危険です。colorには対応していて、text-shadowには対応していないブラウザでは、何も見えない状態になってしまいます。 これを解決するには、「modernizr」を使用して、対応ブラウザかどうか確認して適用します。 .textshadow .blurry-t

    yuta0121
    yuta0121 2011/05/18
     テキストにエフェクトをかける
  • [JS]複数のパネルの一つだけ内容を変更してハイライトさせるスクリプト -Hoverpanels

    複数のパネルを配置したコンテンツの一つにパネルにマウスをホバーすると、内容を変更しハイライト表示にするjQueryのプラグインを紹介します。 デモページ:ホバー時 Hoverpanelsの実装 HTML 各パネルはdiv要素(class="hover-panel")で実装されており、通常時用とホバー時用のコンテンツをそれぞれ配置します。 ※通常時用:.default、ホバー時用:.hover <section class="clearfix"> <div class="hover-panel topLeft"> <h3>Test</h3> <div class="default"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis dolor, et porttito

    yuta0121
    yuta0121 2011/05/18
     パネルのハイライト