趣味でたまに製麺をする。1キロの粉の内500グラムを使い、その次の機会にまた500グラム使うと、何故か粉がほんのすこーしだけ余るのだ。 製麺は計量が重要で、粉も水も塩も1グラム単位で計算している。その中でのちょっとだけ余る粉。計量が間違っているのか、もしかして、1キロの小麦粉として売られている粉は1キロでは、ない…？
1キログラムは何キログラムなのか
趣味でたまに製麺をする。1キロの粉の内500グラムを使い、その次の機会にまた500グラム使うと、何故か粉がほんのすこーしだけ余るのだ。 製麺は計量が重要で、粉も水も塩も1グラム単位で計算している。その中でのちょっとだけ余る粉。計量が間違っているのか、もしかして、1キロの小麦粉として売られている粉は1キロでは、ない…？
[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe
表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。 デモページ デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="assets/css/notifyme.css" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/notifyme.js"></scr
![[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe](https://cdn-ak-scissors.b.st-hatena.com/image/square/976bf32a2053071e29221414b5e97a2310fd7694/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014103101.png)
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加える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:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ：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
[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 まずは、動画をフルスクリー
地味だけど便利！Photoshopでカラーの明度のバリエーションを簡単に展開できる機能拡張 -Lighten / Darken Color
Lighten / Darken Color カラーの明度を変更するのはもちろんPhotoshopのカラーピッカーで調整することはできますが、いちいち手作業でやるのは面倒くさいもの。そんな時は、この機能拡張を入れるとショートカットで簡単にできます。 明度を10%の増減で展開 Lighten / Darken Colorのインストール インストールは簡単です。 下記ページの中程の「Downloaded here」からファイルをダウンロードします。 Lighten / Darken Color 「[KAM] Color Lighten-Darken Scripts.zip」を解凍します。 解凍した「Color Darken.jsx」と「Color Lighten.jsx」を下記のフォルダ内に移動します。 ファイルの格納先：Photoshop/Presets/Scripts/ Photoshop
[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI
tooltip ツールチップ Shadow UIの使い方 Step 1: 外部ファイル まずは、ベースとしてhead内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="/shadow-ui/assets/js/jquery.js"></script> <script src="/shadow-ui/js/shadow.js"></script> スタイルシートはベースとなるファイルとそれぞれ用のファイルが用意されています。 <link rel="stylesheet" href="/shadow-ui/assets/css/main.css"> <link rel="stylesheet" href="/shadow-ui/css/ui.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-dr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
