商用サイトでも無料で利用できる、ひらがな・カタカナ・漢字などが含まれている日本語のフリーフォントを紹介します。 最新版を公開！フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ

ウェブデザインのクオリティをアップする7つのポイントをFunction Web Design & Developmentから紹介します。 How to Spot Quality within Web Design: Examples & Tips 以下、その意訳です。 1. Spacing スペースは、デザインされたエレメントの間に使用される巧妙なテクニックです。素晴らしいイメージを配置することも大切ですが、そのエレメントにどのようにスペースを与えるか充分に考慮する必要があります。 充分なスペース

Internet Explorerの異なるバージョン（1, 1,5, 2, 3, 4, 5, 5.5, 6, 7, 8）を同時に起動して、確認ができる「Internet Explorer Collection」を紹介します。 Utilu IE Collection 同時起動できるIEのバージョンは、インストールするWindowsのバージョンによって異なります。 当環境（XP SP3+IE7）では、上記のキャプチャのようにIE1.5, 2, 3, 4, 5, 5.5, 6, 7, 8を同時起動できました。 ※元のIE7には特に影響はありませんでした。 古いバージョンが必要ない場合は、インストール時にチェックをはずせばインストールしないと思います。

パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre

メッシュ状のメタルやカーボンのテクスチャを作成できる、フリーのPhotoshopのパターン素材をAxertionから紹介します。

スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。 25 Advanced CSS Techniques 1. CSS Gradient Text and Background テキストや背景をグラデーション表示。

順序付きのリスト（ol）をセクシーにデザインするスタイルシートをSoh Tanakaから紹介します。 Sexy Ordered Lists with CSS demo リストのデザインには1pxのライ

2009年のウェブデザインのトレンドで押さえておきたい10のポイントをSmashing Magazineから紹介します。 Web Design Trends For 2009 1. Letterpress プレスしたようなタイポグラフィ。

アロー、ビュレット、サーチ、ショッピングカートなど、20,000個以上のウェブサイトで汎用性の高いミニサイズのアイコンを紹介します。 ダウンロードはフリーで、ライセンスは各アイコンで異なります。

太陽や照明など光源がレンズに向けられている際に生じるレンズフレアを描くPhotoshopのブラシをcolor burnedから紹介します。

Styled Menuから、IE6/7, Firefox, Opera, Safari, Chromeに対応した、フリーのナビゲーションを紹介します。 Styled Menu ナビゲーションはリスト要素で実装されており、ラベルを日本語に変更するなどカスタマイズも可能です。

Design Reviverのエントリーから、体や顔などを美しく修正するPhotoshopのチュートリアルを紹介します。 50+ Excellent Body Enhancement Photoshop Tutorials サイトでは下記の他にもたくさんのチュートリアルが紹介されています。

矢印や星・ハートなど記号文字もかわいい、手書き風の日本語フォント「ミウラフォント」から、商用利用可のフリーフォント「ミウラLiner_jr」を紹介します。 MopStudio 「ミウラLiner_jr」は、英数記号文字をはじめ、ひらがな・カタカナや小学３年生程度の漢字440文字が含まれている、日本語のプロポーショナルフォントです。 特殊な形の矢印や星・ハートは、文字パレットから選択します。普通のは「やじるし」「ほし」「はーと」で変換されます。 ダウンロードは、下記キャプチャの「ミウラLiner_jr」の画像をクリックし、赤丸箇所からWindows版とMac版がダウンロードできます。 また、ミウラフォントでは、JIS第一水準漢字（2965文字）、JIS第二水準漢字から人名漢字（219文字）を選出した多くの漢字が含まれた有償版も低価格で配布しています。 単体版の「ミウラLiner」「ミウラ見出

Matthew James Taylorのエントリーから、リスト要素でマークアップしたタブ型ナビゲーションを中央に配置するスタイルシートの紹介です。 <textarea name="code" class="html" cols="60" rows="5"> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a></li> <li><a href="#" class="active">Tab two</a></li> <li><a href="#">Tab three</a></li> <li><a href="#">Tab four</a></li> </ul> </div> </textarea>

Posemaniacs 人体のポーズのスケッチは、Flashで作成されており、マウスの操作で角度を変更することができます。 ランニングでは、モーションを表示することもできます。

Emma Alvarez Siteのエントリー「50のよく使うCSSのTipsとツール」から、CSSのテクニックをいくつか紹介します。 Most Useful 50 CSS Tips And Tools For Webmasters

specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。

IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ

960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが