大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Forms
RWD対応のグリッドレイアト向けフォームを作る為のCSSフレームワークのご紹介です。表題のとおり用途はある程度限定されますが、覚えておいて損は無さそうです。 フレームワークと言っていいかどうか分かりませんが本サイトにそう書いてありました。フォームの為のCSSフレームワークです。RWDへの対応はRespond.jsを併用することで実現しています。 動作デモが用意されていましたので以下でご覧下さい。デモでは全画面に実装、RWD対応にもなったモバイルファーストなフォームになっています。 Sample <div data-row-span="2"> <div data-field-span="1"> <label>Flat no. and bldg. name</label> <input type="text"> </div> <div data-field-span="1"> <label>R
最も短いコードで実装出来るイメージスライドショー - かちびと.net
Result jQuery //最初の画像以外を非表示にする $('.in img:gt(0)').hide(); //タイマー setInterval(function() { //フェードインとアウトを繰り返す $('.in :first-child').fadeOut().next('img').fadeIn().end().appendTo('.in'); }, 4500); css .in { position:relative; width:500px; } .in img { position:absolute; left:0; top:0; } html <div class="in"> <img src="01.jpg"> <img src="02.jpg"> <img src="03.jpg"> </div> Warning: include(/home/youhei0
ナビ付きスライドショー - jsdo.it - Share JavaScript, HTML5 and CSS
jQuery(function($){ $('div.slideimage').slide(); }); (function($){ $.fn.slide = function(options){ var defaults = { fadeTime: 1000, intervalTime: 3000, waitTime: 5000, window: true }; options = $.extend(defaults, options); return this.each(function(){ var current = 0; var interval = 0; var slides = new Array; var target = $(this).addClass('slideimage'); var navi = $('<ul>').addClass('slidenavi');
クロスフェードするスライドショー（ナビゲーションボタン付き） | nagachan.net
jQueryを使った、クロスフェードするスライドショーを自作してみました。 いろんなサイトでも見かけるかと思いますが、お勉強のために自作です。 ■作りたい仕様 一定時間で画像が切り替わるスライドショー クロスフェードのような処理をさせたい 指定した画像に直接切り替えられるボタンもつけたい 切り替えたい画像をリストに配置すれば、切り替えボタンは自動生成されます。 クロスフェードでなく、一旦画像を消してフェードインさせるのであればもっと簡単にできますね。 今の所、ナビボタンに画像が２桁になった処理を入れていないので、写真の数は９個までしか配置できませんw そのうち改良します・・・。 デモはこちら HTML <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javas
[JS]jQueryのプラグイン33+1選 -2012年8・9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
[CSS]CSS3アニメーションでブラー効果をかっこよく使ったナビゲーションを実装するチュートリアル
アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 Blur Menu with CSS3 Transitions [ad#ad-2] 7つのデモ 7つのデモの実装 7つのデモ デモは7種類あり、共通するアイデアはホバーしている時に他のアイテムをブラーでぼんやりとさせ、そのアイテム自体を強調することです。 デモページ 対応ブラウザは、Chrome, Safari, Firefox, Operaです。 IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。 7つのデモの実装 HTML メニューはすべてリスト要素で実装しており、固定幅を指定します。 <ul class="bmenu"> <li><a href="#">About</a></li> <li><a href="#
Nike Sustainability. Move to Zero
MOVE TO ZERO IS NIKE’S JOURNEY TOWARD ZERO CARBON AND ZERO WASTE, HELPING TO PROTECT THE FUTURE OF SPORT. We all share the responsibility for our playground—Planet Earth. That’s why we’re reimagining things top to bottom through sustainability and circularity. We’re focusing on carbon, waste, water, and chemistry, aiming to hit targets by 2025. Check out our Impact Report to see our progress.
UIWebView内のリンクをSafariで開く | iPhoneアプリ練習帳
UIWebView内に表示されたリンクをクリックした場合に、UIWebView内で表示する代わりに、Safariを起動して表示する方法を紹介します。 ソースコード例 Empty ApplicationにUIWebViewを設置し、その中に外部リンク(Yahoo.co.jpへのリンク）を表示する例。httpから始まるリンクは、UIView内で表示するのではなく、Safariを起動して表示する。webView.delegate = selfの部分で警告が表示されるので、インターフェースにUIWebViewDelegateを追加しておく。 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIW
Mobile Navigation Design & Tutorial - Web Designer Wall
One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I’m going to review some of the design solution and provide a quick tutorial
スマートフォンアプリやスマホサイトのUI設計をする際に参考になる記事
【スマートフォンのユーザビリティチェックリスト】 1.小さくし過ぎない、詰め込み過ぎない 2.バラつきを無くす 3.タップしたオブジェクトは反応させる 4.画面遷移アニメーションを設定する 5.画像の解像度はきちんと合わせる 6.実装側でもデザインする 7.ローディング中も画面操作できるようにする 8.真っ白なローディング画面を避ける 9.更新頻度の低いコンテンツはローカルで保持する 【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた http://masaki0720.tumblr.com/post/19192937336 【Android設計のポイント】 Android では画面上になるべくボタンをおかないAndroid 端末ボタンを効果的に使うAndroid には Notification、ウィジェットもある
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow
フラットUI
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
https://www.splashnology.com/article/hot-web-design-trends-parallax-scrolling-effects-in-100-examples/1263/
Loading...
Direction-Aware Hover Effect with CSS3 and jQuery
多様なtooltipが作れるjquery.ui.tooltip2を実装してみた。 - お前の血は何色だ!! 4
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI