[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css
デモ：ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
円や多角形をランダムに配置する背景をSVGで作る その2
「円や多角形をランダムに配置する背景をSVGで作る」の続きです。 もうちょっと使いやすくなるように練習を兼ねてやってみました。 GPBG.js サンプル 1 GPBG.js サンプル 2 GPBG.js サンプル 3 GPBG.jsのJavaScriptファイル 前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。 一番簡単に使うと、こんな感じになります。 <script type="text/javascript" src="gpbg.js"></script> <script type="text/javascript" src="script.js"></script> </body>// script.js の中身 (function () { if (wi
[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ
リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: position:relative 実装: display:table 実装: display:inline-flex デモ デモは上から display:inline-block, position:relative, display:table, display:inline-flexで、ナビゲーションを水平の真ん中に配置しています。 デモページ：幅780pxで表示 実装: display:inl
【Google＋の投稿もできる！】Twitter,Facebook,Google＋の投稿をブログなどのWebサイトに貼り付ける方法｜今村だけがよくわかるブログ
【Google＋の投稿もできる！】Twitter,Facebook,Google＋の投稿をブログなどのWebサイトに貼り付ける方法 2016/06/17追記SocialDittoはいつの間にか閉鎖されたみたいです。残念・・・。公開当時の情報を以下に残しています。 「Twitter,Facebook,Goole+で投稿した内容を『そのまま』ブログなどWebサイトに貼り付けたい！」と思ったことはありませんか。私は最近特に、Google+で投稿した内容をブログに貼り付けたくなってきました。それで、いろいろ調べると、やり方がありましたのでご紹介します。 「おー、ちょっと興味あるかも」といった方は、是非ともご参考ください。 海外でそんなサービスがありましたやり方を調べていたんですが、海外に「SocialDitto」というサイトがありますここを利用します。使い方は難しくないです。に説明すると、下の画像
背景、全画面で動画を再生。BigVideo.js #jQuery / Maka-Veli .com
いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです（記事は一応チュートリアルで全文英語です） jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });
HTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBG
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。 動画を背景に、というスクリプト。 動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.videoBG.js"></script>コアとプラグインを読み込み。 $('.foo').videoBG({ position:"fi
ドラッグ&ドロップによる再配置も可能な、タイル状に要素を配置するjQueryプラグイン・jQuery.Shapeshift
要素をタイル状に配置してくれる、というjQueryプラグイン。特に目新しいものでは無いですけど。Pinterestライクなレイアウトを実装出来る、と言ったほうが伝わりやすいかも知れませんね。 Pinterestライクなレイアウトを実装出来て且つ、並べた要素をD&Dで移動、再配列してくれる、というもの。使うシーンは限られそうですけど面白いですね。 ドラッグ&ドロップで配列してる要素を自動で再配置してくれます。上図は画像になっていますが、ボックス要素に対応できるので応用が利きそうです。touch-punchを使ってタッチデバイスに対応させることも出来るようです。 ただ、再配置後の記憶をしないとなのでcookieやlocalStorage等を併用する必要があります。 コード<script type="text/JavaScript" src="http://ajax.googleapis.com
[JS]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja
デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.baraja.js"></script> HTML 各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。 <ul id="baraja-el" cl
レスポンシブ デザイン用のレイアウトやナビゲーションなどのパターンのまとめ -This Is Responsive
レスポンシブ デザインのレイアウト、ナビゲーション、画像、フォームのパターンをはじめ、有益なリソースなどをコレクションしているサイトを紹介します。 This Is Responsive レスポンシブ デザインのパターン レスポンシブ デザインのリソースとニュース レスポンシブ デザインのパターン まずは、レイアウトやナビゲーションなど、レスポンシブ デザイン用のパターンから。 Responsive Patterns 下記にいくつかピックアップしました。
[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。 パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。 <div id="container"> <div>パネル</div> <div>パネル</div> <div>パネル</div
[CSS] floatで一列にしたリスト等を中央配置にする方法
floatかけて一列に並べると、それを枠の中央に置きたい時って時々ありますよね？（ブログのページをめくるときのナビゲーションとか） そんなときは、最近私的にはやりの ”position” と ”ネガティブマージン” ですっきり解決です。 下記のようなリストで作ったナビゲーションがあったとします。 <ul class="pageNavi"> <li>Page-1-</li> <li>Page-2-</li> <li>Page-3-</li> <li>Page-4-</li> </ul> CSSにこれを付け加えちゃいましょう。 .pageNavi{ position:relative; overflow:hidden; } .pageNavi ul{ position: relative; left: 50%; float: left; } .pageNavi ul li { positio
円や多角形をランダムに配置する背景をSVGで作る
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
快適にさくさく作れる、ワイヤーフレーム・モックアップがブラウザ上で作成できるHTML5アプリ -Moqups
Moqupsの特徴 Moqupsの使い方 Moqupsの特徴 ドラッグ&ドロップでエレメントを簡単に配置できます。 約60種類のUIエレメントを用意。 PDF, PNGへの書き出し。 HTTPS対応。 自動保存。 スマートガイド。 カスタマイズ可能なグリッド。 オブジェクトはグリッドにスナップ。 オブジェクトのロックとグループ化。 右クリックで、Undo/Redo/Cut/Copy/Pasteなど。 上記の操作はキーボードでも可。 タグ付けと検索機能 画像のアップロード メールによる共有。 Moqupsの使い方 Moqupsを使うにはとりあえず登録は必要ありませんが、機能が制限されます。 機能の制限はたとえば、書き出しがSVGのみになります。
Jason English
Hiker, photographer and software engineer documenting his travels around the world.
[JS]ノート風のレイアウトもOK！画像をベースラインに揃えて配置するだけのシンプルなスクリプト -Baseline.js
Baseline.js適用後 Baseline.jsの使い方 使い方は2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.baseline.js"></script> Step 2: JavaScript 適用する範囲をjQeuryのセレクタで指定し、ペースラインをpxで指定します。 $('img').baseline(24); //全てのimg要素に24pxのベースライン $('.content img').baseline(30); //.content内のimg要素に30pxのベースライン レスポンシブデザインにも対応しており、ブレイクポイントごとにベー
画面サイズに応じて画像を差し替える軽量jQueryプラグイン・jQuery Picture
スマフォやタブレットなどで閲覧した 際に表示する画像を差し替える軽量な jQueryのプラグイン・jQuery Picture のご紹介。レスポンシブWebデザイン でよく問題視される画像のサイズの件 に対応するライブラリです。 設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。 以下サンプルです。手抜きですみません。 jsfiddleでフレームを操作して動作確認出来ます。 Sample コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery-picture-min.js"></script>
Messi, simple jQuery message plugin
- A simple message plugin for jQuery - by @marcosesperon About Messi is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user. Display text, html content, images and ajax requests with 5KB code. Check in GitHub: https://github.com/marcosesperon/Messi Usagesh
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
[CSS]スマートフォンで表示した際、サイドバーの広告を効果的な配置にするテクニック
当サイトのようにサイドバーに広告を掲載している人には朗報のテクニックを紹介します。 下記のようなサイドバーをもったレイアウトをスマートフォンなどの小さいサイズで表示する際、サイドバーのレイアウトをどのようにしますか？ 通常（デスクトップ）時のレイアウト サイドバーを全部、下に移動しますか？ [ad#ad-2] サイドバーを全部下にしてしまうと残念な感じになるので、サイドバーの各広告をコンテンツの間に配置するテクニックを紹介します。 Content Folding スマートフォンなどのレイアウト [ad#ad-2] デモ 実装 デモ このCSSのテクニックはCSS3 Regionsを使用しているため、Chrome16+, Safari5.2でご覧ください。 IE10もおそらく対応しています。 デモページ：幅800pxで表示 実装 HTML HTML5を使っての実装です。 ポイントとなるのは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
This domain was registered by Youdot.io