ドットインストール代表のライフハックブログ
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
DiaryTechnology 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineによる、効果的なコーディングのための強力CSSテクニック集だ。 以下にいくつかご紹介。 » Triadic Background Setting with CSS Silverbackのサイト。シンプルなCSSで3枚の背景画像を重ねて3D効果を出している。ドキュメントはないがソースコードを見るだけでとても刺激的 » Creative Use of PNG Transparency in Web Design We
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。(必要とされてないから? ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。 文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。 今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。 感謝感激でございまする。 デザイン提供してくれた方は
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
crestock.comのエントリー「2007年、最も人気が高い50のウェブデザインのブログポスト、リソース&チートシート」と、TenThousandThingsのエントリー「Web Design: From Good to Great in 25 Links」から、ウェブデザイン関連で2007年に人気が高かったサイトの紹介です。 The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007 Web Design: From Good to Great in 25 Links ウェブデザインの基本原則 9 Essential Design Principles ウェブデザインの9つの原則 The Importance of White space ホワイトスペースの使い方 8 Design Tacti
使えるCSSメニューいろいろ 1. Advanced CSS Navigation Menu Example まず、ホバー時以外は文字をぼやかせるCSSメニュー。 次のようにマウスホバー時は文字がクッキリするメニューのサンプルです。 JavaScript レスで実装できるので JavaScript なしがいいという方にはオススメ。 ただし、動かないブラウザもあるようなので注意が必要ですね。 2. Suckerfish Dropdowns - Perciformes! 次にCSSとJSで階層メニュー。やはりこのUIは直感的に操作できますね。 類似:CSSのみでクールな階層メニュー作成サンプル、CSSベースの階層メニュー作成ライブラリ 他にも色々と掲載されています メニュー関連エントリ PHP&CSSで動的にドロップダウンメニュー作成 ドラッグ&ドロップで描画して好きなHTMLレイアウトを作成
最近のページやサイト作成に欠かすことのできない「CSS(カスケーディング・スタイル・シート)」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
(1)好きなもの (1)Firefox ( )[r:3,t:60,f:6]シャキーン (1)JavaScript ( )[r:3,t:60,f:6]シャキーン (1)苦手なもの (1)CSS ( )[r:3,t:60,f:6]ショボーン (1)Z上司、曰く (i)[t:15] (i)[t:20] (1)というわけで ( )[r:3,t:60,f:6](金沢のラブホテル) ( ) (2) (2)[f:15]CSS が苦手な エンジニアは 僕だけじゃないはず! (2)[f:15]CSS が苦手な デザイナも もいるはず! (1)[f:15]でもほんとはみんな 出来たらいいよね! (2)みんなが関わる CSS なんだから (1)というわけで ( )[r:3,t:60,f:6](金沢のラブホテル) (2)これから 二時間半 (2)[f:18]CSS のお勉強を しましょう (2)参加して くださ
テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 December 7th, 2007 Posted in その他 Write comment 他サイトでも紹介されているが、個人的にぐっと来たのでご紹介。 複雑な図形の形にあわせてテキストを回り込ませたい、というときがたまにある。 ワードやイラストレーターではそういった処理が可能だが、ウェブでそれを再現しようと思うとちょっと厄介だ。 そこで登場したのがCSS Text Wrapperだ。このサイトでは自分で好きな図形を描き、それにあわせてテキストを配置することができる。 そのようにして作った「テキストの回りこみ処理」はCSSのコードでダウンロードすることができる。このコードを回り込ませたいテキストの直前に配置するなどすれば自分のサイトで簡単に応用可能だ。 ウェブで表現するのが厄介、で思考停止せずに、こうした
CSSとFlashのデザインでインスピレーションを得るためのサイト「Best Web Gallery」が選んだ2007年度のCSSデザインベスト50が発表されています。どれもこれもなかなか秀逸なデザインなので、来年度の新しいデザインに向けて、今年度の総復習を行って新たなインスピレーションの糧を得たい人や、ウェブサイトやブログのデザインを新しくしたいので参考になるデザインを探している人に最適です。 というわけで、ベスト50は以下から。 Capture the Valley - A project to benefit Habitat for Humanity http://capturethevalley.com/ Squawk http://www.squawkdesign.com/ Emeril's Holiday to Go : Home http://www.emerils.com/
(このイメージは、このブログの記事内容をイメージするもので、実在しません) 先日書店に、ホームページのデザイン集なるものがおいてあったので、買ってみた。 2000円出して買った本ですが、どうも損した気分に陥る。 そんな損した気分に陥る人が他にもいるかもしれないので、ホームページ、及びブログのデザインのインスピレーションをここにまとめておく事にします。 30ブログデザイン 最近話題になったエントリ。 30 More Excellent Blog Designs 良質なブログデザイン30サイトのまとめエントリ。 Simplicity and Whitespace(シンプルと空白のデザイン)からはこのブログデザインが好き。 すごくすっきりしているというのとさっぱりしていて、ちょっとクドイ。 Theocacao Weblogs Which Don’t Look Like Weblogs(ブログのよ
はじめに 本稿では、デザイン部分を担当したことのないASP.NET開発者が、友人から「起業したので会社のサイトを作って! おまえさんプロなんだからできるでしょ。頼むよ」と不意に言われ、結局引き受けてしまったストーリーをベースに、ASP.NETとの連携にも優れたマイクロソフト社のWebオーサリングツール「Microsoft Expression Web」(以下、Expression Web)によるWebサイト制作方法を解説します。 前編では、Wordライクな操作性、Web標準への準拠、ASP.NETとの連携といった、Expression Webの特長について触れました。今回は、Webサイトの構築方法、閲覧者にとって使いやすいWebサイトとは何かを説明し、Webデザインレイアウトの基本や、Webサイトのレイアウトを統一させるのに便利な「ダイナミックWebテンプレート」の利用方法を説明します。前
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く