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

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で実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です... 続きを読む

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

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

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

モダン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 によっては表示が崩れてしまうかもしれません。ブレークポ... 続きを読む

高梨陣平 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;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用... 続きを読む

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 下記は各ポイントを... 続きを読む

レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages | コリス

2019/07/29 202 users コリス ブッダ UIコンポーネント コピーライティング 実装

ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザイン... 続きを読む

ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリス

2019/04/08 156 users コリス CSS 固定ヘッダ テクニック 上部

ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-p... 続きを読む

position: sticky;の仕組みや実際の使い方が分かると便利！仕様から実装方法までをやさしく解説 | コリス

2019/02/07 141 users sticky コリス position スティッキー 仕様

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS P... 続きを読む

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック | コリス

2018/08/23 68 users margin コリス auto 両端 ナビゲーション

CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つ... 続きを読む

Cookieに変わる Sec-HTTP-State ヘッダの提案 - ASnoKaze blog

2018/08/14 78 users IETF ステート http cookie 提案

Cookieの様々な問題を解決するために、Webセキュリティー界隈で活躍されるMike West氏から「Tightening HTTP State Management」というCookieに変わるHTTPにおいてステートを扱う仕組みが提案されています。 現在はIETFのHTTPbis WGのMLに投稿されただけで仕様が正式にinternet-draftとして提出されたものではありません... 続きを読む

保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

2018/08/10 289 users CSS CSS flexbox スニペット集 Flexbox

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up al... 続きを読む

【図解】https(SSL/TLS)の仕組みとシーケンス,パケット構造 〜暗号化の範囲, Encrypted Alert, ヘッダやレイヤについて～ | SEの道標

2018/07/20 950 users レイヤ シーケンス TLS 道標 図解

続きを読む

Web制作者が知っておくと便利！Chrome 67でアップデートされたデベロッパーツールの新機能 | コリス

2018/06/04 73 users デベロッパーツール コリス レスポンス 無限ループ web

先週末にリリースされたChrome 67でアップデートされたデベロッパーツールの新機能を紹介します。 Webの制作時に役立つ機能だけでなく、UIも進化しており、さらに便利になりました。 What's New In DevTools (Chrome 67) ネットワーク ヘッダとレスポンスを検索 CSS変数値のプレビュー機能 Copy as fetch Auditsパネルのアップデート 無限ループを... 続きを読む

ルータやスイッチは日本の法律上、通信の秘密を侵害するが違法ではない:Geekなぺーじ

2018/04/24 235 users ISP Geek IPヘッダ パケット ページ

パケットのヘッダに記載された情報を読み取らなければ、ルータはパケットを転送できません。 日本の法律では、ISPなどの電気通信事業者がIPヘッダに記載された情報を読み取ることは通信の秘密を侵害すると解釈されています。その一方で、インターネットにおける通信を実現するためにはルータがIPヘッダに記載された情報を読み取ることは必要であり、違法であるとは思えません。 日本におけるインターネットと法律に関する... 続きを読む

WordPressで個別のページごとに、CSSやJavaScriptが利用できる便利なプラグイン -CSS & JavaScript Toolbox | コリス

2018/04/17 58 users コリス ブッダ CSS WordPress PHP

WordPressの記事ページや固定ページごとに、異なるHTMLやCSSやJavaScriptやPHPを利用でき、一元管理もできるWordPressのプラグインを紹介します。 適用できるページは単独でも複数も可能で、適用する場所もヘッダやフッタにと指定できます。前回紹介した際から大きくバージョンがアップし、さらに便利になった新機能も含めて要チェックです。 CSS & JavaScript Tool... 続きを読む

朝日の森友文書改竄問題報道に対するネトウヨのカンカン踊りをまとめてみました - 雑記（主に政治や時事について）

2018/03/11 477 users ネトウヨ 時事 雑記 Twitter 朝日

2018 - 03 - 11 朝日の森友文書改竄問題報道に対するネトウヨのカンカン踊りをまとめてみました インターネット言論 政局 森友学園・加計学園 今となっては大変笑えるヘッダの写真。朝日のスクープ以来、 上記 のような文章が Twitter 上を踊り狂い、 焼けた鉄板の上で ネトウヨ がカンカン踊りをしている ような様であったが、下記の報でそれもほぼトドメといった情勢になるはずである。 ww... 続きを読む

最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ | コリス

2018/02/02 239 users コリス 矩形 ナビゲーション ランディングページ イメージ

ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。 スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがス ...記事の続きを読む 続きを読む

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ | コリス

2017/11/26 81 users コリス Flexbox 全幅 グリッド CSS

CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。 来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこな... 続きを読む

ヘッダ・フッタ・ナビゲーションなど、最近のWebデザインで採用されているアイデアのまとめ -Good Web Design | コリス

2017/10/12 135 users ブッダ コリス ナビゲーション ランディングページ アイデア

ランディングページで使用されているヘッダ・フッタ・ナビゲーション・フィーチャーコンテンツ・アクションボタン・ソーシャルコンテンツなど、最近のWebデザインで採用されているアイデアがまとめられたGood Web Desig ...記事の続きを読む 続きを読む