Posts Category Design

無料で使えるフラットアイコンフォント「Genericons」

「Genericons」はWordPressのデフォルトテーマ「TwentyFourteen」にも使用されているアイコンフォントです。汎用的なアイコンが揃っており、CSSで色やサイズが簡単に変更できるため、どんなWebサイトやブログに合うよ…

ボックス要素内で縦位置の中央揃えを行うCSS

CSSで横位置の中央揃えをするときは「text-align:center」と指定するだけでできますが、縦位置の中央揃えを行う「vertical-align:middle」はtableのセル内でしか使えません。 divタグなどで縦位置の中央揃…

PSDアイコンファイルの使い方

無料で使えるアイコンファイルを紹介している記事を見てファイルをダウンロードしてみたが、解凍すると「.psd」というファイルがあり、どうやって使用するのかがまったくわからなかった経験はありませんか? 私も最初は使用方法がまったくわからず仕方な…

センスの良い配色のWebサイトを作る方法

センスの良い配色を選ぶ時には、彩度・明度・色相のバランスや青/白は清潔感、黒は高級感などの色の意味を知ってバランスの良い組合わせ模索する必要があります。 配色の本が出ている位なので、こういったセンスを磨くのはとても大変です。 私は本職のデザ…

読みやすい行間と文字サイズ

ブラウザのデフォルト設定だと、行間隔が詰まりすぎたり、文字が大きい、または小さいすぎるなど、やや読みづらいものとなってしまいます。 文字のサイズや行と行の間隔を適切なものにするだけで、文章を読みやすさを格段にUPできます。 今回は、「文字サ…

Photeshopの代わりに使える!! 無料の画像編集ソフト「GIMP」のインストール

多くのWebデザイナは画像編集ソフトとしてPhoteshopを使用しています。 Photeshopの唯一の欠点は金額が高く手が出ないことです。そこで今回は、Photeshopに負けないほど多機能な画像編集ソフト「GIMP」のインストール方法…

見やすいフォントとは・・・

「フォントはデザインの一部である。」という話を前に聞いた覚えがあります。 実際にフォントによってページの見栄えが悪くなったりしますのでデザインの一つとしても重要な要素です。 今回は、サイトを作る上で重要なフォント選びについてまとめて見ました…