これまで、統一カラーサイト３０選・緑、赤、青をシリーズで公開しているブログをご紹介してきましたが、さらに茶色と黒が追加された為、計150となりましたのでまとめてご紹介していきます。 様々な統一されたサイトのセンスやWebの形を盗み、それでも尚足りないと思う人もいるかもしれませんので、HTML＆CSSのフリーテンプレートサイト『OpenWebDesign』をご紹介しておきます。 書店に売っているデザイン参考書を読む前に、一度目を通しておいても損は（きっと）ないですよ。 統一カラーのサイト群 黒配色系のお手本30サイト 30 Black Websites 茶色配色系のお手本30サイト 30 Brown Websites 緑色配色系のお手本30サイト 30 Green Websites 青色配色系のお手本30サイト 30 Blue Websites 赤色配色系のお手本30サイト 30 Red W
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. CSS＆JavaScriptカレンダーライブラリ集。 いろんなCSSとJavaScriptで実装されたサンプルライブラリが紹介されています。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Google Calendar into your Site JS Calendar The DHTML / JavaScript
Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
これは素敵な資料です。 ウェブ上の小粋なインターフェースがFlickr上で集められています。「カレンダー」、「ログイン画面」、「友達を追加」などなど、かなり使える事例が満載です。 「ここのインターフェースはどうしようかな・・・」というときに参考にされてみてはいかがでしょうか。 どういったインターフェースが掲載されているか、以下にいくつか見ていきましょう。 ↑ 「友達を追加」のインターフェース。SNS的要素には必要ですね。 ↑ カレンダーのインターフェースいろいろ。参考になりますね。 ↑ フッターのインターフェース。ユーザーアクションを促すには大事です。 ↑ アップロード系のインターフェース。CGMには必須ですね。 他にも「404ページ」や「タグクラウド」などがありますね。全部で18種類あります。 ご覧になりたい方は以下よりどうそ。 » Collection: Design Patterns
【このサイトのここがオススメ！】 人事や総務、営業から製造現場、病医院向けの文書まで、さまざまな業務にすぐ使える500種以上のWord形式・Excel形式の文書ファイルを用意。すべて無料でダウンロードでき、利用者登録も不要だ。 今回ご紹介するサイトは、株式会社アーバンプロデュースが提供している「いただき君」。500種以上ものWord形式・Excel形式の業務用書式のテンプレートとして利用可能なドキュメントを無償公開している。 誰でも無料でダウンロードできる書式ドキュメントは「生産・製造／研究開発・設計」、「人事・賃金／社員教育」、「経営戦略／情報システム」、「営業・販売／総務・経理」、「 建設業／小売・卸売業 」、「病医院」という6つのカテゴリに分類されている。 ファイルはWord形式またはExcel形式で、ダウンロード保存すれば自由に編集できる。提供されているドキュメントをもとに、自社用
よくあるリソースではありますが、IE7にも対応したCSSレイアウトのご紹介。SEO的にも配慮されたコードなのだとか。 詳しい使い方は以下のとおり。 また、せっかくなのでこうしたレイアウト系サイトについて最後にちょっとまとめておきました。そちらもあわせてどうぞ。 ↑ まずは横幅から選択。750pxからいってみましょう。 ↑ かなりの数のバリエーションがあります。 ↑ 詳細ページでCSSがダウンロードできます。 なかなか便利ですね。これでサイト製作を大幅にスピードアップできそうです。 ご利用は以下からどうぞ。 » CSS Layouts なお、他にもCSSレイアウト系のリソースはありますね。良い機会なのでまとめておきます。ビジュアル的に比較的見やすいものをピックアップしています。 Layout Gala: a collection of 40 CSS layouts based on the
Rater ? Robarov: Webdesign, zoekmachine optimalisatie, hosting 超クールなCSSデザインされたUIのレーティングシステムのサンプル。 サンプルを使って次のようなカッコいいレーティングシステムを実装することができます。 デザインその１ デザインその２ いずれも、CSSによってデザインされており、HTMLは次のようにシンプル。 <ul id="rating"> <li id="r1"><a href="#1" title="give this site a 1"><span>Abysmal</span></a></li> <li id="r2"><a href="#2" title="give this site a 2"><span>Terrible</span></a></li> <li id="r3"><a href="#3"
Tab Interface Scripts | Dr. Web Weblog タブ風ＵＩを実装するための色々。 標準的なタブＵＩから変り種タブＵＩまで、いろいろなタブ式ＵＩを実現するためのライブラリがまとまっています。 Javascript Tabs vom Stilbüro AJAX Tabs Content Script Tabmenu dhtmlxTabbar ActiveWidgets 2.0 続きをみる いろいろあって面白いですね。 関連エントリ クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」
Web デザインに限ったことではありませんが、何かを学ぶときは良いお手本を探すことが大切ですね。そのお手本を真似ながら、たくさん 練習することが上達するための何よりの方法だと思います。 そんなお手本にしたいきれいな Web デザイン（CSS）ばかりを集めたギャラリーを10サイト選んでみました。配色に悩んだり、デザインのアイデアが浮かばない、そんなときもインスピレーションを与えてくれそうです。 01 CSS Mania CSS デザインといえば、まずここ 02 Most Inspired クールな CSS デザインを一括チェックできます。 03 CSS Impress ブログデザインの参考に 04 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards タグで分類されていて目的にあわせて選びやすい 05 CSSclip |
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
8 web menus you just can't miss There's no point to discuss the importance of a web menu, how it's done and how it looks. Many people may remember a website for it's great looking menu. サイトに使えるCSSベースのクールなメニューナビゲーション8個が紹介、ダウンロード公開されています。 サイトのナビゲーションデザインはシンプルだけど使い勝手のよいものにしたいですね。 そこで、サンプル集があればサイトにあったナビゲーションを考えることが出来そうです。 CSSベースの色んなタイプのナビゲーションがあるのでサイト作りに役立ちそうですね。 関連エントリ Webデザイナー/開発者が覚えておくとよい２５のテクニック
50 sources for web design inspiration by Fuzzy Future When Fuzzy Future first got started, I said that our goal was to build content that other people can use to improve their own projects. WEBデザインの際に使える５０のソース。 当ブログでもいろいろと紹介してきましたが、カッコいいサイトをまとめているサイトがあったので紹介。 デザインに迷ったときはまず、他のデザインサイトを見ていろんなデザインを視覚に入れることが重要ですね。 The Best Designs Six Shooter Media’s Free Templates 2Advanced Studios Andreas Viklund Fre
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
2015年はアクセシビリティに関わる案件をやったりしていたので、特に WCAG 2.0 やらの対応が必要とは言われてない案件でも意識するようになったりしました。 そんな中で、タブ実装が必要な案件が有ったので、WAI-ARIA をマークアップに取り入れたタブを実装してみました。 せっかくやってみたので、今回は機能自体はとてもシンプルだけど、WAI-ARIA をマークアップに取り入れたアクセシブルなタブを紹介するです。 「WAI-ARIA ってなにそれ？おいしいの？」みたいな方や「単純にシンプルなタブを使いたい！」って方でも使えると思います。 先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。 LateCalc（電卓） - Google Play の Android アプリ なんで、電卓！？とか色々有ります
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
