いまこそリンク集(2024.1.27)

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

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

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

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

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

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

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

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

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

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

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

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

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

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;）の仕組みと効果的な使い方 | コリス

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

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

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

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

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

Flexboxを使う時に覚えておきたい！固定幅と可変幅を組み合わせたレイアウトを簡単に実装する方法 | コリス

2019/07/18 66 users Flexbox コリス CSS 可変幅 レイアウト

幅が決まっている固定要素と幅が決まっていない柔軟な可変要素をうまく組み合わせたレイアウトをFlexboxで実装するCSSのテクニックを紹介します。 画像とテキストを並べたり、ナビゲーションだったり、横に並べた際に高さが異なってしまったり、さまざまなレイアウトを解決するテクニックです。 Making width and flexib... 続きを読む

ユーザー体験の質を左右するナビゲーションのパターン６選 | UX MILK

2019/07/17 58 users UX MILK ユーザー体験

PeteはApp Velocityの経営者で、トロントでもっとも優れたモバイルアプリ開発者の１人です。 アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれ... 続きを読む

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan

2019/05/20 326 users Portals Portal ローディング 新風 ウェブページ

Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似... 続きを読む

[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ | コリス

2019/05/09 59 users シャドウ グラデーション コリス バリエーション 山形

サイトのパンくずやフォームのステップでよく見かける、ブロックに三角形の山形を隣接させたリンクの列をCSSで実装するテクニックを紹介します。 CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します。 Oh, the Many Ways to Make Triangular Breadcrumb ... 続きを読む

GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ | TechCrunch Japan

2019/05/08 58 users iframe Portals Portal デモ 連携

米国時間5月7日、GoogleはPortalsと呼ばれるChromeウェブブラウザ用の新しいページ遷移タグを発表した。このテクノロジーはGoogleがしばらく前から開発を続けてきたもので、機能自体はiFrameとほぼ同様だ。 Googleは「Portalはナビゲーション可能なiFrame」と説明している。従来のiFrameではページ内に別サイトのビュー... 続きを読む

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

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

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

地球の北磁極が年間55kmも移動、国際的な位置定義を前倒しで更新。ナビゲーションなどに影響の可能性も - Engadget 日本版

2019/02/05 184 users 北磁極 前倒し 地球 地軸 Engadget 日本版

北極点と南極点を結ぶように機中を貫く地軸が、約23.4度傾いているという話は多くの人が知っている常識です。この傾きと、地球が太陽の周りを公転する位置の関係が、地上に季節を生み出していることもよく知られています。しかし、磁石が指す北の方角が実は北極点を指していないということは意外と知られていない事実か... 続きを読む

iOSのGoogleマップとYahoo!カーナビ等の地図アプリを連携させる方法

2019/01/25 50 users カーナビ Yahoo ナビゲーションアプリ 地図アプリ iOS

iOSにバイク、車のナビゲーションをさせようと考えたとき、Googleマップは目的地の検索においてダントツの性能を発揮します。 「Google マップ – 乗換案内 & グルメ」をApp Storeで Googleの持つビッグデータにかなう位置情報データベースは、これまでも、これからも現れないでしょう。 ほかのナビゲーションアプリでは... 続きを読む

「Googleマップ」のナビ、一部地域で「制限速度」と「ネズミ捕り」アイコン表示開始 - ITmedia NEWS

2019/01/20 104 users 北米 ネズミ捕り スピード違反 道路 Google

Googleマップのナビゲーション画面に、走行中の道路の制限速度とスピード違反取り締まりスポットが表示されるようになったと複数のメディアが報じた。北米など一部の地域でローリングアウトしていることをGoogleが認めた。 米Googleのモバイル版「Googleマップ」のナビゲーションに、制限速度とスピード違反取り締まり（... 続きを読む

CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ | コリス

2018/12/13 471 users コリス Calc CSS テクニック 参考

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴ら... 続きを読む

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

2018/08/23 68 users margin コリス auto ヘッダ 両端

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

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

2018/08/08 255 users コリス ビューポート スクロールバー CSS 要素

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表... 続きを読む

これはかっこいい！要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css | コリス

2018/07/17 143 users ポパー コリス class コンテナ HTML

Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。 htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作...記事の続きを読む 続きを読む

技術編 | 豊川山岳会

2018/06/01 249 users コンパス 尾根 技術編 地形 アニメーション

技術編 コンパスの使い方や読図を学び、ナビゲーション技術を学びましょう （パワーポイントで作成のものは、一気に尾根や沢が出てきた場合、クリックのしすぎが考えられます。尾根や沢を見つけるためにアニメーションをゆっくり動かしています。） 更新日時　 更新内容（更新状況） 2017.2.20　　 【読図とナビゲーション】(改定版) 　 2016.7.8　　   道を間違いやすい地形とは 2016.1.7... 続きを読む