もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
チュートリアル バナー Advanced Glow Effects
In this tutorial, we're going to create some really sharp-looking glow effects using a combination of layer styles, the Pen Tool, and Color Blending. The end effect is quite stunning, and hopefully you'll pick up some tips you didn't know before. Create more awesome glow effects with Layer Styles from Envato Market. Follow along with us over on our Envato Tuts+ YouTube channel: 1. How to Create th
ブロガーのための使えるPhotoShopチュートリアル集:phpspot開発日誌
18 Essential Photoshop Tutorials for Blogger | The Tao of Blogging to Wealth As a blogger, a little Photoshop skills in image editing is very crucial. ブロガーのための使えるPhotoShopチュートリアル集。 ブログ作成時のパーツやバナーなんかを作成する際に役立てられるチュートリアル集になっています。 Creating and Using Favicon.ico - favicon を作る( 関連: PhotoShopをアイコン（ICO）形式に対応させるプラグイン ) Simple Web 2.0 Banner - Web2.0なバナー作成チュートリアル 3D logo - 3Dのロゴを作成するチュートリアル Dreamy Text f
PhotoShopで７色に輝く美しいパーティクルエフェクトを作成するチュートリアル:phpspot開発日誌
9 tutorials Beautiful lighting FX effect in Photoshop This tutorial will show you how to create particle effects in Photoshop. PhotoShopで７色に輝く美しいパーティクルエフェクトを作成するチュートリアル。 次のように美しいパーティクルを作成するチュートリアルです。 簡単そうに見えて、いろいろとテクニックが使われています。 写真などと合成して綺麗なグラフィックが作れそう。 ↓実際に試してみました。これは美しいです。 関連エントリ 壁に落書きをしたようなエフェクトをかけるPhotoShopチュートリアル 燃えさかる炎に包まれたロゴを作るPhotoShopチュートリアル 光のモーションで画像を超カッコよくするPhotoShopチュートリアル スライムのような質感の
今度こそフリーの画像編集ソフト『GIMP』をマスターしようという人の為のまとめ*ホームページを作る人のネタ帳
フリーの画像編集ソフト『GIMP』のまとめ。 GIMPは高機能でありながらフリーのオープンソース画像編集ソフトです。 フォトショップは高価なもので、自宅の趣味での画像編集にまで使えないという人もいるだろう。 そんなときはGIMPを使ってみるといいかもしれませんね。 本体ファイルのダウンロード ・Windows版 ・Mac OS X ・Linux版 インストールした後に GTK+ Runtime Environment → Select languageで日本語にしておけば日本語もいけます。 インターフェイス使いやすく すこしでも使い慣れたフォトショップインターフェイスにしたいという人は、以前も紹介した日本語ローカライズを導入するといいだろう。 Photoshopユーザーのための日本語ローカライズ これを導入することで、フォトショップに似たインターフェイスで作業を行うことが可能となる。 また
Javascript＆Ajaxの小技をまとめた便利サイトいろいろ | P O P * P O P
自分用のメモも兼ねてエントリー。JavascriptやらAjaxやらで何かやりたいときに便利そうなリンク集のまとめです。 Javascript Libraries 主要なライブラリーとエフェクト用の拡張機能、その他ツールなどです。まずはこちらからいろいろ試してみるのがよさげですね。 » Javascript Libraries Ajax Rain Ajaxの小技いろいろ集です。ちょっとしたスクリーンショット付きのこうしたリンク集は眺めていて楽しいですね。 » 485 + Ajax/Javascript/Dhtml examples and demos to download Mini Ajax こちらもAjax Rainと同様です。こちらも綺麗なサイトで眺めていて楽しいですよ。 » MiniAjax.com / A showroom of nice looking simple downl
光のモーションで画像を超カッコよくするPhotoShopチュートリアル:phpspot開発日誌
Creating light motion trails & glowing sparks | Veerle's blog A technique often used in advertising these days, is these glowing lines. 光のモーションで画像を超カッコよくするPhotoShopチュートリアル。 PhotoShopで光のモーションを作って画像をすごくカッコよくする流れが見れます。 本テクニックを使えば、まるで雑誌広告のようなクールな画像が作れてしまいます。 実際に上記のような画像を作るには練習が必要だと思いますが、マスターすればいろんなところで使えそうです。 関連エントリ スライムのような質感のWeb2.0風ロゴを作成するPhotoShopチュートリアル 硬い金属のような文字を作成するPhotoShopチュートリアル テキストにツララが重なっ
CSSコーディングの際に役立つエキスパートによる７０の方法:phpspot開発日誌
70 Expert Ideas For Better CSS Coding | Smashing Magazine CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. CSSコーディングの際に役立つエキスパートによる７０の方法。 最初にＣＳＳをリセットせよ、とか、デバッグ用 ( .floatLeft, .floatRight クラス等 )のクラスを定義しよう、といった有用なテクニックが７０も記述されて
Web2.0風のボタン等がクリック一発で作れるPhotoShop用レイヤースタイル:phpspot開発日誌
Deziner Folio Blog Archive Ultimate Web 2.0 Layer Styles - Free Download Photoshop Layer Styles are the easiest way to speed up the design process. I found that my previous article - Ultimate Web 2.0 Gradients v3.0 was a lot helpful to many.Web2.0風のボタン等がクリック一発で作れるPhotoShop用レイヤースタイル。 サイトの「Download」ボタンでダウンロードし、.ASLファイルをダブルクリックでインストール完了します。 インストールしたら、「ウィンドウ」メニューから「スタイル」を表示します。 すると次のようにインストールされたスタイルが表
これで完璧！ロゴデザインのためのお役立ち資料まとめ | P O P * P O P
これがあればもう完璧ですね・・・300以上ものロゴデザインに関するサイトを集めたまとめです。 チュートリアルからロゴデザインのアイディアまで・・・かな～り使えるのではないでしょうか。300以上もあるのでさすがにいくつかのカテゴリーに分類されていますね。 どんな役立つ資料があるのでしょうか。詳しくは以下をどうぞ。 ↑ ロゴのタイポグラフィーに関する資料いろいろ。フォントは悩みますよね・・・。 ↑ お約束ですが、「2.0っぽい」ロゴデザイン集についてもいろいろ教えてくれます。 ↑ 素敵なロゴデザインを集めたサイトも紹介してくれます。 全てのカテゴリーは以下のとおりです。是非ご活用ください。 Importance of Logo （ロゴの重要性） Logo Design Software （デザインのためのツール） Logo Design Tutorials （チュートリアル） Logo Fil
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webサイトに、ある画像を入れるだけでアクセス数が3倍になるネット社会*ホームページを作る人のネタ帳
人物写真をもっと上手に撮りたい！ - DesignWalker
あの映画風の画像が簡単につくれるチュートリアル11選 | POP*POP
http://www.designwalker.com/2007/05/photoshop_shape.html
最近見つけた海外のPhotoshop関連エントリーをまとめてみました - DesignWalker
http://www.designwalker.com/2007/05/photoshop_gradient.html
