タグ「ナビゲーション」

タグナビゲーション

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 406件)

iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴

2024/06/20 18 users iOSアプリパターンユーザーコンテンツアプリ

iOSアプリによく使用されているナビゲーションのパターンとそれぞれの特徴を紹介します。情報の階層ツリーを行き来するための構造型ナビゲーション、ユーザーの注意を引くためのオーバーレイ型ナビゲーション、特別なコンテンツで使用する埋め込み型ナビゲーションなど、最近のアプリに必須のナビゲーションばかりです... 続きを読む

Googleマップの知らないはずがない便利機能18選 | ライフハッカー・ジャパン

2024/06/15 26 users ライフハッカー・ジャパン Googleマップ上部傾向方向

1. 北を常に地図の上部に表示するGoogleマップは、ユーザーが向いている方向に地図を向ける傾向があります。常に北を画面の上部に表示させたい場合は、「Googleマップの設定」→「ナビゲーション」と進み、「マップの北を上に表示する」を有効にしましょう。紙の地図に慣れていると、この設定でGoogleマップがもっと使... 続きを読む

CSSはどんどん進化している！マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning

2024/05/22 19 users マグネットエフェクト CSS レスポンシブテクニック

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従しま... 続きを読む

いまこそリンク集(2024.2.15更新)

2024/02/15 9 users リンク集選者バイアスパーソナリティデイリーポータルZ

デイリーポータルZをはげます会では会員限定コンテンツとしてリンク集を公開しています。リンク集？そう、2024年のいまこそリンク集です。コンテンツは増えているのに、そのナビゲーションである検索もSNSも心もとない。そこで必要なのはリンク集なのではないか。選者のパーソナリティやバイアスをはっきりさせた上... 続きを読む

いまこそリンク集(2024.1.27)

2024/01/27 60 users リンク集選者バイアスパーソナリティデイリーポータルZ

CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

2023/11/16 42 users margin auto CSS おさらい実装

margin: auto;は非常に便利なCSSで、使用することも多いと思います。そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centeri... 続きを読む

ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS

2023/04/09 16 users インタラクショントグルモーダル UIコンポーネント CSS

ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。 Ellegant CSS Ellegant CSS -GitHub Ellegant CSSの特... 続きを読む

AIでコードを生成！テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

2023/04/04 144 users コンポーネント CSS AIツール生成 UI要素

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI ... 続きを読む

知っておくと便利！ CSS Flexboxでナビゲーションのアイテムを左と右の両端揃えにする実装テクニック

2023/02/02 20 users 両端横軸 CSS flexbox 実装テクニックアイテム

ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by J... 続きを読む

Microsoft、新しいAndroid版「Power Automate」アプリを一般公開／ナビゲーションを簡素に、応答速度も改善

2022/08/24 8 users Power Automate Microsoft 応答速度

Googleが翻訳やナビゲーションを行う次世代ARグラスの実世界でのテストを開始すると発表

2022/07/20 9 users 翻訳プロトタイプテスト Google ARグラス

現実世界に仮想世界を重ね合わせる拡張現実(AR)が注目される中、さまざまな企業がメガネ型の「ARグラス(スマートグラス)」の開発に取り組んでいます。以前からARグラスの開発・販売を行ってきたGoogleが、新たなARグラスのプロトタイプの実世界テストを、2020年8月から開始する予定だと発表しました。 Building and test... 続きを読む

HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ

2022/01/27 8 users おさらいアイコンテキスト Flexbox HTML・CSS

視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウト... 続きを読む

OPPO、約30gの単眼スマートグラス「Air Glass」発表　ナビや翻訳が可能

2021/12/14 139 users OPPO 単眼スマートウオッチ翻訳スマートグラス

OPPOが、スマートグラス「OPPO Air Glass」を2022年第1四半期に中国で発売する。OPPOのスマートフォンやスマートウォッチと連携して、さまざまな情報を取得できる単眼のスマートグラス。天気、カレンダー、翻訳、ナビゲーションなどのアプリも用意する。 OPPOが12月14日、オンラインイベント「INNO DAY 2021」でスマート... 続きを読む

WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI

2021/12/06 19 users ライブラリ衝突 Floating UI 実装ポップオーバー

WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。 Floating UI ... 続きを読む

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

2021/11/11 144 users モーダル終点連鎖 CSS スクロール

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合... 続きを読む

カルーセルUIを実現するJSライブラリまとめ(2021年版) - 導入手間や機能の比較紹介 - ICS MEDIA

2021/09/02 96 users jQueryプラ MITライセンス ICS MEDIA 商用

いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラ... 続きを読む

Google マップの知られざる11の便利機能 | ライフハッカー［日本版］

2021/08/10 19 users ライフハッカーナビ便利機能ツール Google マップ

車のナビがわりにGoogle マップを使う人も増えたのではないでしょうか？ナビゲーションや交通情報の確認に関して、これ以上のツールはありません。しかし、毎日Google マップを使っている人でも、活用していない機能があります。今回は、Google マップの知られざる便利機能をご紹介しましょう。ナビゲーションの設定... 続きを読む

Google、「Android Auto」アプリの種類を拡充～ナビゲーション・駐車場・充電スポットアプリに対応 - 窓の杜

2021/04/07 6 users 拡充 Android Auto Google 種類駐車場

フロントエンドの制作者は持っておくとかなり便利！Webのさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザインアイディア帳 | コリス

2021/03/23 18 users グラフコピペ画面遷移バリエーションスライドショー

Webページやスマホアプリに動きやアニメーションを加えたい、そんな時にすぐに役立つコピペで利用できる解説書を紹介します。コードはサポートサイトから最新版がダウンロードでき、画面遷移、ナビゲーション、ボタン、スライドショー、検索フォーム、グラフなど19種類にバリエーションが200個くらいあり、「この1冊が... 続きを読む

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/02/18 748 users UIコンポーネントスニペット CSS Layout コリス

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む

Firefox 86、Backspaceキーによるナビゲーションがデフォルト無効に | スラド IT

2021/01/10 15 users スラド BackSpaceキー Backspace プラグ

Mozillaが2月のリリースを予定しているFirefox 86では、WindowsとMacでBackspaceキーによるナビゲーションがデフォルト無効になるようだ(Bug 1041377、 Ghacksの記事、 Techdowsの記事、 Softpediaの記事)。 Backspaceの動作を規定するフラグはFirefox 1.xの時代から存在し、Linux版ではFirefox 2からデフォルトでBacksp... 続きを読む

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 配置

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 ... 続きを読む

(1 - 25 / 406件)

次の25件 »