よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/02/18 748 users UIコンポーネント スニペット CSS Layout コリス

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む

よこ並びのCSS。

2017/02/15 569 users CSS レスポ タブ 昨今 順番

ナビゲーションやタブやアイテムリストなど、「よこ並び」にレイアウトするためのCSSについて、お馴染みの方法から最近の方法まで、順番に見ていきます。スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポ... 続きを読む

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス

2016/10/20 547 users 階層構造 レスポンシブ対応 ハンバーガーメニュー 去年 コリス

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む

UIデザインにおけるナビゲーションのデザインパターンまとめ | sogitani.baigie.blog

2014/08/14 754 users 階層 sogitani.baigie.blog 側面 形状

前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が... 続きを読む

UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | sogitani.baigie.blog

2014/07/17 861 users UIデザイナー sogitani.baigie.blog

WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユ... 続きを読む

累計22種！UIが優れたiPhoneアプリの部分デザイン（ナビゲーション/メニュー編） | Find Job ! Startup

2013/10/20 584 users Startup LAUNCHPAD iPhoneアプリ 目次

いろんなUIを持ったアプリが並ぶiPhone App。 今回はその中から、特にUIの優れた「部分デザイン」を紹介します。アプリを開いた時、真っ先に目に入るナビゲーション/メニュー編です。 目次 今回はこんなナビゲーションを取り上げます。 スプリングボード スプリングボードはiOSやAndroidなどのOS・画面解像度にほとんど依存しないのが特徴です。ローンチパッド（LaunchPad）と呼ばれるこ... 続きを読む

[JS]jQueryのプラグイン100選 -2012年総集編 | コリス

2012/12/16 707 users jQuery コリス レスポンシブ スライダー レイアウト

2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関... 続きを読む

WEBデザインを制作する際の参考にしているWEBデザインまとめサイトをまとめました【2012年版】 | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/05/10 1018 users Webデザインクリップ Web制作 参考 まとめサイト 見出し

以前、「HTML5でサイトをつくろう」のブログでwebデザインをする上で普段、参考にしているまとめサイトをご紹介させていただいたのですが、見れなくなってしまったサイトなどもありましたので、今回2012年度版として優良なwebサイトを紹介しているWebデザインまとめサイト(国内・海外サイト)や見出しやナビゲーション・ボタン・バナー・制作に役立つサイトを追加分も含めてまとめました。 国内編 strai... 続きを読む

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel

2012/02/21 649 users jQuery webOpixel NAV clearfix

グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HO... 続きを読む

商用利用も無料、ウェブ用のエレメント・ページレイアウト・アイコンのPSD素材の配布サイト -design deck | コリス

2011/05/05 621 users エレメント コリス 商用 ウェブデザイン用 Free PSD

ナビゲーション、ボタンなどのエレメントをはじめ、ページレイアウト、アイコンなど、商用でも無料で利用できるウェブデザイン用のPSD素材を配布しているサイトを紹介します。 design deck | Free PSD' [...] 続きを読む

中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス | コリス

2011/04/12 590 users 中枢 ブランディング コリス ゴール マーケティング

下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを... 続きを読む

9search | 必要なときに、必要なフリー素材を。

2011/04/02 1947 users フリー素材 サンセリフ アコーディオン スライダー テクスチャ

商用利用可、クレジット表記・バックリンク不要のフリー素材を紹介するサイト。webエレメント (27)アコーディオン (2)カレンダー (2)スライダー (1)ツールチップ (2)ナビゲーション (6)フォーム (5)ボタン (13)アイコン (15)テクスチャ (4)パターン (3)フォント (3)サンセリフ (2)セリフ (1)ブラシ (6)ベクター素材 (1)リボン (5) 続きを読む

[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル | コリス

2011/03/27 655 users ローディング グリッド jQuery メインメニュー コリス

まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。デモページ実装HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。HTML：背景背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 続きを読む

サイト作成に欠かせないサイトやサービスなどを20個｜Webpark

2011/03/09 1081 users フッター Webpark ギャラリー あん たくさん

私がサイトを作る際によくお世話になっているサイトやサービスを紹介します。フリーソフトも2つあります。ご参考になればうれしいです。あんじょうできてはるWebデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。MephoBoxヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。ロゴストック日本を中心にかなり... 続きを読む

ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ - かちびと.net

2011/01/25 660 users ヘッダー フッター ブブンデザインアーカイブ net 唯一

いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビ... 続きを読む

フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ - かちびと.net

2010/02/17 548 users フッター 備忘録 ヘッダー いとこ インパクト

ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザイン ユーザーにインパクトを与える... 続きを読む