ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます!フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ(px)を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基本構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ
デザインを魅力的なものにする、シンプルな10個のテクニックをSmashing Magazineから紹介します。 10 Simple and Impressive Design Techniques 以下、その意訳です。 手間のかかるデザインテクニックは高度な効果を与えることができますが、間違ったところに使用してしまうと、意図したフォーカスとは異なり、ユーザーの気をそらすだけになってしまうことがあります。 これらのテクニックは、効果的に見せるために必要なデザインかもしれません。しかし、よりシンプルなテクニックでも充分な効果を与えることができます。 シンプルなテクニックやエフェクトというのは、デザインの基本です。 「less is more」の考えを元に、デザインの概観とパフォーマンスを劇的に改善できる非常にシンプルで印象的な10のデザインテクニックを紹介します。 1. Add Contras
Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの3つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像(background image)の端と背景色(background color)に同じ色(#f8f7e5)を使用します。 サンプルコード <textarea name="code" class="css" cols="60" rows="5"> body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } </textarea>
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く