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

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

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

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

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

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

動画をWebページに埋め込む方法

動画それだけで1つのページが作れる魅力的なコンテンツです。 Webサイトを作成する上で動画を扱えると作れるコンテンツの幅が広がりますので、知っておいて損は無い知識です。 今回は、YouTubeやニコニコ動画などの大手サイトの動画を自分のWe…

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

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

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

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

アップロード済みの画像ファイルを圧縮するプラグイン「EWWW Image Optimizer」

Webページ読み込み速度は、ページの価値を決める要因の1つとなっています。 そのため、ページの価値を上げたいときは少しでも読み込み速度を早くする必要があります。 Googleがついに順位決定に表示速度を使い始めた(公式発表) Webページの…