ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
[CSS]スタイルシート設計のベースになる12のCSSのフレームワーク | コリス
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
よりよいWebデザインにするための配色のセオリー :: Love & Design ::
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
47+ Excellent Ajax CSS Forms - noupe
Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms. Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the nee
ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」:phpspot開発日誌
Drawter.com - DrawAble Markup Language ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」。 次のように、グラフィックソフトを扱うように、範囲をドラッグ＆ドロップで囲ってブロックが作れます。 好みのレイアウトが出来たら、後は、Code メニューから「Generate Code」を選ぶだけでコードが作れます。 ブロックベースのレイアウト作成ツールはありますが、こういった自由な形に作成できるものは珍しいですね。 凄く凝ったレイアウトを作る際になかなか使えそうです。 関連エントリ 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 ビジュアルにドラッグ＆ドロップでCSSレイアウトをデザインできる「YAML Builder」 WYSIWYG型オンラインCSSデザインツール「CSSEZ」
Web Design Library(ウェブデザインライブラリー) ―ウェブクリエーター向けの情報サイト
平素はテンプレートモンスター ジャパンをご利用頂きましてありがとうございます。 2020年7月31日をもって、同サービスを終了させて頂くこととなりました。 システム障害により、2020年6月下旬より同サービスサイトを停止しておりますが、復旧の目途が立たないこと、及び昨今の新型コロナウィルスの影響により、当社全体としての事業の選択と集中が必要であること等を総合的に検討した結果、同サービスの終了を判断したものです。 従前より、テンプレートモンスタージャパンをご愛顧頂きましたお客様には、厚く御礼申し上げます。 また、同サービスのアフィリエイトプログラムにご参加いただいておりますアフィリエイター様のアフィリエイト報酬のご請求は2021年1月31日まで受付けさせて頂きます。 改めまして、同サービスをご愛顧いただき、御礼申し上げます。
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」:phpspot開発日誌
MooTools Mocha UI Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」。 次のような移動＆リサイズ＆クローズ＆最大化可能なウィンドウを簡単に作成できます。 サイト内のデモでは、タイトルと内容を入力することで、動的にウィンドウを作成できることが紹介されています。 フレームワークには、mootools 使用。 かなり軽快に動いてくれ、ページ内で別窓を作るＵＩを作る際にはかなり使えそう。 関連エントリ Prototype.jsベ
セレクトボックスを装飾するjavascript「Select Box」
twitter facebook hatena google pocket フォームは閲覧者との重要な接点です。 そのためにはデザインを凝ることも必要です。 Script.aculo.us Select Boxではセレクトボックスを奇麗にすることができます。 sponsors 使用方法 select.jsとproSelectBox.css、prototypeからporotype.js、script.aculo.usをダウンロードします。 またCSSで使用している画像bg_select.jpgもダウンロードします。 <link rel="stylesheet" href="http://yourdomain/proSelectBox.css" type="text/css"> <script src="http://yourdomain/prototype.js" type="text/ja
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
not found
CSS Spriteを活用しよう - DesignWalker
favicon.ico（ファビコン）の作り方 | IDEA*IDEA
ちょっと便利なCSS Tips いろいろ - DesignWalker
これ１枚で分かる キレイなHTMLコードを書くためのコツ - Chocolate（チョコレート）
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
TableとCSSいろいろ - DesignWalker