いまこそリンク集(2024.1.27)

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

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

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

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 マップの知られざる便利機能をご紹介しましょう。 ナビゲーションの設定... 続きを読む

フロントエンドの制作者は持っておくとかなり便利！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 ... 続きを読む

よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout | コリス

2020/05/27 23 users フレームワーク コリス CSS Layout UI要素 CSS

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ... 続きを読む

CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/02/26 21 users ヘッダ コリス レイアウト HTML UIコンポーネント

CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahm... 続きを読む

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

2020/01/23 73 users min-width コリス width ＭＡＸ min

Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な... 続きを読む

CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方 | コリス

2020/01/21 14 users margin Flexbox コリス auto オートマ

ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマ... 続きを読む

CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 | コリス

2019/12/23 178 users margin Flexbox コリス auto プロパティ

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（ma... 続きを読む

UIにダイナミックなアニメーションを盛り込める20の無料ツール | UX MILK

2019/10/17 23 users アニメーション UX MILK 無料ツール タイポグラフィ

近年では誰もがアニメーションを活用します。たとえばBttn.cssやHover Buttonsといった、ボタンに追加できる非常に小さなホバー効果や、Granim.jsを介して動く、魅力的でダイナミックなグラデーションスタイルの背景などが存在します。サイズにかかわらず、アニメーションはタイポグラフィやナビゲーション、ロゴタイプ... 続きを読む

ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ | コリス

2019/10/15 27 users ライセンス UI要素 サイドバー コリス 翻訳記事

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています... 続きを読む

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

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

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