ウェブデザインにおける効果的な背景の使い方
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組み色々:phpspot開発日誌
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
フリーのウェブデザインテンプレートのPSD
ウェブデザインのテンプレートは結構多いけど、こうしたPSD形式での配布は珍しいですね。 今回はフリーPSDテンプレート１０というエントリからご紹介。 デザインの勉強に持つかえるかも 配布形式はPhotoshopなんかで開くPSDファイル。 ダウンロードしてじっくり見てみるのも有りかもしれませんね。 Darkwood Free hosting template Old burned paper Blog Source １０全ては以下に。 過去紹介しているhtml/cssテンプレートサイト 1170 + Ajax/Javascript/Dhtml examples and demos to download Dynamic Drive DHTML(dynamic html) & JavaScript code library Ajax/JavaScriptの宝庫。htmlはあまり関係ないけどお
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル:phpspot開発日誌
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル 2009年03月17日- 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques | 2experts Design - Web Design and Graphic Design Blog チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル。 プロレベルといっても様々ですが、そのなかでも優れたといえるレイアウトとデザインのチュートリアルが公開されています。 真似することでそれなりのものを作るのは難しくなさそうです。 Create a Magic Night Themed Web Design from Scratch in Photoshop マジックをイメージした、少し怪しげなレイアウト。占
WordPressのテーマのファイル構成一覧と解説（2.7対応版） | コリス
WordPressのテーマを構成するファイルの種類、優先順位と条件タグ・インクルードタグのまとめです。 ファイル自体は2.3から変更は無いですが、2.7では詳細や階層が若干変更されています。 テーマを構成するファイルの種類 テーマを構成するファイルの優先順位 条件タグ・インクルードタグ 参考 テーマを構成するファイルの種類 テーマに必要なファイルは「index.php」「style.css」の２つです。 ２ファイルで対応できない場合は、デフォルトのテーマファイルのものが使用されます。 「style.css」では、下記のコメントを使用して、管理画面にテーマの情報が表示されます。 テーマの情報：style.cssのコメント /* Theme Name:[テーマの名称] Theme URI:[テーマのURI] Description:[テーマの説明] Author:[テーマの制作者] Autho
3キャリア対応のCSS変換モジュールHTML::MobileJpCSS - komoriyaのはてなダイアリー
DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。 http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/ 3キャリア間での変換の必要性 DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。 DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。 例えば小さいフォントを表示したい時は、 DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:smallと属性の値が異なります。 hrタグ
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
もうサイトのメニュー作成には困らない！多種多様なサイトメニュー配布サイト「Styled Css Menus」:phpspot開発日誌
Styled Css Menus - High Quality Web Based Professional Css Menus: allmenus もうサイトのメニュー作成には困らない！多種多様なサイトメニュー配布サイト「Styled Css Menus」。 ということで次のようなメニューのサンプルダウンロードが可能なサイトのご紹介。 ダウンロードページ CSSなのでちょっとスタイルを変えてオリジナルにしてみるのも良さそう。 CSSメニューでいうと、次の関連エントリも参考にできます。 デザイン性に優れたCSSメニュー集 使えるCSSメニューいろいろ CSSで作成されたサイトのメニューサンプル集 CSSのみでクールな階層メニュー作成サンプル CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
今時のWebサイトを構築するのに便利そうなCSSフレームワーク·Malo MOONGIFT
海外に見る最近のWebサイト（特にトップページ）のデザインは、縦に何段かに分かれたデザインが多い。一番上は大きな画像とともに二段構成、その下が2×2のテーブル組みなどでサービスの特徴を書き、次に横並びの3段で利用者の声といった具合だ。 今時のWebサイトっぽいデザインが簡単に まぁテーブルで組めばできないことはない。だがそれはださい、ださすぎる。CSSだけでどうにかしたい所だが、ブラウザの互換性も含めて考えるとプログラマにはとても無理だ。Firefoxで見られるように何とか組んで、IEで見たら吹き飛んでいた…なんてなったらもうやる気がなくなる。そんなことになる前に使いたいのがMaloだ。 MaloはGoogle Code上で公開されているCSSフレームワークで、GPLの下に公開されている。 Maloが実現するのは複雑な、それでいて簡単に設定できるCSSデザインだ。ヘッダとフッターを設けた上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
http://www.designwalker.com/2009/03/form-design-2.html
Web ページを高速化する
http://www.designwalker.com/2009/02/clone-webdesign.html
Apple風のクールなパンくずリストをクールに実装するサンプル:phpspot開発日誌
ユーザーフレンドリーな優れたナビゲーション集
背景画像をつくるのに便利なサイト12選 | IDEA*IDEA
IDEA * IDEA
