タグ ヘッダ
新着順 10 users 50 users 100 users 500 users 1000 users夫が謎の激安お掃除サービスのチラシを見て「試してみていいんじゃないか」と言ったので「それは強盗殺人の下見よ!!!!」と吼えた。
--- @threehyphens 東京の道路の名前。ヘッダはフォロワ様加工作品Crowbar Nurse, my novel full of Japanese videogame parodies, is now available to read in English thanks to volunteer translators!! lit.link/threehyphens --- @threehyphens 少し前、夫がポストに投函されていた謎の業者の激安お掃除サービスの... 続きを読む
これでCSSのみで実装できる! スクロール方向に合わせてヘッダを非表示・表示する方法を解説
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide ... 続きを読む
CSS Gridの便利な無料ツールが登場! レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用... 続きを読む
Cloud Run 上のページが一部の Chrome 環境で文字化けする謎を探るべく我々は Google Cloud の奥地へと向かった
この記事は 2024 年 2 月 28 日に執筆されました.今後この問題が Cloud Run 側で修正された場合,再現しない可能性がありますのでご留意ください. TL; DR Cloud Run は執筆時現在 zstd による圧縮に対応していない ヘッダの Content-Encoding: zstd のみが削除され,ボディは圧縮されたまま応答される ブラウザはこの... 続きを読む
Webデザインの配色に悩んだときの参考になる! UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピ... 続きを読む
セキュリティヘッダ警察です!既に包囲されている!観念してヘッダを挿入しなさい! - エムスリーテックブログ
【セキュリティチームブログリレー2回目】 こんにちは。エンジニアリンググループの山本です。 セキュリティチームは、エンジニアリンググループ全体のセキュリティを向上させるためのバーチャルチームなのですが、各プロダクト開発チームのサービスをチェックして、協力しながら全体のセキュリティを向上させていくのが... 続きを読む
Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*
Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッ... 続きを読む
これは覚えておきたい! CSSの三角関数で斜めのレイアウトを実装するテクニック
ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか? CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です... 続きを読む
プーチン重要論説集 - 山形浩生の「経済のトリセツ」
なんかこんなのを作ってしまったので、読みたい人は読みなさい。何かお気づきの点があればご教示たもれ。 山形浩生 編訳『プーチン重要論説集』(2023) 例によって、しおり/目次リンクがめちゃくちゃになっている。Adobeに上げてpdf化するとOKなんだが、すると見出しのスタイル名を変えないといけなくてヘッダが出ない。... 続きを読む
不正なリクエストを弾くために使える Fetch Metadata という仕様について
作成日 2023-01-29 更新日 2023-01-29 author @bokken_ tag Web, App, Sec はじめに リクエストのコンテキストをサーバ側に伝えることで、サーバ側でリクエストが危険なものかを判別するための Fetch Metadata Request Headers という仕様がある。今回、このヘッダがどういったものなのかについて Fetch Metadata Reques... 続きを読む
セキュリティ関連のHTTPヘッダを一括指定する Baseline ヘッダ - ASnoKaze blog
現在のWebでは、セキュリティ上レスポンスヘッダで色々なものを指定します。Webデベロッパーは個別に指定しなければなりません。 そこで、セキュリティ関連のヘッダを推奨デフォルト値に設定できるようにする「Baseline ヘッダ (Opt-into Better Defaults)」が、GoogleのMike West氏によって提案されています。 まだたた... 続きを読む
LIFULL HOME'S のヘッダ・フッタが新しくなりました! - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。アクセシビリティ推進グループに所属し、社内のプロダクトのアクセシビリティを高めるために日々奮闘しています。 LIFULL HOME'S は不動産・住宅情報の総合サービスです。住宅や住み替えに関する多くの情報を取り扱っており、サービス全体の規模はかなり大きいといえます。 レスポ... 続きを読む
最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ
Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに... 続きを読む
CSSの知っておくと便利なテクニック! ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える
メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。 下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか? CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマ... 続きを読む
モダンCSSでよく使用されるレイアウトを実装するまとめ
ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを... 続きを読む
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポ... 続きを読む
実装の仕組みが分かれば簡単!画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック | コリス
Webページやアプリで見かける、通知や注目の役割を担うカットアウト(画像の一部を切り取る)を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS o... 続きを読む
MIMEヘッダエンコーディングは複雑すぎてつらい / MIME header encoding is hard - Speaker Deck
Transcript MIMEヘッダエンコーディングは MIMEヘッダエンコーディングは 複雑すぎてつらい 複雑すぎてつらい 2021-06-22 とみたまさひろ 1 別にしらなくてもいい 役に立つか立たないかわからない 技術について語るコーナー 2 MIMEヘッダエンコーディング MIMEヘッダエンコーディング メールのヘッダでよく見る =?ISO-20... 続きを読む
高梨陣平 on Twitter: "Office 365でToやCcを空にして、Bccに複数のメールアドレスを指定すると全てのメールのヘッダにBccの最初のentryのドメインネームが漏洩。MSは直す気無し。RFC的に誰の責任か
Office 365でToやCcを空にして、Bccに複数のメールアドレスを指定すると全てのメールのヘッダにBccの最初のentryのドメインネームが漏洩。MSは直す気無し。RFC的に誰の責任か不明との意見が。またHNにはMSは必ず… https://t.co/hIk599tfkk 続きを読む
CSSだけで実装できるとは!テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック | コリス
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか? JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダ... 続きを読む
JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック | コリス
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用... 続きを読む
CDNのキャッシュを制御する CDN-Cache-Control ヘッダ - ASnoKaze blog
CDNのキャッシュを制御する「CDN-Cache-Control」を新しく定義する提案仕様「The CDN-Cache-Control HTTP Response Header Field」が出ているので、簡単に紹介する。 はじめに HTTPではキャッシュを制御するのにCache-Controlヘッダを使用しますが、クライアントとは別にCDNに対して個別にキャッシュの制御を行いたい場... 続きを読む
Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックのまとめ | コリス
ページのレイアウトやUIコンポーネントなど、Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックを紹介します。 ヘッダやナビゲーション、フォーム、テーブルなど、実際のプロジェクトでよく使用されるテクニックです。 Master Flexbox in 12 Minutes with Most Common Use Cases by Thu Nghiem 下記は... 続きを読む
Web制作者は要チェック!最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages | コリス
最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど...記事の続きを読む 続きを読む
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ | コリス
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを... 続きを読む