ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
ウェブ開発やデザインが超絶捗る開発者のためのウェブブラウザ「Firefox Developer Edition」が登場
無料で使えるオープンなウェブブラウザ「Firefox」が登場してから今年でちょうど10年になるそうですが、そんな節目の年に、Firefoxを開発しているMozillaがウェブ開発者目線で作成し、開発者やデザイナーにこそ使ってほしいというウェブブラウザ「Firefox Developer Edition」をリリースしました。 Firefox Developer Edition — Mozilla https://www.mozilla.org/ja/firefox/developer/ Firefox Developer Editionはウェブ開発者のために作られたブラウザで、作成・テスト・サイズの変更といった開発のワークフローで必要とされる機能をすべて持っているものです。さらに、専用のアドオンをインストールすれば、Firefox Developer Editionを操作するだけで他のブラウ
PCのバッテリ消費が最も少ないブラウザはどれ？
気にしたこと、あります？ ブラウザでたくさんのページを開くと、当然ですがPCのバッテリはどんどん消費されていきます。では、各ブラウザごとに電池の持ち時間を比較したら、どれが1番バッテリの消費が少ないんでしょう？ AnandTechがその疑問に応えるべく検証を行なってくれました。 今回実験に使ったのは、DellのノートパソコンXPS 15。現在最も使用されているブラウザ5種類（いずれも最新版）で、｢それぞれを駆動させた状態でPCバッテリが残り7％になるまでに何分かかるか｣を比較しました。結果は以下のとおり。 この結果によれば、最新版のChrome（ヴァージョン36）が452分と、最も長い間PCを駆動できた模様。次点でInternet Explorer 11のモダン版（タッチパネルに最適化したヴァージョン）、同じくInternet Explorer 11のデスクトップ版と続き、Firefoxと
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
仕事に集中するために雑念を振り払う10のヒント | ライフハッカー・ジャパン
どんなに禅を極めた人だって、やりたくない仕事に集中するのは難しいもの。でも、残念ながらほんのちょっとの中断でも、仕事の生産性は低下してしまいます。そこで、雑念を振り払って仕事に集中するための10のヒントをお伝えします。 10. 1日のスケジュールを決める 誰でも、1日の中で「ゾーンに入りやすい」（集中力が高まる）時間帯があるものです。これを最大限に活用するために、その時間帯にいちばん重要な仕事に取り組むようなスケジュールを組みましょう。筆者の場合、ToDoをスケジューラーに組み込むことで、〆切の厳守や、3時までにはランチを忘れずにとるなど、タスクを忠実に実行できるようになりました。 9. 作業は全画面で 私たちは、自分で思っているほどマルチタスクに長けていません。ですから、とにかくがんばらなきゃいけない状況では、雑念を生じさせるものを画面から一切排除しましょう。「Q10」のように雑念フリー
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
ブラウザの更新 スーパーリロード
初心者でも簡単作成 Webサイト（ホームページ） パソコン インターネットの勉強、情報 NetyaSun スーパーリロードとは ブラウザのキャッシュを無視し、強制的にWebサーバーからファイルをダウンロードする方法。 「フルリロード」「強制再読み込み」ともいう。 WEBページや画像などのファイルを編集後、転送・表示で確認すると、 何も変わらず、古いファイルが表示される場合がある・・・ これは速度の向上のため、ブラウザのキャッシュが、前回保存したファイルを表示してしまうからだ。 通常なら、ブラウザの更新ボタン、または、F5キーで更新されるが、 ブラウザキャッシュが強烈に効き過ぎて、再読み込みでも更新されない場合がある。 キャッシュを毎回削除するのも面倒なので、スーパーリロードで読み込んでしまいましょう。 インターネットエクスプローラー IE Windows Internet Explorer
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
ホームページビルダーを無料でお探しなら＞ホームページ作成ツール19個
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる 【発表】最新のHP作成方法はこちらへ ホームページビルダーを無料でお探しのあなた。 ホームページビルダーといえば、これ↓ 「ジャストシステムのホームページビルダー」なら、こちらですぐにダウンロードできます。 しかし、焦らずちょっと待ってください。 web制作歴14年目の僕は、ジャストシステムのホームページビルダーをおすすめしません。 なぜなら、このJustSystemホームページビルダーには以下のようなデメリットがあるからです。 ダウンロードしてからインストールするのが面倒 レンタルサーバーも必要。そ
【よく見るものを一覧で解説】HTTPステータスコードとは？コード番号別に詳しく解説 | ナイルのマーケティング相談室
HTTPステータスコードとは、ウェブサイトにアクセスしたとき、正常な画面ではない場合に表示される3桁の数字のことです。 ウェブサイトにアクセスしたときに「404」や「503」といった数字が表示された経験はないでしょうか。HTTPステータスコードはたくさんの種類があり、それぞれ意味する内容が異なります。 そこで本記事では、それぞれのステータスコードが持つ意味や対処法、HTTPステータスコードの確認方法を解説します。 HTTPステータスコードについて知ることで、アクセスしたウェブサイトに何が起きているのかを理解できるようになるので、ぜひご参考にしてください。 この記事のポイント HTTPステータスコードは、特定の HTTP リクエストが正常に完了したかどうかを示す3桁の数値で表されるもの 大まかに200番台の成功レスポンス、300番台のリダイレクト、400番台のクライアントエラー、500番台の
新ブラウザ戦争点滅。グーグルがアップルのWebKitを離反、ChromeとOperaが独自レンダリングエンジンBlink採用へ
新ブラウザ戦争点滅。グーグルがアップルのWebKitを離反、ChromeとOperaが独自レンダリングエンジンBlink採用へ2013.04.08 13:00 satomi blinkと言えばその昔ネット創生期にマイクロソフトvsネットスケープのブラウザ戦争でマイクロソフトが頑として対応しなかった点滅チカチカ要素...穏やかじゃないですね... グーグルが今Chromeで使ってるレンダリングエンジンWebKitの使用をやめ、モバイルもPCも独自のBlinkに乗り換えると発表しました。 ...と言われてもチンプンカンプンですが、これが重要な転機でして、レンダリングエンジンはウェブサイトのHTMLとかCSSとかJavascriptを咀嚼してレイアウトを決めるプログラムですから、その差が広がれば同じサイトでもブラウザごとに見え方が違ってきてしまうんざますよ。 なぜフォーク？ WebKitは現在C
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。 hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。 ３．jQuery UI Tabsでhashchangeプラグインを利用する ２項のリンク先の説明ではjQuery
ブラウザ上でインフォグラフィックスが作れる『Piktochart』 | 100SHIKI
スタイリッシュなインフォグラフィックスがさくっと作れるのがPiktochartだ。 独自に調査した結果をわかりやすくまとめて、ソーシャルメディア上で広めたい時に便利なのかもしれない。 使い方も直感的だし、なによりそれっぽいテンプレートが既に用意されているのがうれしい。 仕事できっちり使う場合には有料になるが、こうした資料をよく作る人にはいいかもですな。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クラブツーリズム
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
http://www.yourname.jp/domain/faq/046.html