タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
CSS Gridで2カラムのレイアウト（メインとサイドバー）を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか？ CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。 Using Position Sticky With CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに gridコンテナの子でposition: sticky;が機能しない align-itemsのデフォルトの動作 別の例 終わりに はじめに position: sticky;がgridコンテナの子で期待通りに機能しなかったことはありませんか？ 数日前、私は友人がまさにその問題を解決するのを手伝っていたので、それについて解説し
CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。 How to create a Sticky Hero section by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに チュートリアルの動画 実装方法 はじめに わたし達は先日、スティッキーヒーローのコンポーネントを公開しました。このデモは、スクロールするとコンテンツを表示するスティッキーセクションです。 上記は、固定された画像をズームさせたデモで、オーバーレイにすることも簡単で
![[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/39ce5a1514a3f90573d20acd23e68d827b403b5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019051902-01.png)
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり
GitHub - gluesql/gluesql: GlueSQL is quite sticky. It attaches to anywhere.
GlueSQL is a Rust library for SQL databases that includes a parser (sqlparser-rs), an execution layer, and a variety of storage options, both persistent and non-persistent, all in one package. It is a versatile tool for developers, supporting both SQL and its own query builder (AST Builder). GlueSQL can handle structured and unstructured data, making it suitable for a wide range of use cases. It i
Hackers easily tricked Tesla's autopilot with a piece of sticky tape
Hackers easily tricked Tesla's autopilot with a piece of sticky tape Tesla promises to release an electric car with fully autonomous control, but at the same time they strictly insist - always keep your hands when driving on the steering wheel. The last claim was recently proven by hackers at McAfee's service. With the help of a symbolic piece of dark electrical tape, they tricked Tesla's onboard
macOSのスティッキーズのようにiPhoneやiPadのホーム画面上にメモを設置できるiOS 14用ウィジェット「Sticky Widgets」がリリース。
macOSのスティッキーズのようにホーム画面上にメモを設置できるiOS 14用ウィジェット「Sticky Widgets」がリリースされています。詳細は以下から。 macOSにプリインストールされているアプリにスティッキーズというメモアプリがあり、付箋のようにメモをデスクトップ上に貼り付けておくことができ、macOS 10.15 Catalinaで廃止されたDashbaord(ダッシュボード)のメモウィジェットも現在はこのスティッキーズに統合されていますが、そんなスティッキーズをiOS 14でサポートされたウィジェット機能を利用して、iPhoneやiPadのホーム画面上に設置できるアプリ「Sticky Widgets」が新たに公開されています。 Welcome to Sticky Widgets, the absolute easiest way to put a sticky note
Microsoft Teams helps power remote working worldwide---and it's getting even better. With more people around the world now working from home, Microsoft has been constantly updating its remote working app, Teams, to keep up with its users' demands. Now, Microsoft has made an announcement of what you can expect from the productivity-boosting app. What's Coming to Microsoft Teams? Microsoft made this
Windowsの付箋に半角文字が入力できない。 全角文字なら入力できるのに何故か半角は入力できない。 こんな現象に困っている場合の解決方法を紹介する。 付箋（Sticky Notes）に半角入力できない原因 付箋アプリ（Microsoft Sticky Notes）で文字が入力できなくなる原因は十中八九IMEとの連携に起因するものだ。 そして全角文字が入力できないのであれば日本語入力ソフト（IME）との相性問題の可能性がある。 付箋アプリ「Sticky Notes」を使用する場合・・ Google日本語入力 ATOK を使っていると日本語での入力ができないらしいんです。 参考：付箋をwindows10で使うと日本語入力できない時の対処法。 | ゴリ会議 しかし筆者の環境ではGoogle日本語入力で付箋に全角入力できているので、相性問題は解決済み。 問題は半角入力できない場合だ。 こちらは全
I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll... Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column's data is associated with? If this is my first time looking at this table - probably not.
Don't let emails eat your time. Here's how you can use sticky notes to make emails efficient. Checking emails are part of most professionals' daily work routine. So, it pays to find ways to speed up this process and make it a little less stressful. One way you can make your life easier is to use the Microsoft Sticky Notes on your Outlook email account. Let's find out how. Get Started With Using Mi
GitHub - zonetti/zonote: Cross-platform desktop note-taking app. Sticky notes with Markdown and Tabs. All in one .txt file.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - t-mart/kill-sticky: Bookmarklet to remove sticky elements and restore scrolling to web pages!
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回の記事positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sticky;に関して解説していきます。 position: sticky;とは positionプロパティは入れる値に応じて要素の高さの有無が決まっています。 static、relativeであれば高さを有し、absolute、fixedであれば要素の高さがなくなります。 また、要素の位置指定をする際はそれぞれ基準となる要素が決まっています。relativeは通常配置される位置を基準に、absoluteは基準となる親要素、fixedはウインドウ全体を基準としていました。 stickyを設定された要素は、通常の位置に配置され、その要素の位置がウインドウ全体を基準として、指定位置の
How to Add Sticky Notes to Webpages in Google Chrome and Firefox
Sticky notes can be a handy tool to easily keep track of notes. Here's how to add them directly to webpages within both Chrome and Firefox. There are plenty of software packages with which you can stick notes to the Windows desktop. Windows 11 even includes an accessory for adding desktop stickies. Yet, few of those apps enable you to stick notes to browser page tabs. However, there are some stick
How to Keep Sticky Notes Always on Top on Windows 10 & 11
Put your reminders front and center by putting your sticky notes always on top with Windows 10 and 11. Windows 10 and 11 version comes with the Sticky Notes app. It is a handy little app to quickly jot down bits of information and scribble other notes for easier access. While the app supports basic editing tools and even lets you add images to your notes, it lacks the always-on-top feature. With a
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! You can’t position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol’ <table>. This is tricky stuff, because if you didn’t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent ele
Visual Studio Code's New Editor Sticky Scroll Feature - Never Get Lost In The Code Again!😍
ByteHide Posted on Aug 18, 2022 • Updated on Jan 9, 2023 • Originally published at bytehide.com Visual Studio Code's New Editor Sticky Scroll Feature - Never Get Lost In The Code Again!😍 Finally came what many of us were not waiting for but wishing for! (like the song that nobody expected but everybody needed it). Who is not tired of having hundreds of lines of code and not knowing what class or
AWSのELB(ALB)におけるSocket.IOのwebsocket接続と負荷分散 - Stickiness(Sticky session)の活用 - このすみノート
AWSではELB(Elastic Load Balancing)を活用し、アクセスの振り分けや負荷分散を行なうのがメジャーです。 ロードバランサーを使った構成は、通常のWebシステムではごくごく一般的です。 ただしSocket.IOを使ったウェブソケット(websocket)接続では、問題となる場合があります。 これには理由がありまして、私も調査に苦労しました。 まずは前提となる知識を共有しつつ、備忘録を兼ねて解説します。 目次 目次 Socket.ioの仕組みをざっくりと理解する ロングポーリング(polling) ロングポーリングからウェブソケット(websocket)へ Connection: Upgrade ロードバランスされるとセッション(sid)が引き継げない問題 Redisによるセッションの共有 Application Load Balancer Stickiness(Sti
【CSS】position:sticky;による押し出し、結局こうなりました - Little Strange Software
どうも！LSSです！！ ちょっと前に、 こんな記事を書いていましたが、結局のところ「これでいいや」 ってとこに落ち着いたので、それを書いてみます。 デザインCSSと定型文 要するに、見出し１個分の「項目」ごと<div>タグで囲んでます これだと見出しの高さとか気にしなくて良くなりました！ デザインCSSと定型文 デザインCSSの記載内容 .stk2{ position: -webkit-sticky; position:sticky; top:30px; } 定型文に登録した内容（から抜粋） <div> <h2 class="stk2">タイトル</h2> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div> <h2 class="stk2">タイトル</h2> <p> </p> <p> </p> <p> </p> <p> </p> </div>
2021年1月15日、伝説的クルー・SCARSのメンバーであるSTICKYの訃報が知らされた。多くの関係者やリスナーがその死を悼み、現在も氏の楽曲の素晴らしさを説いている。STICKYの遺した音楽をただ歴史の中に埋もれさせてはならない──その思いは近しい方々やリスナーの、きっと共通した願いではないかと思う。本稿は故・STICKYの過去のディスコグラフィを仔細に振り返る記事でもなければ、ましてやアクセス稼ぎの噂話を語る記事でもない。ただただ氏の急逝を悼み、川崎市川中島をフッドに吐き出したそのラップが日本のHIPHOPにどんな影響を与えたのか、残したものは何だったのか。その音楽的遺産をきちんと日本のHIPHOPの歴史上にマークする為のものだ。 ─「俺はただ金儲けがしたい」(“SCARS” 『THE ALBUM』) そのシンプルな目的に基づくSTICKYの音楽が、どれだけそれ以上のものをHIPH
2020年新しく生まれ変わった iPhone SE の Web ページでも採用されている CSS の sticky。 iPhone SE 2020 の商品ページ（LINK） 今回は実際にいくつかの sticky のサンプル・プログラムを交えて、 sticky 体験を行っていきたいと思います。 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 Webデザイン志望の方必見！CSSの「sticky」を使いこなそうstickyとは sticky は CSS p
パソコンで入力したメモをスマートフォンで確認する。もしくは、スマートフォンで作成したメモをパソコンでも管理したいとき、どのアプリを使えばいいのか悩みますよね。Windows 10の標準アプリ「Sticky Notes」とOneNoteで簡単に実現できます。 メモの同期にはSticky Notesが便利 昔からパソコンを使っている人は、デスクトップにメモを貼れる「付箋」のアプリを覚えているでしょう。実は、Windows 10にはメモの機能が強化された「Sticky Notes」（スティッキーノーツ）というアプリがあります！ Sticky Notesで作成したメモをデスクトップに貼り付けたところ。まさに付箋のようです。 Sticky Notesのメリットは、スマートフォンアプリの「OneNote」（ワンノート）を介してメモを同期できることでしょう。仕事中のメモ書きをスマートフォンで確認する、も
こんにちは。クックパッド事業部でiOSアプリの開発をしている新堀(@tk108gabalian)です。 iOS版のクックパッドアプリではスクロール時にコンポーネントが上部に固着する画面があります。 所謂StickyHeaderというやつです。 今回はそのStickyHeaderをSwiftUIで、かつTabViewを使用つつ実現する方法について紹介します。 導入の背景 2022年7月にリリースした「のせる」画面には以下の要件がありました。 画面上部にユーザー情報を表示する。 ユーザー情報の下にタブを表示する。 タブをタップするか、タブより下を横にスワイプすることでタブの切り替えが可能。 画面全体をスクロールできるが、ユーザー情報が隠れるまでスクロールしたら画面上部にタブが固着し、以降はタブより下の部分のみスクロールする。（逆方向にスクロールする場合は再度ユーザー情報が表出する。） また、事
Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element. That’s not quite what I’m talking about here. “Sticky footers” were a UI concept before position: sticky existed and they mean something slightly different. The idea is that they stick to th
ハマったけどググってもわからず、どうにか自己解決したのでメモ書きを残します。 お忙しい方は一番下だけ見てください。 普通に組む サイドバーを追従させるのに便利なcssの position: sticky; 今時のcssであれば、flex を使って下記のように実装することが多いかと思います。 (flexを使っていない方のお役には立てません。すみません。がんばってください。) <div class="container"> <div class="sidebar">...sidebar...</div> <div class="main">...main contents...</div> </div> .container { display: flex; align-items: flex-start; } .sidebar { width: 30%; position: -webkit-
A table with both a sticky header and a sticky first column | CSS-Tricks
We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this demo). But stickiness isn’t just for the top of the screen, you can stick things in any scroll direction (horizontal is just as fun). In fact, we can have multiple sticky elements stuck i
Bram.us A rather geeky/technical weblog, est. 2001, by Bramus
【CSS】tableの行（列）を『sticky』で固定したときにスクロールしても線が消えないようにしてみる | 125naroom / デザインするところ（会社）です。
tableの『行』を固定してスクロールする（失敗作） See the Pen 【CSS】テーブル（table）の行を固定してスクロールする（失敗作） by 125naroom (@125naroom) on CodePen. HTMLとCSSはこちら <table> <tr> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> <th class="_sticky">固定くん</th> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <td>テキスト</td> <td>テキスト</td> <td>テキスト</td> </tr> <tr> <
VSCode, Dev Containers and Docker: moving software development forward - Sticky Bits - Powered by Feabhas
Long term readers of this blog will know our devotion to using container-based technology, especially Docker, to significantly improve software quality through repeatable builds. In the Autumn/fall of 2020, Microsoft introduced a Visual Studio Code (VSCode) extension Remote – Containers. With one quick stroke, this extension allows you to open a VSCode project within a Docker container. Getting st
Windows 10の「付箋」を起動する方法 この記事では、Windows 10に標準搭載されている「付箋」アプリの使い方を紹介します。「付箋」アプリの名称は、Windows 10 バージョン1607（Anniversary Update）で「Sticky Notes」に変わりましたが、現行のバージョン20H2（October 2020 Update）では「付箋」に戻っています。バージョンによって名称が異なりますが、基本的には同じアプリなので混乱しないように注意しましょう。 【1】タスクバーの検索ボックスに①「付箋」と入力し、②「付箋」アプリをクリックします 【2】サインイン画面が表示されます。アカウントを変更する必要がなければ、そのまま「開始」をクリックすると「付箋」アプリが起動します 「付箋」でデスクトップにメモを貼る 「付箋」はその名の通り、紙の付箋のようにWindows 10のデス
これを使ってSticky TabBarを実現するわけですが、NestedScrollView自体メジャーなWidgetであるとは言えないと思うので簡単に解説していきます。NestedScrollViewをかじったことがある方はすでに見たことがあるかもですが、まずはドキュメントに出てくるサンプルに目を通していただきたいです。（以下ドキュメントより抜粋引用） headerSliverBuilderとbodyの2つのプロパティが出てきています。このたったの2つのプロパティを使うだけでnestedなScrollViewを実現できることがわかります。更にNestedScrollViewの実装をのぞいてみると、内部的にCustomScrollViewの子クラスを使用しており、そのsliversにheaderSliverBuilderで渡したWidgets（Slivers）とbodyをSliverFi
ステッカー屋さん運営ゲーム『Sticky Business』Steamにて好評スタート。理想の“カワイイ”をステッカーにして売りまくろう - AUTOMATON
パブリッシャーのAssemble Entertainmentは7月17日、Spellgarden Gamesが手がけたステッカーショップ運営シミュレーションゲーム『Sticky Business』を配信開始した。対応プラットフォームはPC（Steam/GOG.com/itch.io）で、ゲーム内は日本語表示に対応。本作は、さっそくユーザーから高い評価を獲得している。 『Sticky Business』は、ステッカーを作成・販売するショップを運営するシミュレーションゲームだ。本作では、あらかじめ用意された絵柄を使って独自のステッカーを作成可能。テーマごとのカテゴリにさまざまな絵柄や文字パターンがあり、拡大縮小や角度調節をしながらそれらを組み合わせることで、単に絵柄を並べるだけでなく、オリジナルのアートへと発展させることができる。また、丸や四角などのシンプルなパターンを上手く組み合わせて、好き
CMake Part 1 - The Dark Arts - Sticky Bits - Powered by Feabhas
A blog looking at developing software for real-time and embedded systems Introduction In our previous post Why We Need Build Systems we examined the need for Build Systems in modern software development. In this post we will examine how to use CMake to mange the build process for a cross compilation project. CMake can be described as a marmite application: you either love it or hate it. Here at Fe
Windows 10 / 11 付箋フリーソフト「Simple Sticky Notes」が純正よりも使い勝手が良かったので紹介します
Windows 10 にはもともと「付箋（Sticky Notes）」という純正付箋アプリが始めから入っていて、デスクトップ上に付箋を作成することができます。 この付箋アプリはかなり便利で重宝していたのですが、Windows 10 バージョン 1809 アップデートで改悪されてしまい、個人的に使いにくくなってしまったのです。 どのような改悪かは以下で紹介するとして・・・
NYで学んだExcel術【Self Referencing If（通称 Sticky If）】が目から鱗だった。Wall Stのジュニアバンカーが愛用するこの技を使うだけでモデルの見やすさ、使いやすさ、作るスピードがぐっと上がるので是非覚えてほしい。 Sticky Ifを使わない場合ある会社の業績予想を3ケース作り、ケース毎の売上と利益水準を比較したいとする。Sticky Ifを使わない場合、通常以下のように3パターンのモデルを作り、アウトプットの表でそれぞれのモデルから値を引っ張ることになるだろう。 図1：3ケースのモデルとアウトプットモデルがこの例のように簡単であれば上記のやり方でも問題はないが、実務ではモデルが何百行にもなるので、ケース毎に同じモデルを幾つも作るのは非常に手間がかかる。また、修正が入るたびに同じことを全てのケースのモデルに反映しなくてはいけないため、ミスが起こる可能性
How to Use CSS Grid for Sticky Headers and Footers | CSS-Tricks
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little adjustment in our thinking, we can pull off headers and footers that behave like they are fixed, or have that “stick
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法
[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法
CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita
OS標準の付箋アプリ「Sticky Notes」が刷新 ～Windows版「OneNote」でプレビュー開始／引用元のアプリ・URLも同時に記録する［スクリーンショット］コマンドなどを搭載
![さくらインターネットで活躍中の id:y_uukiを訪問 | はてな卒業生訪問企画 [#9] - Hatena Developer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b5961cfe7e9736ef0e88bc0290b1599481d2626/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenatech%2F20240319%2F20240319125826.jpg)
Microsoft Teams Receives Tasks, Sticky Notes, and More
OS標準の付箋アプリ「Microsoft Sticky Notes 3.7.106」が正式リリース／ジャンプリストに付箋の一括表示・非表示コマンド
【Windows10】付箋（Sticky Notes）に半角入力できない - ITips
Please Make Your Table Headings Sticky
How to Use Sticky Notes With Outlook for Better Emails
OS標準の付箋アプリ「Microsoft Sticky Notes 3.7」が正式リリース／選択テキストの背景色がカラフルに、“ダーク モード”でもOK
Position Sticky and Table Headers | CSS-Tricks
Making Tables With Sticky Header and Footers Got a Bit Easier | CSS-Tricks
追悼・STICKY for SCARS：その功績─苦しみと光の遺産 - PRKS9
【Webデザイン】CSSの『sticky』を使いこなそう
【使ってる？】パソコンに貼れる付箋！ スマートフォンともメモを同期できる「Sticky Notes」
SwiftUIでStickyなタブを実現する - クックパッド開発者ブログ
A Clever Sticky Footer Technique | CSS-Tricks
CSS Stickyでサイドバーの下端を追従させる - Qiita
Smooth Scrolling Sticky ScrollSpy Navigation
Windows 10、「付箋」アプリ（Sticky Notes）の起動方法と使い方
NestedScrollViewを使ってSticky TabBarを実現する｜木藤紘介
モデルが格段にレベルアップするExcel術 【Sticky If】｜TJwallstreet｜note
anond.hatelabo.jp
reseed.resemom.jp
news.yahoo.co.jp
togetter.com
ncode.syosetu.com
note.com/mum1289