タグ「外部ファイル」

タグ外部ファイル

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

(1 - 25 / 84件)

簡単で便利なのが揃ってる！CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス

2019/01/17 66 users ローディングコリス class ローディングアニメーション

シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという...記事の続きを読む続きを読む

これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス

2018/10/22 205 users コリス cla Lazy Load img要素テクニック

最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。そんなLazy Loadを外部ファイルとimg要素にcla... 続きを読む

[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts | コリス

2018/08/01 672 users アニメーション単体レスポンシブ対応 div要素一つコリス

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。レスポンシブ対応で、アニメーションに... 続きを読む

Webページの表示が早くなる！既存ページのクリティカルレンダリングパスを最適化するオンラインツール | コリス

2017/09/08 94 users コリスクリティカルレンダリング上部テクニック

スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。既存ページのクリティカルレンダリングパスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介しま... 続きを読む

[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート | コリス

2017/03/28 61 users コリス矩形鋭角円形 CSS

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B ...記事の続きを読む続きを読む

[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト – Flow Up | コリス

2015/10/09 73 users Step エフェクトコリスデモパネル

ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。デモの動きスクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル当スクリプトとjquery.j... 続きを読む

[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height | コリス

2015/09/10 179 users コリス script Body Step スクリプト

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init();... 続きを読む

[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid | コリス

2015/08/25 93 users コリスチューイングガム CSS head レスポンシブ対応

テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。デモはサイズの可変可能 chewing-grid.cssの使い方 Step 1: 外部ファイル当スタイルシートを外部ファイルとして記述します。 <head> ... ... 続きを読む

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス

2015/08/03 338 users jQuery コリス Body Step スクリプト

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む

[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js | コリス

2015/07/13 69 users jquery.js ヘッダ Body Step コリス

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js | コリス

2015/06/30 90 users コリス script プルダウンエレメント Body

デモページ物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定... 続きを読む

[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons | コリス

2015/06/16 97 users メタファコリス Step スクリプトアニメーション

Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル当スタイル... 続きを読む

Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke | コリス

2015/06/01 168 users jQuery Smoke コリス Bootstrap コード

Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。 Bootstrapの対応バージョンは、3.xです。 Smoke Smoke -GitHub Smokeの使い方 Smokeのデモ Smokeの使い方 Smokeの使い方は、簡単です。 Bootstarpでつくったページに、外部スクリプト・スタイルシ... 続きを読む

Webページをブラウザから印刷する際に、最適化するためのCSSのフレームワーク -Hartija | コリス

2015/05/27 79 users コリス MED フレームワーク CSS 見出し

Hartija CSS Print Framework -GitHub Hartijaではページ全体、見出しやテキスト、画像、リンク、テーブルを印刷用にスタイル定義し、印刷時には非表示にさせる要素を定義します。以前紹介した時に比べCSS3/HTML5対応でいろいろなスタイルが増えています。 Hartijaの使い方 Hartijaの「print.css」を外部ファイルとして加えるだけです。「med... 続きを読む

[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js | コリス

2015/05/26 129 users コリス Step スクリプト変形アニメーション単体

オフキャンバスメニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとし... 続きを読む

実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス

2015/05/19 143 users head スピナーコリス Step link rel

ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。スピナーの実装実装は、簡単です。「弾むボール」を例に、説明します。 Step 1: 外部ファイル各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む

[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js | コリス

2015/05/13 156 users コリス ESC boot Bootstrap スクリプト

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Boot... 続きを読む

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js | コリス

2015/03/16 140 users コリス jQuery head jquery.js Step

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type... 続きを読む

[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs | コリス

2015/01/26 64 users head コリス jquery.js Step タブ

デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></sc... 続きを読む

[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate | コリス

2014/11/26 54 users Modernizr コリス head jquery.js デモ

デモ：Safari/OS Xで表示フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="j... 続きを読む

[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス

2014/11/14 121 users コリス Demo canvas Step Body

最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む

[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス

2014/11/10 110 users WebM コリス jquery.js Body Step

.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。デモページ単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS | コリス

2014/09/22 97 users jQuery コリス Step スクリプトスワイプ操作

最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！デモページ：2ページ目ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル当スクリプトとj... 続きを読む

[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider | コリス

2014/09/17 53 users コリス jQuery div head エレメント

divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link re... 続きを読む

[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js | コリス

2014/09/08 188 users コリス jQuery 横軸 head Step

スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/time... 続きを読む

(1 - 25 / 84件)

次の25件 »