in-view.js - DOMの表示/非表示になったタイミングでイベント実行 MOONGIFT
Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'
経産省が無料の写真素材を配布中?!美しい日本を伝える観光促進サイト Photo METI
また観光情報のデータベース「観光予報プラットフォーム」と連携し、観光地の基礎情報、混雑情報や、外国人向けのサービス情報なども提供中。今後は、ユーザーの写真投稿機能なども追加予定とのことで、今後ますます楽しみな国産フォトストックサイトのひとつと言えるでしょう。 宮城県 気仙沼港 内湾 Miyagi Inner Bay, Kesennuma Port, METI, CC BY 4.0 International 福島県 さざえ堂 Fukushima Sazae-do Hall, METI, CC BY 4.0 International 福島県 国宝 白水阿弥陀堂 Fukushima Shiramizu Amida-do Hall (National Treasure), METI, CC BY 4.0 International 沖縄県 名蔵湾 Okinawa Nagura Bay, MET
TextDiff class - PHP製の差分ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマーであれば誰もがDiff（差分）表示のお世話になっているはずです。しかし多くの場合、差分表示はバージョン管理と密接な関係にあります。差分表示を行うためにバージョン管理に登録するなんてこともあります。 もっと手軽に差分表示を使いたいと思うならばTextDiff classを使ってみましょう。PHP製、Webベースで使える差分表示ライブラリです。 TextDiff classの使い方 TextDiff classのデモです。 日本語で試したところです。日本語は分かち書きも行われているとのことです。 PHPでレスポンスを受け取れます。これらを解析することで差分表示機能を自分のシステムに組み込めます。 英語の場合。単語単位で表示されています。 TextDiff classはシンプ
ターミナルに好きな画像を表示しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
アニメ「NEW GAME」良いですね。青葉ちゃんかわいい！ TKです。 今月もブログがんばるぞいっ⭐︎ さて、CLI使ってますか？ CLIになれるとターミナルに引きこもりたくなりますよね？ Vimなどを使いコーディングをしていると、画像を確認をするたびにわざわざFinderを開いて。。。という作業のためにターミナルから離れるのが億劫になってしまいます。 もしあなたがiTerm2を使っているのであれば、ターミナル上に画像を表示することが可能なんです！ imgcat imgcatはcatコマンドの画像版、つまり画像の内容を表示するコマンドです。 導入方法 下記コマンド実行後、パスが通っている場所へ移動させるだけです。 $ curl -O 'https://raw.githubusercontent.com/gnachman/iTerm2/master/tests/imgcat' $ chmod
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
image-diff - 画像の差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であれば差分表示に普段からお世話になっているでしょう。コードのどこを直したのか、どこが削除されたのかなどはDiffを使わなかったら目で探すことになってとても大変です。そして、それはテキストだけではありません。 今回紹介するオープンソース・ソフトウェアはimage-diff、画像で差分表示を行ってくれるライブラリです。 image-diffの使い方 一つ目の画像です。 二つ目の画像です。 差分を取ると、このような画像が生成されます。 image-diffは二つの画像と、その差分となる画像の3つの引数で実行されます。プログラムの中に組み込むこともできます。異なる部分が赤く表示されるので、どこが変わっているのかは一目瞭然でしょう。デザイナーの方などは必須のツールになるのではないでし
ExcelCompare - Excelファイルの差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オフィスでの仕事に徹底的に使われているのがExcelです。職人たちの手にかかれば、表計算のみならずあらゆる場面においてExcelが利用されます。メールでも送られ、修正されて、コピーして修正して…と多くの人たちに使われています。 その結果、多くのコピーとどれが最新で何が違うのか分からないExcelファイルに溢れかえります。そこで使ってみたいのがExcelCompareです。 ExcelCompareの使い方 ExcelCompareは2つのExcelファイルを指定して差分を抽出します。 $ excel_cmp spreadsheet.xlsx spreadsheet-2.xlsx DIFF Cell at Sheet1!B2 => '2016年6月26日' v/s '2016年7月2
ウェブページにPDFを直接表示する方法
ウェブページにPDFを直接表示する方法を紹介します。 １．はじめに PDFをブラウザで表示するには、単純にPDFファイルのURLを記述すればOKです。 ウェブページにそのURLをリンクとして記述すれば、ウェブページからの閲覧も可能です。 が、PDFファイルを直接ウェブページに表示したいこともあると思いますが、その方法が分かりません。 ということで、ウェブページにPDFを直接表示する方法を紹介します。 ２．ウェブページにPDFを直接表示する ウェブページにPDFを直接表示するには、PDF.jsを利用します。 PDF.jsのページにアクセスして「Download」をクリック。 ダウンロードした「pdfjs-1.4.20-dist.zip（2016年7月時点のバージョン）」を展開します。 展開した中にあるbuildフォルダとwebフォルダをすべてアップロードします。 そしてHTML（index.
Excelのファイル名をセルに表示する方法
Excelのファイル名をセルに表示する方法を紹介します。 １．はじめに Excelのファイル名をセルに表示したいことがあると思います。 たとえばファイルに日付（YYYYMMDD）を使って、その日付をセルに表示する場合などです。 ということで、Excelのファイル名をセルに表示する方法を紹介します。 ここではExcelのファイル名を「20160707.xlsx」とします。 ２．ファイル名をセルに表示する 上記のファイル名（拡張子なし）をセルに表示するには、表示させたいセルに次の式を設定します。 =MID(CELL("filename"),SEARCH("[",CELL("filename"))+1,8) これでセルに「20160707」が表示されます。 ３．解説 各関数の解説です。 CELLは、セルの書式・位置・または内容に関する情報を返却する関数です。パラメータに"filename"を指定
jQueryでファイル選択時にプレビュー表示する方法
jQueryでファイル選択時にプレビュー表示する方法を紹介します。 １．はじめに フォームのファイル選択で画像を選択したときに画像のプレビューを表示したい場合があると思います。 ということで、jQueryを使って画像をプレビュー表示する方法を紹介します。 ２．ファイル選択時にプレビュー表示する まず、下記のファイル選択フォームを用意します。 <form> <input type="file" id="file" /> </form> <div id="result"></div> そして次のjQueryを追加します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function(){ $('#file').change(function(){ $('img').remove()
緯度経度を指定したテキストにマウスを乗せるとGoogleMapも動くようにする
Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery/* CSS-Tricks Example by Chris Coyier http://css-tricks.com */ $(function() { //Googlemapのセッティング var koukyo = new google.maps.LatLng(35.685175, 139.7528), pointToMoveTo, first = true, curMarker = new google.maps.Marker({}), $el; var myOptions = { zoom: 15, center: koukyo, mapTypeId: google.maps.MapT
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
Label.css - 画像の上にラベルを自在に配置 MOONGIFT
Webサイトを作っていて画像はよく使われます。さらに画像にはキャプションとして説明をつけてあげることでより分かりやすいものになります。説明がない画像は一見すると何のことか分からない場合もあります。 そこで使えるのがLabel.cssです。単に画像の下に説明をつけるだけでないキャプションの使い方ができるようになります。 Label.cssの使い方 一例です。縦、横ともに中央寄せ。 左下への配置。 右上。 中央の右寄せ。 さらに表示の仕方を変更できます。分かりづらいですがフロートで表示しています。 写真の上にキャプションを重ねることで、視点の移動が少なくなり、より訴求できるようになります。その場所も写真によって効果的な配置が考えられるでしょう。ブログやメディアサイトで積極的に使っていきたいソフトウェアです。 Label.cssはCSS3製のオープンソース・ソフトウェア（MIT License）
Responsible.js - スマートフォン向けにフルサイズ表示をシミュレート MOONGIFT
レスポンシブWebデザインは訪れたブラウザのウィンドウ幅によって見せるコンテンツを切り替えます。そのため、PCのブラウザであっても画面幅を縮めればスマートフォン用の見栄えをチェックすることができます。 しかし時によってはスマートフォンであってもPCブラウザ向けの表示でブラウジングしたい時があるはずです。そんな時に使えるのがResponsible.jsです。 Responsible.jsの使い方 まずは最初の表示。スマートフォンに最適化されています。 Toggle Desktopをクリックすると、フルサイズのブラウザ向け表示に切り替わります。 別なボタンを押せば、いつでもスマートフォン向けの表示に戻せるようになっています。スマートフォン向けとして情報を大幅に削ってしまっている場合、こうした表示切り替えは便利かも知れません。 iPhoneでも類似の機能がありますが、こちらは画面の再読み込みが不
スマホ・タブレットをはじめ、27インチの大モニタまで！ページの見え方をさくっと確認できるレスポンシブ用の便利ツール -Responsive View
スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方をさくっと確認できる便利なオンラインサービスを紹介します。 デバイスごとのモックアップにも使えるレベルですよ！ Responsive View 使い方は簡単、登録など面倒なことも一切不要です。 ページにアクセスし、「Enter your URL」に表示したいページのURLを入力します。 ※「https://」には対応していません（2016年2月現在）。
markdiff - MarkdownをHTML展開して差分表示
Markdownを頻繁に使っていると、つい間違った更新も発生してしまいます。そんな時に役立つのがバージョン管理システムですが、Markdownファイル同士の差分は単なるテキストファイルの比較以上のものではありません。 せっかくここまで広く使われているのですから、差分ももっと適した表示があるはずです。そこで使ってみたいのがmarkdiffです。 markdiffの使い方 markdiffはHTML上で使うようにもなっています。 このようにHTMLが出力されるので、スタイルシートで色分けしてあげればOKです。Aタグのhrefが違う場合はちょっと表示が確認しづらいですが、Markdownをそのまま比較するよりも分かりやすいのではないでしょうか。 markdiffはRuby製のオープンソース・ソフトウェア（MIT License）です。 r7kamura/markdiff
ResponsifyJS - 画像の表示をレスポンシブに変化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。 そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは一味違った演出が見ものです。 ResponsifyJSの使い方 ResponsifyJSを使った例です。これは普通の表示です。 画面幅を変えました。写真は小さくなりましたが、メインとおぼしき部分の大きさはほとんど変わっていません。 実際にブラウザのウィンドウを動かしてみると、画面幅に応じて画像の内容が若干動いているのが分かるはずです。 ResponsifyJSは画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Googleスプレッドシートを見やすく整形して任意のWebサイトに表示出来る・「Awesome-Table」
CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」