リストの横並び時に生まれる< li >の隙間を解決する5つの方法
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
何故、エンジニアはUIのセンスがないか。
何故、エンジニアはUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアはITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス
Pelfusion - All about technology
The moments after your phone gets wet are crucial. Follow these steps to improve your chances of saving your device. … Read more
怒涛のサイトナビゲーション総まとめ！事例、チュートリアル、参考サイト、僕の知る何もかもを紹介！ | バンクーバーのうぇぶ屋
レスポンシブデザイン、パララックススクローリング、そういったレイアウトに関する変化に伴い、サイト内を誘導するナビゲーションの種類も多様化してきていますね。 元々、縦、横、ドロップダウン、固定、メガメニュー等、サイトの構造によって様々なナビゲーションを提案してきたわけですが、最近サイトのレイアウトを考える時、話に上がるナビゲーションの呼び方とか、種類とか、大量多量過ぎてもう分け分けらなくなってきたので、ちょっと僕自身の復習と、参考サイトやらチュートリアルやらないかを全部まとめてしまいたかったので、僕と、僕の周りのデザイナーさん達の役にたてるよう、今回記事にさせてもらうことにしました！ 実際にWEB制作に携わる中で、聞いたことのある物を分類させて頂くので、僕の勝手な分け方になってしまい申し訳ない限りなんですが、何かナビゲーションやレイアウトに悩んだ時にでも参考か何かにしていただければ嬉しい限り
【訃報】 ヴィダル・サスーン死去 : 暇人＼(^o^)／速報
【訃報】 ヴィダル・サスーン死去 Tweet 1： ポルックス(埼玉県)：2012/05/10(木) 07:00:09.70 ID:ufS9IRxPP ヴィダル・サスーン氏死去 世界的ヘアスタイリスト 【ロサンゼルス共同】 世界的に活躍したヘアスタイリスト、ヴィダル・サスーン氏が９日、米ロサンゼルスの自宅で死去した。８４歳だった。 地元警察は「自然死」としている。ＡＰ通信などが伝えた。 生まれ育ったロンドンで１９５４年に美容院を開業。 ６０年代にドライヤーやスプレーを使った面倒な手入れを必要としない、 当時としては革新的なショートヘアなどのスタイルを次々と発表。 女性の社会進出が進みつつあったことも背景に大流行を生み、美容界に大きな影響を与えた。 氏名を冠したシャンプーなどの美容製品や理容器具が、世界各国で販売されている。 http://www.nnn.co.jp/knews/120510
HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.
Now offered in: English Deutsch Português Français Italiano Nederlands Srpski Română По-русски עברית 日本語 HTML5 ★ Boilerplate A rock-solid default for HTML5 awesome. HTML5 Boilerplateはページロード時間も早く、強固でかつ将来性のある、プロフェッショナルな連中のための基本HTML/CSS/JSテンプレート 2年以上に渡る開発の中から生み出されたベストの中のベストプラクティスがここにはあるクロスブラウザのノーマライズ、パフォーマンス最適化、AjaxとFlashのcrossdomainのおまけ付きApache用 .htaccess 設定ファイルはキャッシュのルールがすでに書かれている上、HTML5ビデオ、@font-f
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
GoogleAnalyticsの結果をjQueryMobileでモバイル端末で表示するサンプル:phpspot開発日誌
Google analytics for mobile using jQuery mobile and php | jqueryload.com GoogleAnalyticsの結果をjQueryMobileでモバイル端末で表示するサンプル iPhoneだとFlashが見れないので、Analyticsにアクセスしてもグラフが見えませんね。 これをPHPとjQueryMobileを使ってグラフや数値を簡単に表示するデモです。実際にそのまま使ってもいいでしょうし、カスタマイズして自分用にしてみてもよさそう プログラムを解析しても勉強になりそうです 関連エントリ jQueryMobileよりも軽くて使いやすそうなモバイルサイト作成フレームワーク「jQ.Mobi」 スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン Android風の日付ピッカー実装用jQueryM
Photoshop CS6の新機能色々！とりあえず便利そうな機能だけ実際に使ってみた！ | バンクーバーのうぇぶ屋
まぁ、散々Adobe様より『こんな機能を実装します！』的な告知は多かったので、今更と思う方も多いかもしれませんが、やっぱ自分で使ってこうやって記事にしてみるのが一番覚えるのは早い！こればっかりは自分の体験から実証済みなので、さっさと記事にしてしまうことにしました！ とりあえず、Adobe Creative Cloudで購入したのが一昨日！そこから水と食料だけ常備し、あれやこれやといろんな動画やサイトを見ては試してみて、とりあえず「この辺は明日からでも使えそうだー！」ってのを選んでみたので、さっさと記事にしてみようと思います！ もちろん全部じゃありませんが、個人的にすぐに仕事で使える機能周りで（そうでもないのも交じってますが）とりあえず良さげな物を中心にご紹介させて頂きます！ インターフェイスが黒い！いつもの白いやつに変えたい！ Photoshop CS6 Tip: Press Shift+
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...