SheetrockはPublic設定されているGoogleのスプレッドシートを照会、取得し、table要素として任意のWebサイトに表示出来るスクリプトです。jQueryに依存しています。スプレッドシートの内容は選びそうですが、単純なデータなら親和性ありそうですね。ライセンスはMITとの事です。 Sheetrock
![Googleスプレッドシートをtable要素としてWebサイトに埋め込むスクリプト・「Sheetrock」](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 1.はじめに 次のようなチェックボックスがあるとします。 そして、チェックボックスのチェックに連動してテキストフィールドを表示(または非表示)させるものとします。 このような制御を行いたい場合、次のようなjQueryを書けば実現できます(よりエレガントな書き方はあると思いますが)。 <script> $(function(){ $('input[type=checkbox]').click(function() { if ($(this).prop('checked')) { $('.bar').show(); } else { $('.bar').hide(); } }); }); </script> <div class="foo"> <input id="foo" type="c
About This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div. For browsers that don't support the HTML5 video tag, it just uses an image. Warning Don't abuse this code... Don't use it too often, too many video instances will slow down the browser. Please bear in mind bandwidth usage for both you, and your visitors
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も! Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時(前の記事)からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類! その中からデモで、9種類が楽しめます。 demo:
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
デモ:offsetTop このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。 ScrollUpBarの使い方 実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.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
Revealing.js Inspired from the Secret app text animation. Pure text There are no secrets that time does not reveal. Jean Racine Britannicus, Act 4, sc. 4 (1669) play Maintain styling It will be found an unjust and unwise jealousy to deprive a man of his natural liberty upon the supposition he may abuse it. George Washington play Support line breaks The tree of liberty must be refreshed from time t
Google Chromeで新しいタブを開いたときに空白ページを表示する方法を紹介します。 1.問題点 Google Chromeで新しいタブを開くと、Google検索画面と、その下に閲覧履歴のサムネイルが8個表示されます。 これを変更して、新しいタブを開いたときには空白ページを表示したいのですが、デフォルトでその設定が行えません。 2.新しいタブを開いたときに空白ページを表示する ここではChrome拡張「Empty New Tab Page」をインストールします。 「Empty New Tab Page」のページにアクセスして「無料」をクリック。 「追加」をクリック。 「「Empty New Tab Page」がChromeに追加されました」と表示されればインストール完了です。 これで新しいタブを開くと、次のように空白ページが表示されます。 新しいタブを開いた初回のみ、「この新しいタブ
国立情報学研究所が提供する台風情報「デジタル台風」と、ウェザーニュース会員が提供する各地の災害情報を地図上に写真とコメント付きで表示してくれる「減災リポート」とをGoogle Earthのマップ上に同時に表示させることで、台風の位置と周辺の被害状況とを同時に把握できるようになったのが「台風リアルタイム・ウォッチャー」です。 台風リアルタイム・ウォッチャー:台風情報と「減災リポート」のリアルタイム・マッシュアップ http://typhoon.mapping.jp/ 台風リアルタイム・ウォッチャー:台風情報と「減災リポート」のリアルタイム・マッシュアップ - Google ドキュメント https://docs.google.com/document/d/1gZNEm3v9dW56fmDV0qjNe1Ga3LcaghpcinvtAY_EC4U/ 台風リアルタイム・ウォッチャーを使用するにはG
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上:ユーザースタイル、下:半透明スタイル デモページ:オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
一つでも複数でも、PSDファイルをPNG画像にまとめて書き出すOS X用のフリーのアプリケーションを紹介します。 書き出し用としても便利ですが、Photoshopの無い環境でPSDファイルをチェックする時にも使えますね。 PSD to PNG - Automator Action 使い方は、非常に簡単。 ダウンロードしたファイルを解凍。 「PSD to PNG.app」にPSDファイルをドラッグ&ドロップ。 PSDファイルと同階層に「PNGフォルダ」が生成され、その中にPNG画像が書き出されます。 PSDはレイヤーで表示されているものが、PNGに書き出されます。 PSDファイルは一つでも、複数でも対応しています。
Firefox29でリロードボタン・停止ボタンの位置を移動させる方法を紹介します。 1.はじめに Firefox29になってレイアウトが変わりました。 それによりカスタマイズできる内容も変更されたようです。 Firefox29のリロードボタンは、アドレスバーの右側に表示されています(停止ボタンはリロード中に同じ位置に表示)。 Firefox29のリロードボタン Firefox28のリロードボタンもアドレスバーの右側に表示されています。 Firefox28のリロードボタン が、Firefox28までは「ツールバー」→「カスタマイズ」でリロードボタンを移動することができました。 Firefox28:「ツールバー」→「カスタマイズ」でボタンの移動が可能な状態 Firefox28:リロードボタン・停止ボタンを移動したところ が、Firefox29以前ではカスタマイズ画面を表示しても、リロード・停止
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く