Progress Button Stylesfill horizontal Submit fill vertical Submit shrink horizontal Submit shrink vertical Submit rotate-angle-bottom perspective Submit rotate-angle-top perspective Submit rotate-angle-left perspective Submit rotate-angle-right perspective Submit
１ページで完結！シングルページ・デザインのWebサイトで使われている特徴やテクニックのまとめ｜Tips*Blog｜株式会社コプロシステム
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 1/9以来、かなり久しぶりになってしまいました今回の記事は、「シングルページ・デザイン」をテーマにしたまとめです。 「シングルページ・デザイン」とは、Webサイトを閲覧する時に、ページを遷移して閲覧する従来のスタイルではなく、1ページで完結（または、ほぼ完結）しているデザインスタイルのことです。 スマートフォンやタブレットが普及してきた現在ならではの手法なのではないでしょうか。 ここ2～3年、海外の先進的なデザインを取り入れているWebサイトなどからこのデザインスタイルが増え始め、私がトレンドとしてすごく実感したのは昨年下半期くらいからでした。 昨年下半期に、日本国内で新規に立ち上がるWebサービスを見ていると、TOPページのレイアウトを「シングルページ・デザイン」にしているサイトの割合がかなり高い印象だったのです
Avoid the Pains of Pagination
Everyone has scrolled to the bottom of a web page before and seen that row of numbers. That row of numbers is a website’s pagination. Pagination is a user interface pattern that divides content into separate pages. It’s important to have on your site to prevent your pages from becoming too long and overwhelming. The way paginations are designed today are painful for users to use. It’s time to turn
UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無い
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
Script.aculo.usで実現できる、さまざまな視覚効果
はじめに 先に「Script.aculo.usで、ビジュアルなWebページを！」で、Ajaxを利用した各種のGUIコンポーネントについて説明をしました。今回は、Script.aculo.usのもう1つの柱である「視覚効果」について説明しましょう。 視覚効果は、特定の要素に対し、さまざまな表示の変化を与えるものです。例えば、消したり表示したり、動かしたり、スタイルを変えたり……。Script.aculo.usの視覚効果は、それらの経過時間や開始・終了時の状態などを細かに設定することができます。 実際にサンプルをいくつか試してみれば、「あれ？ この効果、どこかのサイトで見たことあるぞ？」と思うものがいくつも見つかることでしょう。Script.aculo.usの視覚効果は、非常に簡単に導入することができます。実際にサンプルを動かしながら、自分の目で確かめてみてください。 対象読者 JavaScr
JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
[CSS]検索フォームを素敵なデザインするスタイルシート集
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
[JS]ソートだけでなく、検索も可能な多機能なデータテーブルを実装するスクリプト
セルのハイライト表示、データのソート、特定文字列の検索などに対応したデータテーブルを実装するスクリプトを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Open Color
http://www.maptron.com/solutions/S002-mapform/mapform.htm
Municode - MuniPRO
Searching Across Multiple States
Solutions for Implementing User-Friendly Multi-select | Doejo
[JS]画像のキャプションをスタイリッシュな動きでスライド表示させるスクリプト -slidingboxes
https://blog.8-p.info/2009/03/textfield-js
かなり自由にスタイリッシュなボタンを作れるジェネレータ『Da Button Factory』 - 100SHIKI 〜 世界のアイデアを日替わりで 〜