WEBサイトの更新時、CSSのキャッシュを自動で読み直す方法
こんにちは、WEBデザイナーの弓削です。 かなり今更な話となってしまいますが・・。 WEBサイトのページの修正の際にCSSを書き換えるケースはよくあると思いますが、 その時に一番困るのが、 1）クライアント様に修正依頼を頂いて内容を修正 2）修正後、情報を仮公開してクライアント様に連絡 3）「何も変わっていない」という指摘を頂く 4）CSSのキャッシュが原因で、修正前のCSSが表示されていた というケースですね。 一応、クライアント様に「スーパーリロード」を掛けてもらう事で解決する問題なのですが、 そもそも、スーパーリロードをしなくても自動でCSSが更新されて欲しいですよね。 方法としてはCSSファイルの指定の後ろにクエリを加える方法が一般的だと思います。 例えばこんな感じです。 ファイルを更新するたびに?201610261200の部分の数字を変更する事で、 ブラウザに新しいファイルという
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト
サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
[css]マウスオーバー時に画像透過をさせロールオーバーを表現するcssテクニック – devolen
cssでロールオーバー(ホバー)時に画像透過をさせ簡単にロールオーバーを表現する方法。 非常に簡単に画像のロールオーバーを表現ができるので紹介します。 ※上の画像は記事内容と全く関係ありませんm(__)m このブログでもロールオーバー(ホバー)時の表現として画像透過をさせているます。 以下のサンプル画像に、ロールオーバーしてもらえれば少し薄くなっているのが分かるかと思います。 その透過処理の方法なんですが非常に簡単です。 ■以下CSSでの画像透過の方法。 ロールオーバー時に画像透過をしたい「img」に以下のCSSを記述してください。 div#hoge a:hover img { opacity:0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: #fff; } ■ポイント ■filte
横幅いっぱいに画像を表示してくれるjQueryプラグイン-bgStretcher ｜ memocarilog
ブラウザの横幅いっぱいに画像を表示してくれるjQueryプラグインbgStretcherを使ってみました。bgStretcherはブラウザのサイズを小さくしても画像のアスペクト比が維持されて表示されます。 このブログの背景は画像を横いっぱいに広げるのをCSSで表示しているのですが、iPhone等の横幅が小さい画面でみると画像が縦に伸びてしまって嫌だなぁと思っていたんです。丁度こちらの記事で”[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher | コリス”プラグインが紹介されていたので早速使ってみました。 サンプルも作りました。 Internet Explorer 6, 7, 8, 9、Firefox 2, 3, 4、Opera 9+、Safari、Chromeにも対応しているようです。幅広いブラウザに対応しているので実用的に使えそうです。
『センタリングの位置がずれる時』
Web仕事人の部屋札幌のWeb制作会社・株式会社メディアリュウム／株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。 ホームページのレイアウトでは、内容部分全体をセンタリングするのはよくあることですが、特に Firefox で見ているときにページを切り替えるとセンタリングの位置がずれたりしたことはないでしょうか？ ページによっては、文字量が少なかったりしてスクロールバーが必要なく収まってしまうページもあるかと思います。センタリングの位置がずれているのは、もしかしたらこのためかもしれません。 制作している中で心当たりがあったらまず、 ブラウザ右のスクロールバーが出ているか 確認してみましょう。 コンテンツ量が多い時にはもちろんスクロールバーが自動で出てきますが、コンテンツ量が少ないページには出ていなかったりしていませんか？実はこれが「ずれる」原因だったのです。 ち
stock.xchngのライセンス情報を訳してみた*WEBデザインとか
クオリティの高い素材がたくさん置いてあるstock.xchngの著作権情報をざっくり訳したメモを公開してみます。 ※「Standard restrictions」についての（かなりざっくりした）訳文です。 ※2010年6月3日に訳したもので、今後変更される可能性があるかもしれません。 ※また、訳文に関する責任は負いかねるため、最終的には原文をご確認ください。 【許可されている用途】 ・WEBサイト、マルチメディア、映画やヴィデオ、携帯電話のための使用。 ・広告、雑誌、新聞、書籍、チラシ、CDやDVDのカバー等の印刷物のための使用。 ・法人の名刺、便せんのための使用。 ・家やオフィスの装飾のための使用。 【禁止されている用途】 ・ポルノや、違法性や不道徳な目的のため、嫌悪や差別のため、他人や社会、文化に対する誹謗中傷または損害を与えるためには使用できない。 ・人が写って
Capture full page - Screenshot Full web page - Capture full web page
Capture Entire Websites in a Single Snapshot with Capturefullpage.com, Your Ultimate Web Capture Solution Capture Full-Length Webpages Capture the entirety of your favorite websites has never been easier. Our online tool allows you to take full-page screenshots effortlessly, preserving entire web pages in a single image or PDF file. Whether you're an avid web researcher, a designer seeking inspira
[JS]画像はそのままで、カラートーンや不透明度のアニメーションを加えるスクリプト -MyFadeOverImage
画像自体をPhotoshopなどでレタッチする必要なく、カラートーンや不透明度の変更をフェードのアニメーションで加えるjQueryのプラグインを紹介します。 My Fade Over Image デモページ [ad#ad-2] My Fade Over Imageの実装 カラートーンや不透明度は、簡単に設定できます。 MyFadeOverImageの基本書式 $("#demo1 img").MyFadeOverImage({ normalAlpha:0.9, hoverAlpha: 1, normalToneColor:"#000" }); normalAlpha 通常時の不透明度 hoverAlpha ホバー時の不透明度 normalToneColor 通常時のカラートーン 実装も簡単で、「jquery.js」と当スクリプトを外部ファイルとし、jQueryのセレクタで画像を指定し、不透明
手書き風のWebデザインを作りたい時に役立ちそうなフリー素材やデザイン例まとめ - かちびと.net
個人的に大好物の手書き風な Webデザインを作りたい時に 役立ってくれそうなフォントや テクスチャ、アイコンなど、無料 のリソースをメモしておきます。 手書き風と言っても色々あるのでこのまとめは偏ったものになっているかも知れません。参考程度にして頂ければ幸いです。全ては掲載出来ないので個人的に好みのリソースを厳選します。 日本語フォント ふい字 かなり使用条件を緩くしてくれている有名な手書きフォント。 ふい字 みかちゃんフォント こちらもかなりオープンに配布してくれています。 みかちゃんフォント あんずもじ 縦書き用も含まれています。こちらも有名なフォント。 あんずもじ ひま字 基本的には商用でも利用可能ですが、よく規約を読んで。可愛くて使いやすいです。 ひま字 ミウラ Liner ジュニア 漢字もがっつり入った素敵なフォント。 ミウラ Liner ジュニア 衡山毛筆フォント 著作権を放棄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
★レスポンシブの基本、メディアクエリの書き方 | | それからデザイン スタッフブログ
デザイン枠専門サイトFRAME Design – 1000以上の飾り枠のある素材サイト
http://www.stripemania.com/
商用フリーで使える影絵素材サイト シルエットデザイン