ブックマーク / weboook.blog22.fc2.com (5)

  • サイトのデザイン変更が反映されない時のスーパリロードとキャッシュさせない方法

    先週の金曜にGunosyを見ていると「サイトのデザイン変更が反映されない時の対策 | monopocket.jp」という記事が表示されていました。2012年7月19日の記事ということで10ヶ月も前の記事なのに表示されるんだと思いながらも、よさげなブログを知ることができたので、これもGunosyの魅力なのかなと思ったりしました。 で、記事の内容ですが、HTMLCSSを変更してもブラウザで見たときに変更が反映されていない、というときの対応法について紹介されています。 HTMLCSSを変更しても、ブラウザが以前にキャッシュした変更前のファイルを読み込む場合があります。その場合、当然変更した内容は反映されませんので、保存されていたキャッシュを削除ようというものです。 ただ、キャッシュ自体はブラウジング高速化のために役立ってくれていますし、すべてのキャッシュを削除してしまうのももったいないと思い

    サイトのデザイン変更が反映されない時のスーパリロードとキャッシュさせない方法
    loose-art
    loose-art 2013/05/29
    これでわざわざキャッシュを消す作業がなくなる。
  • 上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー

    タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-menu-contents"> <a href="#" id="home"></a> <div class="panel-wrap"> <a href="#" class="panel-btn">カテゴリー</a> <div class="panel"> コンテンツ </div> </div> <div class="panel-wrap"> <a href="#" class="panel-btn

    上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー
    loose-art
    loose-art 2013/05/24
    上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー|Webpark
  • 今どんなボタンが好きかCSSプロパティごとに検討してみた

    下のボタンCSS3を駆使して色々しているのは分かりますが、最近フラットなデザインが流行っていることもあり、何となくあか抜けない気がします。 なぜでしょうか。 ということで、どのようなボタンが好きかプロパティごとで考えてみます。 ボタンの色(background-color) まずはどのような色がよいか考えてみます。背景色によってどの色がよいかは違ってくると思いますが、今回は白い背景色で考えます。 最初に青いボタンです。 色がきつすぎてあまり好きではないです。同じ青系でも薄くてさわやかな色の方が好きです。 緑系も同じです。 濃い緑より薄い緑の方が好きです。 オレンジも同じです。 ということで薄めで明るい感じの色が好きです。 テキストの色(color) 続いてテキストの色について考えます。まずは白。 これが一番いい気しますが、一応いくつかやってみます。では黒。 なんかきつすぎる。次は背景と対極

    今どんなボタンが好きかCSSプロパティごとに検討してみた
    loose-art
    loose-art 2013/05/21
    割と今風のボタンをCSSで作るチュートリアル
  • 配色パターンを決める際にお世話になっているサイトをご紹介

    「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント

    配色パターンを決める際にお世話になっているサイトをご紹介
    loose-art
    loose-art 2013/04/03
    タイトル通り
  • 保存版!CSS3セレクタの説明書

    CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

    保存版!CSS3セレクタの説明書
    loose-art
    loose-art 2013/03/06
    CSS3の便利なセレクタの説明。 リストに多用したりする。
  • 1