使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．円形 ２．タブ ３．ナビゲーション ４．アコーディオン ウィンドウ ５．モーダルウィンドウ ６．フローティングウィンドウ ７．Dialog(ダイアログ) ８．フォーム＋バリデーション ボタン ９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
lightbox系プラグイン「Shadowbox.js」が便利でかっこいい | スターフィールド株式会社
lightboxといえば、結構前から現在でもサイトでよく使われているjavascriptプラグインです。 似たようなものがいくつかあり、それらをまとめてモーダルボックスやlightboxといったりしますが、 その中で、シンプルで、使いやすくて、ちょっとかっこいいプラグインをご紹介します。 その名も「Shadowbox.js」です！ 特徴としては、 ・画像の表示、複数画像のスライド ・外部サイト、共有動画サイトの表示 ・インラインコンテンツ（ページ内のhtml要素）の表示 ・flash(swf)や動画ファイル(SWF,FLV,WMP,QuickTime)の表示 ができるということです。 動画やインラインのものを表示できるものってそう多くはないのではないかなぁと思います。 （他のプラグインを詳しく見てはないのではっきりとはわかりませんが・・・） DEMOを作成しているので、ぜ
jQueryでparseInt()を使ってCSSプロパティの値を取得する｜BLACKFLAG
以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して jQueryでCSSプロパティの値を取得する方法を紹介しましたが、 「parseInt()」を使って同様にCSSプロパティ値を取得する方法も 結構必要になったりすることがあるので、メモ書きとして紹介してみます。 前回のサンプルと同じ内容でのサンプルで動作させてみると。。。 ＜div id=”box”＞とID名が付けられたボックス要素に CSSで幅「width」と高さ「height」を指定。 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示するサンプルの場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width: 300px; height: 100px; } ◆SCRIPT <script type="text/ja
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
アコーディオンまとめ8選！ | 株式会社LIG
(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow
余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demo このスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
