【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/04/15 138 users コリス CSS CSS flexbox レイアウト HTML

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 ?- Build 5 Responsi... 続きを読む

ナビゲーションバーのボタンのデザインで犯しやすい５つの間違い | UX MILK

2018/01/22 53 users UX Movement ユーザ UX MILK 著者 要素

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ナビゲーションバーは、サイトでもっとも大切な要素の１つです。ユーザーは必要なコンテンツを探し出すとき、ナビゲーションバーを頼ります。ナビゲーションバーのボタンを正しくデザインしなければ、ユーザーに無駄な作業をさせてしまうかもしれません。 間違ったデザインだと、ユーザーがナビゲーションフローのどこ... 続きを読む

2015年の最もよく使われているWebデザイントレンド | Flips Blog Web担の小技

2015/03/24 102 users Web担 Flips Blog Webデザイントレンド 小技

2015年のWebサイト、Web デザインにおいて、海外で最もよく使われているトレンドについて以下、意訳となります。 特にナビゲーションバーの柔軟な変更や、機能アイコンに関しては、本当によく見かけるようになりました。 是非チェックしてみてください。 Top Web Design Trends for 2015 ゴーストボタン 背景に大きな画像を利用されるケースが増えたという影響もありますね。 ライ... 続きを読む

モーダルを閉じるボタンのUIは右か左か | Reflection

2014/07/23 173 users モーダル Reflection iOS トリガー 2択

モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内... 続きを読む

この発想はなかった！開いたアプリごとに最適な"アシスト"を自分で作れる「アプリアシスト」が超イカス！！無料 | アンドロイドアプリならオクトバ

2014/07/04 56 users オクトバ アシスト 発想 アンドロイドアプリ スゴイ

ナビゲーションバーのホームボタンを上にスワイプするとGoogle Nowが起動しますよね。 ここをGoogle Nowの代わりにサブランチャーを仕込むアプリなどを以前紹介しました。でも今度の「アプリアシスト」はもっとスゴイ！ なんと現在開いているアプリごとにホームボタンスワイプで起動するアプリを設定することができるんです！ とにかくまずは便利な2つの設定を作ってみたのでご覧ください！ アプリに「オ... 続きを読む

iOS 7 エンジニア勉強会 @Yahoo - 2013/10/07

2013/10/07 83 users iOS 7 エンジニア勉強会 余白 鵜呑み Safari

Yahoo! 株式会社 2013/10/07 資料は後ほどシェア iOS 7 でアプリ開発はどう変わる (佐野さん) iOS 7 のデザイン原則 UI はコンテンツに従順 Safari が分かりやすい ナビゲーションバーが殆ど消える コンテンツを強調 分かりやすくスッキリしている 余白がたっぷり 平面的 アイコンよりもテキスト 奥行きがある iOS 7 = フラットを鵜呑みにしてはいけない UI ... 続きを読む

ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」:phpspot開発日誌

2012/11/07 51 users Wiltshire インタ Todd Motto つまみ パー

jBar Plugin, the jQuery call to action bar : Todd Motto: Front-End Web Developer & Graphic Designer in Wiltshire, UK. ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」。 初期化すれば、次のようなつまみが現れて、クリックするとバーが現れるというインタ... 続きを読む

iPhone/iPadアプリデザインで使っているツール | 云々（うんぬん）

2012/09/06 652 users iPhone うんぬん タブバー ステータスバー ツール

企画やらUIを考えるツール iPhone Idea Sheet（PDF） 三階ラボさんのアイデアシート（PDF）。 iPhoneの枠だけじゃなく、ナビゲーションバーやタブバー、ステータスバーが書きやすいように、うっすら線が入っていてGOOD。 印刷して何枚か持ち歩いている。何か作りたいなーどうかなーと思ったら、手書きでワーっと書く。このシート自体が美しいので、いいもの作れそうな気がしてくる。 紙な... 続きを読む

EZ-NET: iPhone や iPad の画面レイアウト : iPhone プログラミング

2011/12/29 138 users iPhone EZ-NET iPad 画面レイアウト その他

□ iPhone や iPad の画面レイアウト iPhone や iPad でコントロールをレイアウトしようと思ったときに、どこからどこまでが何ピクセルとかわからなくなることが多かったので、整理しておくことにしました。 基本的に、iPhone では横が 320px の縦が 480px で、iPad では横が 768px の縦が 1024px です。その他のナビゲーションバーやツールバーといったも... 続きを読む

スマフォ用サイトでよく使うエレメントが豊富に揃ってるフレームワーク -ChocolateChip-UI | コリス

2011/10/27 254 users コリス ChocolateChip-UI エレメント ボタン

スマートフォンなどのモバイル用サイトを簡単に制作できるようにするJavaScriptベースのフレームワークを紹介します。 先日リリースされたiOS5にも最適化されています。 ChocolateChip-UIで用意されているエレメント あらかじめ用意されているエレメントは数多くあります。 ツールバー ナビゲーションバー ボタン アイコン ナビゲーションリスト テーブルビューアー セレクションリスト ... 続きを読む

Chromeの拡張機能のアイコンを好きなアイコンに変える方法 : ライフハッカー［日本版］

2011/05/28 55 users Chrome ライフハッカー アイコン 拡張機能 日本版

Google , Google Chrome , Webツール , デザイン , フリーソフト , ブラウザ Chromeの拡張機能のアイコンを好きなアイコンに変える方法 2011.05.28 17:00 コメント数：[ 0 ] Check Tweet Chromeの拡張機能をインストールすると、右上のナビゲーションバーにクイックアクセス用のアイコンが表示されることがあります。これは便利でいいので... 続きを読む

Photoshop Vip » ウェブデザインに便利なPSD素材を無料ダウンロードできる5つの優良サイト

2011/03/04 157 users ウェブデザイン PSD素材 Photoshop Vip 無料

NewsHome > News > ウェブデザインに便利なPSD素材を無料ダウンロードできる5つの優良サイトウェブデザインに便利なPSD素材を無料ダウンロードできる5つの優良サイト2011年3月4日　　　　ウェブデザイン制作においてボタンやナビゲーションバー、バナーデザインは重要なデザインパーツです。しかしすべてのパーツをPhotoshopで制作するとなると時間もアイデアも必要となります。そんなと... 続きを読む

「Ajaxアプリでもナビゲーションバーで戻りたい!」を叶える、dsHistory登場 | エンタープライズ | マイコミジャーナル

2007/04/17 108 users Ajax エンタープライズ Ajaxアプリ Ajax機能 特定

Ajaxを活用して開発されたWebアプリケーションは、サーバとの通信をWebブラウザのページ読み込み処理とは異なる方法で(非同期で)行うため、基本的にWebブラウザのナビゲーションバーでは制御できない。つまり、Ajax機能を活用して再描画された内容は「戻る」ボタンでは戻れないということだ。 これは便利でもあり不便もである。特定の操作においては戻るボタンで戻れた方が扱いやすいこともある。Ajaxアプ... 続きを読む