Posts Tagged Design

CSSの擬似要素「:before」「:after」の使い方

CSSはHTMLで作られた要素の構造を装飾するためのものです。 しかしCSSの擬似要素「:before」「:after」は、CSS側からHTMLに要素を追加することが出来ます。 そのため、見出しやボックスエフェクトなどに利用するとHTMLの…

良く利用するCSS3プロパティのクロスブラウザ対応まとめ

CSS3では、丸角や影をつけたりと今まで出来なったリッチなUIが作れるようになりました。 しかし、まだ全てのブラウザで完全に実装されていないため、ベンダープレフィックスや独自のプロパティが必要となってきます。 そのため、CSS3で良く利用す…

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

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

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

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

CSSで作るdivボックスデザイン

pタグは文章、tableタグは表と言ったようにタグにはそれぞれ意味があります。しかし、divタグはHTML上意味の無いタグとして扱われます。 そのため、レイアウトやデザインなど装飾に使われます。 今回はそんなdivタグでボックスデザインをい…

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

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

ホームページに最適な画面サイズ

ホームページのレイアウトを作るときに、まず決める必要があるのが画面のサイズです。 最適なサイズでレイアウトを組むことが、見やすいレイアウトにつながって行きます。 今回は、レイアウトを組むために最適なサイズがいくつなのかを調べてまとめてみまし…