Cloud Run 上のページが一部の Chrome 環境で文字化けする謎を探るべく我々は Google Cloud の奥地へと向かった

2024/02/28 20 users 奥地 zstd Cloud Run 我々 圧縮

この記事は 2024 年 2 月 28 日に執筆されました．今後この問題が Cloud Run 側で修正された場合，再現しない可能性がありますのでご留意ください． TL; DR Cloud Run は執筆時現在 zstd による圧縮に対応していない ヘッダの Content-Encoding: zstd のみが削除され，ボディは圧縮されたまま応答される ブラウザはこの... 続きを読む

Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

2023/09/27 7 users 配色 カラースキーム UI要素 カラム コピ

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピ... 続きを読む

セキュリティヘッダ警察です！既に包囲されている！観念してヘッダを挿入しなさい！ - エムスリーテックブログ

2023/06/13 267 users エムスリーテックブログ

【セキュリティチームブログリレー2回目】 こんにちは。エンジニアリンググループの山本です。 セキュリティチームは、エンジニアリンググループ全体のセキュリティを向上させるためのバーチャルチームなのですが、各プロダクト開発チームのサービスをチェックして、協力しながら全体のセキュリティを向上させていくのが... 続きを読む

Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*

2023/05/13 192 users hogashi fetch HTTPヘッダ CSP Cors

Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッ... 続きを読む

これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック

2023/04/17 163 users CSS 三角関数 レイアウト テクニック 水平

ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？ CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です... 続きを読む

プーチン重要論説集 - 山形浩生の「経済のトリセツ」

2023/04/09 9 users トリセツ しおり 見出し Adobe 山形浩

なんかこんなのを作ってしまったので、読みたい人は読みなさい。何かお気づきの点があればご教示たもれ。 山形浩生 編訳『プーチン重要論説集』(2023) 例によって、しおり/目次リンクがめちゃくちゃになっている。Adobeに上げてpdf化するとOKなんだが、すると見出しのスタイル名を変えないといけなくてヘッダが出ない。... 続きを読む

不正なリクエストを弾くために使える Fetch Metadata という仕様について

2023/01/29 10 users ＳＥＣ リクエスト コンテキスト 仕様 App

作成日 2023-01-29 更新日 2023-01-29 author @bokken_ tag Web, App, Sec はじめに リクエストのコンテキストをサーバ側に伝えることで、サーバ側でリクエストが危険なものかを判別するための Fetch Metadata Request Headers という仕様がある。今回、このヘッダがどういったものなのかについて Fetch Metadata Reques... 続きを読む

セキュリティ関連のHTTPヘッダを一括指定する Baseline ヘッダ - ASnoKaze blog

2023/01/09 5 users HTTPヘッダ Webデベロッパー Mike West氏

現在のWebでは、セキュリティ上レスポンスヘッダで色々なものを指定します。Webデベロッパーは個別に指定しなければなりません。 そこで、セキュリティ関連のヘッダを推奨デフォルト値に設定できるようにする「Baseline ヘッダ (Opt-into Better Defaults)」が、GoogleのMike West氏によって提案されています。 まだたた... 続きを読む

LIFULL HOME'S のヘッダ・フッタが新しくなりました！ - LIFULL Creators Blog

2022/11/25 12 users ブッダ 嶌田 レスポ LIFULL HOME アクセシビリティ

フロントエンドエンジニアの嶌田です。アクセシビリティ推進グループに所属し、社内のプロダクトのアクセシビリティを高めるために日々奮闘しています。 LIFULL HOME'S は不動産・住宅情報の総合サービスです。住宅や住み替えに関する多くの情報を取り扱っており、サービス全体の規模はかなり大きいといえます。 レスポ... 続きを読む

最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

2022/07/26 164 users CSS ドロワー Airbnb NIKE カルーセル

Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに... 続きを読む

CSSの知っておくと便利なテクニック！ ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える

2022/03/24 14 users Calc パディング づら ラッパー CSS

メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。 下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか？ CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマ... 続きを読む

モダンCSSでよく使用されるレイアウトを実装するまとめ

2021/11/25 212 users モダンCSS レイアウト ブッダ まとめ CSS

ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを... 続きを読む

清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog

2021/09/28 150 users ブッダ 嶌田 LIFULL Creators Blog 投稿

フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポ... 続きを読む

実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック | コリス

2021/08/17 17 users コリス SVG バッジ CSS ヒーロー

Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS o... 続きを読む

MIMEヘッダエンコーディングは複雑すぎてつらい / MIME header encoding is hard - Speaker Deck

2021/06/24 20 users Speaker Deck まさひろ is hard コーナー

Transcript MIMEヘッダエンコーディングは MIMEヘッダエンコーディングは 複雑すぎてつらい 複雑すぎてつらい 2021-06-22 とみたまさひろ 1 別にしらなくてもいい 役に立つか立たないかわからない 技術について語るコーナー 2 MIMEヘッダエンコーディング MIMEヘッダエンコーディング メールのヘッダでよく見る =?ISO-20... 続きを読む

高梨陣平 on Twitter: "Office 365でToやCcを空にして、Bccに複数のメールアドレスを指定すると全てのメールのヘッダにBccの最初のentryのドメインネームが漏洩。MSは直す気無し。RFC的に誰の責任か

2021/05/03 245 users BCC entry 漏洩 高梨陣平 on Twitter 最初

Office 365でToやCcを空にして、Bccに複数のメールアドレスを指定すると全てのメールのヘッダにBccの最初のentryのドメインネームが漏洩。MSは直す気無し。RFC的に誰の責任か不明との意見が。またHNにはMSは必ず… https://t.co/hIk599tfkk 続きを読む

CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック | コリス

2021/03/12 183 users コリス sticky position CSS セル

テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダ... 続きを読む

JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック | コリス

2021/03/01 147 users コリス sticky position CSS 汎用

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用... 続きを読む

CDNのキャッシュを制御する CDN-Cache-Control ヘッダ - ASnoKaze blog

2020/11/25 15 users CDN http クライアント 制御 キャッシュ

CDNのキャッシュを制御する「CDN-Cache-Control」を新しく定義する提案仕様「The CDN-Cache-Control HTTP Response Header Field」が出ているので、簡単に紹介する。 はじめに HTTPではキャッシュを制御するのにCache-Controlヘッダを使用しますが、クライアントとは別にCDNに対して個別にキャッシュの制御を行いたい場... 続きを読む

Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックのまとめ | コリス

2020/11/25 35 users Flexbox コリス UIコンポーネント ナビゲーション

ページのレイアウトやUIコンポーネントなど、Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックを紹介します。 ヘッダやナビゲーション、フォーム、テーブルなど、実際のプロジェクトでよく使用されるテクニックです。 Master Flexbox in 12 Minutes with Most Common Use Cases by Thu Nghiem 下記は... 続きを読む

Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages | コリス

2020/10/15 347 users コリス CTA ブッダ コピーライティング コンポーネント

最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど...記事の続きを読む 続きを読む

CSS Flexboxでヘッダを実装する最近のテクニックのまとめ | コリス

2020/09/24 204 users コリス Flexbox ナビゲーション テクニック 配置

CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを... 続きを読む

コピペで簡単！シンプルなHTMLとCSSで実装された17種類のヘッダのテンプレート -headers.css | コリス

2020/09/14 18 users コリス ナビゲーション バリエーション CSS ロゴ

新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。 headers.css ... 続きを読む

【初心者向け】はてなブログ　デザインテーマカスタマイズ　その２《ヘッダー画像編》 - たぬき猫マロン

2020/06/20 13 users たぬき猫マロン コピペ カスタマイズ 初心者向け リニューアル

ご訪問ありがとうございます。 マロニーです。 先日ブログのリニューアルをしました。 Webデザインど素人の私でもコピペだけでカスタマイズがある程度できましたので、初心者の方向けに私のカスタマイズを記事にしていきます。 今回はその２《ヘッダー画像編》です。 ブログのデザインテーマリニューアル 注意点 ヘッダ... 続きを読む

最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks | コリス

2020/06/03 22 users コリス ブッダ UIコンポーネント コピペ バリエーション

Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・... 続きを読む