これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説

2024/10/10 126 users hide CSS スクロール方向 解説 JavaScript

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide ... 続きを読む

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

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でよく使用するコードがまとめられた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 道標 図解

続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

最近のWebサイトで使われているレイアウト・コンポーネント全102種類が揃ったデザイン素材 -Frames | コリス

2017/10/03 111 users ブッダ Frames コリス プロダクト ベース

最近のWebデザインでよく利用されるヘッダやフッタのレイアウト、プロダクト、フィチャーページ、フォーム、リストなど、さまざまなレイアウト・コンポーネントが用意されたデザインのベースとなる素材を紹介します。 Webサイトの ...記事の続きを読む 続きを読む

【修正済み】はてなブログ開設のリンクがヘッダ・フッタの表示設定に関わらず表示される不具合がありました - はてなブログ開発ブログ

2017/09/11 185 users ブッダ パーマネントリンク表示 レスポンシブデザイン 障害

2017 - 09 - 11 【修正済み】はてなブログ開設のリンクがヘッダ・フッタの表示設定に関わらず表示される不具合がありました 障害・不具合 はてなブログでは2017年9月6日（水）、はてなブログをご利用いただいていない （はてなにログインしていない） 方が閲覧した際、PC版 （レスポンシブデザインのスマートフォン表示を含む） の記事ページ （個別記事のパーマネントリンク表示） に「はてなブロ... 続きを読む

デザインするのを忘れがちなデザイン要素のまとめ | コリス

2017/09/05 116 users コリス 見出し ナビゲーション ロゴ スマホアプリ

ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いま... 続きを読む

スゴイのが登場！Webやスマホページを積み木感覚でデザインできる、日本語対応の無料オンラインツール -STUDIO | コリス

2017/08/29 549 users コリス ブッダ Studio コンポーネント 積み木感覚

国産のツールでは初じゃないでしょうか。 Webサイトやスマホアプリのページデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。 操作が非常に快適で、ちょっと触るだけでもかなり楽しめます。 STUDIO STUDIOは無料で利用できるオンラインサービスで、日本語版と英語版がリリースされています。 ヘッダやフッタ、コンテンツのコンポーネントなどをドラッグ&ドロップでぽんっと... 続きを読む