[B! ui][JS] three_beeのブックマーク

three_bee id:three_bee

uiとJSに関するthree_beeのブックマーク (15)

2021年にCodepenで話題！コピペ可なHTMLスニペットベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペットベスト100発表97位 Metallic Bordered Text withCSS Photoshopで作成し
three_bee 2022/01/19
アニメーション

webdesign

まとめ

js

html

css

react

ui

あとで読む

webデザイン
リンク
Tailwind CSSが初めての人でも簡単！ UIコンポーネントを実装するチュートリアル -FlowBiteがかなり便利
先日紹介した「FlowBite」（紹介記事）を使用して、Tailwind CSSでUIコンポーネントを実装する方法を紹介します。 Tailwind CSSのユーティリティクラスで実装された基本コンポーネントがFlowBiteに用意されているので、初めての人でもコピペで簡単に実装できます。 Tailwind CSS Components Tutorial – How to get started with FlowBite by Zoltán Szőgyényi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに FlowBiteの準備 FlowBiteとTailwind CSSをCDN経由でインクルードする方法 FlowBiteでコンポーネントを探す FlowBiteのコンポーネントを実装する方法 Tailwind CSS
three_bee 2021/11/17
css

ライブラリ

あとで読む

簡単

チュートリアル

便利

ui

cdn

js

*web制作
リンク
Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。 Flowrift ライセンスが明記されてい
three_bee 2021/10/20
あとで読む

css

ui

簡単

ライブラリ

レスポンシブ

コード

まとめ

入門

js
リンク
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
three_bee 2021/07/13
スクロール

アニメーション

サイト

コリス

簡単

js

javascript

css

html

ui
リンク
Utility First な CSS in JS フレームワークの導入と３ライブラリの比較 - JX通信社エンジニアブログ
JX通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地﹁Utility First な CSS in JS フレームワーク﹂についてご紹介します。 Emotion で開発する悩み素の Emotion や類似の CSS in JS ライブラリでは、1つの TS/JS ファイル内に CSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名でスタイリングすることです。 const Tit
three_bee 2021/04/07
css

*あとで読む

js

ライブラリ

レスポンシブ

react

Box

ui

あとで読む

*css
リンク
high-performance-sticky-sidebar.html
サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。特定の状況下でフックするために、イベントトリガーを用意。コンテナが長くても短くてもサイドバーを扱うことができます。他のスクリプトへの依存はなく動作。 jQueryやZeptoのプラグインとして利用することも可能。実装はスーバー簡単！ Sticky Sidebarのデ
three_bee 2017/10/18
要素

JavaScript

scroll

jQuery

スクロール

あとで読む

ui

WebDesign

js

techfeed
リンク
[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。通常のセレクトボックスの挙動セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
three_bee 2015/11/09
*jQuery

フォーム

*plugin

jQuery

JavaScript

選択肢

セレクト

JS

あとで読む

UI
リンク
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量︵1.2KB︶スクリプトを紹介します。モーダルウインドウとサイドバーのデモコマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ﹁タイル状コンテンツ﹂のHTMLは、こんな感じです。 data
three_bee 2015/04/23
div

class

data

Javascript

jquery

アニメーション

web制作

js

ui

モーダル
リンク
[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ‥offsetTop このデモでは、ブラックの﹁Top Bar﹂だけがスクロールで表示されます。 ScrollUpBarの使い方実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.google apis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scroll-up-bar.min.js"></script> </body> Step 2: HTML スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、﹁position: absolute;﹂を加えます。 <div id="topbar" styl
three_bee 2014/07/30
Bar

jQuery

ナビゲーション

アニメーション

画面

JS

スクロール

ui

plugin

表示
リンク
jQuery1.9以上で UI Tabsでタブの選択状態をクッキーに保存する | jlamp
jquery.ui.js1.10からcookieオプションがなくなったのね。 jquery.cookie.jsは必須です。 $( "#tabs" ).tabs({ active: ($.cookie("tabs")) ? $.cookie("tabs") : 0 , activate: function( event, ui ){ $.cookie("tabs", $(this).tabs("option", "active")); } });
three_bee 2014/01/09
ui

jquery

保存

タブ

cookie

js
リンク
[JS]スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示するスクリプト -Auto Fix Anything
これは二番目のヘッダとサイドバーで、スクロールすると一番目と同様に上部に貼りつきます。 Auto Fix Anythingの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.autofix_anything.js"></script> <link href='autofix_anything.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML サイドバーをスクロールに合わせてポジ
three_bee 2013/11/14
jquery

HTML

Web制作

UI

css

JavaScript

manual

js

jQueryプラグイン

スクロール
リンク
[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.google apis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。ラッパーのclassに「tabs」を指定し、機能を選択
three_bee 2013/09/26
HTML

hover

js

Information

JavaScript

jQuery

アニメーション

タブ

Tab

ui
リンク
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！前回の記事︵美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ︶ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。目次 ※もちろん順番に読む必要はありません。スマホ専門デザイン見本部品別に見られるサイトその他スマホサイトの部品作りの参考になるサイトスマホサイト素材になるキットフリック用JavaScriptプラグインスマホ対応の無料WordPressのテーマスマホサイト制作参考スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。カテゴライズは業種別のみですが、年月アーカイブがあるので、い
three_bee 2013/07/06
iPhone

webデザイン

js

Mobile

デザイン

UI

スマホ

スマートフォン

まとめ

web制作
リンク
[JS]jQueryのプラグイン33+1選 -2012年10・11月
equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
three_bee 2012/11/21
dom

js

jquery

grid

web制作

JavaScript

ui

*web制作

まとめ

jQueryプラグイン
リンク
典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com
一口にJSerといっても、色々な分野の人がいます。あなたはどんなJSerになりたいですか？　方向性により学ぶべき事も変わってきます。目標を明確にしましょう。というわけで、独断と偏見……というか主に偏見で三種類にまとめてみました。追記: ﹁勉強法﹂とかタイトルに付けておきながら勉強法に触れてませんでしたので﹁勉強範囲﹂に修正しました。ひー。三種類アニメーションを作る人アプリを作る人サーバ側を作る人基本的にプログラマ視点です。コーダー視点も最後に。では、それぞれ見てみましょう。アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flasherさんがシフトしてくる位置。発注側が想定するJavaScripter。最近の携帯ゲームで需要がある。お仕事JSだけでなくCSSや画像を駆使して画面を描く。 UIだけならいなくても困る事はないけれど、UXま
three_bee 2012/11/14
flash

js

css

3d

SVG

dom

JavaScript

ux

canvas

ui
リンク
1