[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
[JS]複数のエレメントをスクロールしても指定した場所に留まらせるスクリプト -ハチ公
デモページ：一番下までスクロール 「Hachi, stay!」ボタンをクリックすると、復活します。 ハチ公の使い方 実装は非常に簡単で、複数の要素にハチ公を適用することもできます。 Step 1: 外部ファイル 「jqeury.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hachiko.1.0.0.min.js"></script> Step 2: HTML HTMLは通常通りに実装し、ハチ公を適用するエレメントがスクリプトで指定できるようにidなどを付与します。 例：id=sticky <div id="sticky">Click me to see how the state i
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
全部、商用も無料！高級感のある細字のフリーフォントのまとめ
個人でも商用でも無料で利用できる、高級感のある美しい細字のフリーフォントを紹介します。 dosis 個人・商用利用無料。 Quattrocento Sans 個人・商用利用無料。 Dekar 個人・商
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
レスポンシブ デザイン用のレイアウトやナビゲーションなどのパターンのまとめ -This Is Responsive
レスポンシブ デザインのレイアウト、ナビゲーション、画像、フォームのパターンをはじめ、有益なリソースなどをコレクションしているサイトを紹介します。 This Is Responsive レスポンシブ デザインのパターン レスポンシブ デザインのリソースとニュース レスポンシブ デザインのパターン まずは、レイアウトやナビゲーションなど、レスポンシブ デザイン用のパターンから。 Responsive Patterns 下記にいくつかピックアップしました。
1ページで構成されたレスポンシブ対応の素敵なWordPressのテーマファイル -OnePager
デモページ：幅480pxで表示 OnePagerの特徴 WordPressのテーマファイル「OnePager」は、OnePager HTML TemplateをWordPress用に最適化したもので、シンプルで美しいデザインでフレキシビリティにも優れています。 シングルページのレスポンシブレイアウト。 使いやすいテーマのオプション。 3つのスキンも用意。 イメージスライダーを組み込み済み。 コンタクトフォームも組み込み済み。 アイコンフォント・Webフォントも用意。 利用にあたっては個人でも商用でも無料、とのことです。 詳しくは「license」ページをご覧ください。 OnePagerのインストール ページ下部の「Download Source」からファイルをダウンロードし解凍後、WordPressの「themes」フォルダ内にアップロードしてください。あとは、管理画面からテーマファイルを
美しいバランスを生み出す黄金比をウェブページのレイアウトに使ってみたい人に役立つ -The Golden Grid
黄金比（1:1.6180）をベースに作成されたグリッドを使った、ウェブページのレイアウトに役立つテンプレートとツールを紹介します。 The Golden Grid [ad#ad-2] The Golden Gridの仕組み The Golden Gridのセット内容 The Golden Gridの仕組み 「The Golden Grid」は960 Grid Systemに水平方向のガイドを加えたもので、グリッドを構成するカラムと溝を黄金比ベースにしたものです。 黄金比については以前の記事で少し取り上げました。 黄金比をサイトのデザインに取り入れる簡単な3つの方法 「The Golden Grid」は長方形の幅と高さ（a/b）が黄金比（1.6180）をベースに構成されており、マージンの横と縦（x/y）も黄金比をベースにしています。
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。
[JS]ウェブページのUIエレメントにちょっとだけ便利な機能を加えるスクリプト -minjs
フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
商用無料・クレジット不要、94種全てオリジナルで写真撮影した『ぼけ』のテクスチャ素材
bokeh15.jpg 素材の利用にあたっては個人でも商用でも無料で、クレジットの記載も不要、とのことです。 ぼけの写真を撮影したのはJill Wellingtonで、彼女の他の作品はギャラリーサイトやブログで見ることができます。 Jill Wellington Photography Jill Wellington Blog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2012年版、漢字も揃っている日本語のフリーフォントのまとめ
Helvetica, Frutiger, Futuraなど、見出しと本文に使用するフォントで最も人気の高い組み合わせのまとめ
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
レトロちっくなデザインがかわいいフリーの日本語・英語フォントのまとめ