HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem

2024/07/31 7 users スピナー アニメーションgif アニメーション HTML

HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ... 続きを読む

改行コード(CR/LF)と改行文字と標準C - yohhoyの日記

2022/09/04 6 users yohhoy プログラム内部 改行コード 改行文字 文字コード

プログラミング言語C標準規格における改行文字(new-line character)と改行コードCR, LFとの関係性について。 まとめ： C標準規格ではプログラム内部で扱う「改行文字」と、外部ファイルにおける具体的なCR, LF等の「文字コード」を区別する。*1 *2 改行文字をファイル上でどう表現するかについて何ら規定しない。CR/LFを... 続きを読む

これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text | コリス

2021/09/27 19 users コリス スクリプト HTML カスタム要素 アニメーション

テキストをHTMLのタグ（カスタム要素）で囲むだけで、タイプライターのアニメーションを簡単に実装できるスクリプトを紹介します。 外部ファイルを記述し、あとは<p>内でも<h1>内でもタイプライター...記事の続きを読む 続きを読む

JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js | コリス

2021/03/24 27 users スクリプト デフォルト 字幕 コリス 実装

動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。 実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。 Moovie.js デフォルトでも快適、フルカスタマイ... 続きを読む

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

2020/05/27 23 users フレームワーク ナビゲーション コリス CSS Layout

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

タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider | コリス

2019/07/17 35 users バニラJS ライブラリ コリス 単体 HTML

デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -G... 続きを読む

簡単で便利なのが揃ってる！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... 続きを読む

DBスキーマからKotlinのテストフィクスチャを自動生成するgradleプラグインを作った - maeharinの日記

2018/08/08 17 users DSL Kotlin maeharin XML users

サーバーサイドKotlinでDB接続テストする際、テストデータのセットアップにはDbSetup が便利です。DbSetupは「xmlなどの外部ファイル」ではなく「コード」でテストフィクスチャを生成できるJavaライブラリで、以下のようなKotlin用のDSLも提供してくれているので重宝しています。 insertInto("users") { mappedValues( "... 続きを読む

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

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

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

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

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

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

Sassってみよう！〜@import編〜 | 三方良し！

2017/08/02 20 users Sass import CSS コンパイル 三方

cssでもお馴染みの @import ですが、 Sassでは少しだけ使い方が異なります。 cssの場合、@importで指定したcssファイルはあくまで外部ファイルとしてリンクされたカタチで読み込まれますが、 Sassの場合は、@importで指定したscssファイルは ひとつのcssファイルとしてコンパイル されます。 cssの@importは、外部ファイルのリンクによりHTTPリクエストが発生... 続きを読む

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

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

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

「リンクの自動更新が無効にされました」の原因となる場所を探す方法（セルと設定） - 日々のこと

2015/11/08 25 users セル VBA エクセル Excel 原因

2015-09-01 「リンクの自動更新が無効にされました」の原因となる場所を探す方法（セルと設定） Excel /VBA/Office技 やってみた 【スポンサーリンク】 エクセルのエラーで厄介なものとして、「リンクの自動更新が無効にされました」があります。ファイルを開いたときに表示される黄色いメッセージです。どこに外部ファイルへのリンクがあるのか、探すのが大変なんですよね。自分でうっかり埋め込... 続きを読む

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

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

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

VisualStudio の .csproj でビルド構成に依存せずApp.config のConfiguration Transformを行おう - tech.guitarrapc.cóm

2015/09/11 42 users VisualStudio csproj アプリケーション

2015-09-11 VisualStudio の .csproj でビルド構成に依存せずApp.config のConfiguration Transformを行おう C# PowerShell Visual Studio で C#など を書いていると、データベースの接続設定などアプリケーションで利用する値を外部ファイルに外出ししたくなることが多々あります。この時利用するのが アプリケーション構... 続きを読む

[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]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js | コリス

2015/08/05 42 users コリス Body Step プロトタイプ 波紋

スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ..... 続きを読む

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

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

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

nohupでバックグラウンドジョブ化したコマンドの終了時間を標準出力でファイルに書き出す | 俺的備忘録 〜なんかいろいろ〜

2015/07/26 36 users nohup bash 備忘録 time コマンド

コマンドの実行時間を計測する際によく使用されるtimeコマンドだが、これはbashの組み込みコマンドのため、外部ファイルへの書き出しができない。 こうなると、nohupなどでコマンドの実行時間をログに記録させて放置したくても、ファイルに書き出せないため放置することが難しくなる。 そんな時は、bashの組み込みコマンドとしてのtimeではなく、GNU timeを利用するといいだろう。 GNU tim... 続きを読む

[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でつくったページに、外部スクリプト・スタイルシ... 続きを読む