キャッシュクリアでサイトの修正を反映させる方法（OS/ブラウザ別） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 サイトの動作確認中、修正がすぐに反映されないことってありませんか？ その原因は主にブラウザ（Internet Explorer, Safari, Google Chrome, Firefox, Opera など）のキャッシュのトラブルだったりします。 キャッシュとは？ 使用頻度の高いデータを一時的に保存しておくことで、二度目以降の表示を速くする仕組みです。 修正前の情報がキャッシュされていると、修正したはずなのに見た目が最新状態にならない……という現象が起こりえます。Web関係でよくあるのは、ブラウザのキャッシュと、システムのキャッシュです。 システムのキャッシュはエンジニア以外に触りようがないので、ここではブラウザのキャッシュをコントロールする方法をご説明します。 キャッシュをクリアして強制再読み込み（スーパーリロード）！ ブラウザが保存していたキ
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
スタイルシート［CSS］/ボックス/ボックスのマージン（外側の余白）を指定する - TAG index
値には auto（自動）を指定することもできます。 指定方法 次のように、4タイプの指定方法があります。それぞれの値は、半角スペースで区切って記述します。 margin: 2px; … ［上下左右］ を指定 margin: 2px 4px; … ［上下］ と ［左右］ を指定 margin: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定 margin: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定 マージンとパディング マージン … 境界線より外側にある余白部分 パディング … 境界線と内容領域の間にある余白部分
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする
凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。 というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。 この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。 コードget_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓ href="<?php bloginfo('stylesheet_directory'); ?>/style.css"これで以下のように出力。 href="http://example.com/wp-content
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
CSSのみで実装する多段カラムレイアウト
先日「CSS Nite in Ginza, Vol.58」に参加したのですが、多段カラムでブラウザウィンドウのサイズを変更するとカラム数も変わるようなレイアウト（こんなやつ）が紹介されていました。 質疑の中でそんなレイアウトをCSSのみで出来ますか？という質問があったので、参加者の立場でしたが「出来ます」とお答えしてしまったので作ってみました。 以下、両方ともChromeでしか確認しておりませんのでご注意ください。 「display: inline-block;」でボックスを並べているもの 「position」でボックスを並べているもの 感想 まぁ、出来るっちゃ出来ますが運用に耐えられなさそうですし、面倒ですのでJS使いましょう。
スタイルシートをドキュメント化する際にぜひ！·StyleDocco MOONGIFT
StyleDoccoはスタイルシート中に書いた設定をドキュメント化するソフトウェアです。 Webデザインにおいてスタイルシートは欠かせません。Webサイトのスタイルシート設定をドキュメントにしたい時に使いたいのがStyleDoccoです。 インストールします。 デモです。右側にスタイルシート、左側にその説明が表示されています。 HTMLのコーディング方法と、その結果とかが上下に並んで表示されます。 リスト表示などもあります。 スマートフォンの幅に指定することもできます。 レスポンシブWebデザインの場合は便利そうです。 Bootstrapで作られたデモもあります。 ボタンのデザイン。こうやって表示されると分かりやすいですね。 StyleDoccoを使うとCSSファイル中に書いた設定の使い方をそのままドキュメントにできるようになります。書き方と実際に適用した結果が分かれば、Webデザイナーの
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
『cssとjQuery』
最近とってもcssな、まいちむ.jsです ☆でランクをつけるときのやり方を試行錯誤をめもめも このサイトの☆ランクのやり方に感動したまいちむ http://allabout.co.jp/gm/gc/24018/ このサイトのやり方するには19個の星がつながった画像が必要なわけですが、 でもデザイナーさんにもらってた画像が、 星フルのやつ、ハーフのやつ、空のやつ のいっこずつだったので、 とりあえずもってる素材でやってみよーかなーって考え いったん３つの星をそれぞれだすタグをかいて、 jsでクラス名に数字いれて、cssで星の数を調整してたんだけど、 うーんやっぱ19個の星のが明らかにスマート 星をcssでかいてもいいんだけど、うーんめんどくちゃ だったのでデザイナーさんに19個の星かいてもらった で、星ランクをつけるフォーム画面を作成 ほんとはマウスでなぞったら星が増えるやつやりたかったんだ
激簡単にHTMLとCSSの共有が出来るリアルタイムオンラインエディタScrathpadが良い感じ！ | バンクーバーのうぇぶ屋
先日一通のメールが届きまして、ScrathpadというオンラインHTML＆CSSエディターのローンチをお知らせするメールでした。 新サービスの公開しましたメールはよく届くので、オンラインエディタであればjsfiddleをよく使う僕にとっては得に期待してたわけでは無かったのが正直な所ですが、いやコレはもしかしたら乗り換えるかもと思ったので、まずは皆さんとも共有させて頂ければと思います！ 似たサービスならCssizer.comやjsdo.itなんかが挙げられますが、僕のようなフロントエンド畑の人間であれば得に簡単なHTMLとCSSを仲間内と共有したい機会なんか多いわけで、とにかく”ド”シンプルなオンラインエディターの方が嬉しいっちゃ嬉しいわけです。 そういう”ド”シンプル、”ド”簡単って意味では今回ご紹介するScrathpadというサービスはなかなか僕の希望を叶えてくれましたので、まずは超カン
ソーシャルメディアで拡散された数を合計表示してくれる『sharecount』 | ウェビメモ
ブログを運営していると、ツイートされる記事、ブクマされる記事、いいねされる記事って何となくバラける時はありませんか？ 例えばTweet数が10なのにいいねが150だった時。 あくまでも記事に興味を持ってもらえるかどうかの入り口部分に限る話ですが、それぞれの数を表示しておくより「シェア数160」と表示する方がインパクトありますよね。 『sharecount』はまさにそれをやってくれるスクリプトです。 記事を読んで頂いてからの拡散は、これまでどおりスクロールしてもついてくるソーシャルアイコンがオススメ:) sharecountとは 複数ソーシャルメディアでの拡散数を各APIで取得、すべてを合算し、表示するというスクリプト。 sharecount.jsをアップロードし、たった3行コードを追加するだけで実装できます。 <body>～</body> <a href="数を表示させたいURL" cla
スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。
こんにちは、霙です。 ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。 コードを教えて欲しいという方がいたので、他の方にも需要あるかな？と思い、記事にしてみました:) 自分のサイトに使いたい方はコピペしてご自由にどうぞ！ （IE6対応版にはこちら） 読者が利用するタイミング みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。 記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。 とにかく設置するにあたって重要な事は 「どこに置けば読者の方々に押してもらいやすいのか」です。 自分が読者の立場になった時はどうですか？？ 私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・///// てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。 タイトルを
［み］Sublime Text2にCSSを早く書ける「Hayaku」をいれた
初心者向けのプログラミング学習サイトの「ドットインストール」に「Sublime Text2の基礎」が追加されたことは紹介しましたが、Sublime Text2でCSSを書くときにとてもとても便利なパッケージがありますので、紹介します。 その名は「Hayaku」 名前がすごいですね。名前の通り、CSSが速く書けます。というか、プロパティの綴りが心配な方には本当にうってつけです。ちょこっと例を紹介します。例えば、width: 100%;と書きたいときは、 CSS .hoge { /* w とタイプしてTab */ /* wd とタイプしてTab */ /* wd100% とタイプしてTab */ /* w: とタイプしてTab */ /* wd: とタイプしてTab */ /* w:100% とタイプしてTab */ /* すると、 */ width: 100%; } これ以外にも、相当いろん
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
min-width－スタイルシートリファレンス
min-widthプロパティは、 <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT> などの領域の幅の最小値を指定する際に使用します。 最小値を指定することで、これらの要素の幅を一定範囲内に収めることができます。 指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法があります。 ■値 数値で指定 数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。 ％で指定 ％値で指定します。 スタイルシート部分は外部ファイル（sample.css）に記述。 img.sample {min-width: 300px;} HTMLソース <html> <head> <link rel="stylesheet" href="samp
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パソコンだと長文を読むのが辛いのは、行間が詰まりすぎているからではないか？（※アンケート結果報告追記）
