タグ ナビゲーション
人気順 5 users 10 users 50 users 500 users 1000 usersAIでコードを生成！ テキストを入力すると、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コンポーネント、それだけを実装する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 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を紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザイン... 続きを読む
グーグルが発表した新ウェブ技術「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>タグとよく似... 続きを読む
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度傾いているという話は多くの人が知っている常識です。この傾きと、地球が太陽の周りを公転する位置の関係が、地上に季節を生み出していることもよく知られています。しかし、磁石が指す北の方角が実は北極点を指していないということは意外と知られていない事実か... 続きを読む
「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]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス
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... 続きを読む
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス
2018/05/18
250 users
モーダル
コリス
アコーディオン
パララックスエフェクト
ほか
アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ | コリス
2018/02/02
239 users
コリス
矩形
ヘッダ
ランディングページ
イメージ
ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。 スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがス ...記事の続きを読む 続きを読む
新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス
2018/01/30
162 users
コリス
コンポーネント
rem
Sass
Flexbox
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む
BootstrapやAMPなどのテンプレートを簡単にカスタマイズできる無料の国産サービス -Framework Template Editor | コリス
2018/01/15
230 users
コリス
Bootstrap
AMP
Materialize
Bootstrap, Foundation, Materializeなどのフレームワークは手軽に利用できるとは言え、それでも一から始めるのは面倒です。これらのフレームワークを簡単にカスタマイズして利用できる無料の国産サービスを紹介します。 ランディングページやブログをさくっと作りたい、ナビゲーションやカード型コンポーネントを利用したいなど、さまざまなテンプレートやテーマを利用できます。 Frame... 続きを読む
CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ | コリス
2017/12/15
382 users
コリス
Calc
CSS
テクニック
素晴らしいアイデア
2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、... 続きを読む
ヘッダ・フッタ・ナビゲーションなど、最近のWebデザインで採用されているアイデアのまとめ -Good Web Design | コリス
2017/10/12
135 users
ブッダ
コリス
ヘッダ
ランディングページ
アイデア
ランディングページで使用されているヘッダ・フッタ・ナビゲーション・フィーチャーコンテンツ・アクションボタン・ソーシャルコンテンツなど、最近のWebデザインで採用されているアイデアがまとめられたGood Web Desig ...記事の続きを読む 続きを読む
デザインするのを忘れがちなデザイン要素のまとめ | コリス
2017/09/05
116 users
ヘッダ
コリス
見出し
ロゴ
スマホアプリ
ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いま... 続きを読む
目的にあったJavaScriptのライブラリを探す時にかなり便利、JavaScript専門の検索エンジン -searchlibs | コリス
2017/06/18
133 users
カルーセル
コリス
スライダー
スクロールエフェクト
目的
スライダーやカルーセル、ナビゲーション、アニメーションを伴ったスクロールエフェクトなど、目的にあったJavaScriptのライブラリを探す時に役立つJavaScript専門の検索エンジンを紹介します。 人気はあるのか、ア ...記事の続きを読む 続きを読む
よこ並びのCSS。
2017/02/15
569 users
CSS
レスポ
タブ
昨今
順番
ナビゲーションやタブやアイテムリストなど、「よこ並び」にレイアウトするためのCSSについて、お馴染みの方法から最近の方法まで、順番に見ていきます。スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポ... 続きを読む