Drinking Rockstars and Programming Creating a Style-Guide for your site One thing you'll realize after you do alot of front-end work is that after you don't work with the CSS and HTML for a few days, you'll forget the classes that you defined and end up writing alot of similar CSS styles.サイトをCSSで綺麗に作っても、時間が経つとそれぞれのidやclass定義について忘れてしまいます。 時間が経ってからデザインを修正する場合、CSSの見直しや、実際の見栄えについて確認するのに手間取ってしまいます。 そこで
CSS Tools CSSの便利ツール集。 Em Calculator - ピクセル(px)とemの対応を計算することが出来ます その他オプティマイザ Clean CSS - CSSのオプティマイザ. CSS Tweak - CSSのオプティマイザその２ Online CSS Optimizer - CSSのオプティマイザその３ W3C CSS Validator - CSSバリデーター その他、便利なCSSツールのリスト。 どれもWEBで使えるのでＣＳＳ開発に便利ですね。 関連エントリ CSSデザインのページを作る際のスタイルガイド クールなCSSサイトをチェックできる『CSS Allstar』
Christmas Holiday Icons This Christmas theme icons are available in both bitmap and vector formats. 商用利用も出来るフリーのクリスマスアイコン。 次のようなかわいらしいアイコンがフリーで使えます。 もうすぐクリスマスですが、サイトのクリスマス企画なんかに使えるかもしれませんね。 アイコン関連エントリ フリーのWeb2.0風の16x16アイコンを配布しているサイト集 2色のハイクオリティなフリーアイコン配布サイト「2pt3」 ソーシャルブックマークのアイコン集 フリーのWindowsVista用アイコン等をダウンロード ロイヤリティフリーのアイコンを試す
CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はインデントして読みやすくしよう h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; } 確かに、これは分かりやすいかもしれません。今後導入しようと思います。 3. セクションごとにコメントを入れて構造化しよう /* Structure */ ...
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
Smashing Magazine | Blog Archive CSS-Based Forms: Modern Solutions In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, CSSベースのクールなフォーム、サンプル集。 デザインにしにくい部分だからこそ、凝っておくと玄人受けはよい筈。色々なデザインがあって感心するばかりです。 Prettier Accessible Forms Badboy Niceforms Functional Pretty Forms Form Layout Templates Fun with forms - customized input elements Scr
PHPで画像を使わず、HTMLでグラフを描画するライブラリ:HTML-GRAPHS 2006年08月11日- Gerry's Script Library barLevelColor can now consist of as many level-color-pairs (in ascending order) as you like: PHPで画像を使わず、HTMLでグラフを描画するライブラリ:HTML-GRAPHS。 次のように、まるで画像をつかったかのようなグラフが簡単に描けます。 コードのサンプルは次のようにシンプルに使えます $graph = new BAR_GRAPH("fader"); $graph->values = "123;456"; echo $graph->create(); 関連エントリ PearのImage_Graphのグラフ描画サンプル
Better fonts - over 10,000 fonts for free 10,000種類以上のフリーフォントを試してダウンロードできる「better fonts」。 左カラムにサンプルのフォントが多数表示されていて、クリックすると、そのフォントで描画された文字サンプルが右カラムに表示されます。 簡単にプレビューをみれるので、サイトデザイン時などに、デザインに合った理想のフォントを探すのに便利そうです。 独自に入力したテキストを元にフォントを描画することもできます。 次のようにJavaScriptの入力ボックスが現れるので入力してOKボタンを押します。 ↓ その場ですぐ表示可能。 ダウンロードのその画面内、「Download Font!」ボタンでダウンロード可能です。 これは便利ですね。 関連エントリ オンラインでフォント表示テストを行える『Font Tester』
DHTML Site - Free 16x16 Icons 22 Free Essential Icon Sets フリーのWeb2.0風の16x16アイコンを配布しているサイト集。 サイトの彩りやユーザビリティに欠かせないアイコンがフリーということでアイコンが書けない開発者にはうれしい限り。 Silk Icons Mini Icons Sweetie Tango Icon Gallery Web Control Icons IceCons Mini Pixel Icons Gallery 2 Web Icon Set →他にも見る これだけ沢山のフリーアイコンがあるとサイト作りがますます楽しくなりそうです。 フリーですが、ライセンスについては各サイト上の明記を確認の上で使いましょう。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
