PLUSTRiCK | ひとつでも多くサイト制作でラクをするためのメモ

CSS3から、要素を透過できるopacityが使用できるようになり、画像リンクにもhoverでopacityを付けることにより、画像がリンクだとわかるようにすることが簡単にできるようになりました。この透過を応用すれば、黒い画像をhoverで明るい画像にすることも可能です。
続きを読む ＞

現在のWEBデザインでは画像を使用せず、なるべくcssでボタンをデザインすることが当たり前になっています。そのときによく目にする、よく作ると思われるパターンのボタンデザインに効果をかけて、デザインを変更していくチュートリアルです。
続きを読む ＞

display:noneとvisibility:hiddenはどちらも要素を非表示にするプロパティですが、実際に中で起こっていることは異なっています。似ているようで似ていない2つのcssをサンプルを見ながら確認しましょう。
続きを読む ＞

垂直方向中央に文字を整える場合、heightとline-heightを同時に使用するケースがよくあるかと思います。heightとline-heightの値を同じに指定すると、指定したサイズの垂直方向中央に要素が整います。
ただし、buttonタグのheightとline-heightの値を同じに指定すると、ベースラインが若干下にずれてしまいます。
続きを読む ＞

サムネイル画像やギャラリー画像などを作るとき、数十枚～場合によっては数百枚の画像のリサイズが必要になるときがあります。そんな状況になった時にFireworksユーザーの人に役立つのがバッジ処理です。
続きを読む ＞

Font Awesomeはサイトで汎用的に使用されるようなアイコンをWebフォントとして表示することができます。表示されたアイコンはWebフォントとして扱うので、差し替えはもちろん、色の変更や大きさの拡大・縮小もソース上で行えます。
続きを読む ＞

一時代前に流行ったような気がする文字のスクロール。当時は、今は懐かしきmarqueeタグを使っていましたね。PCサイトというよりケータイサイトで使用していたと思います。あの狭い表示領域には最良の表示方法でした。懐かしきスクロール機能ですが、transformと@keyframeを利用することによってCSS3でも実装できます。
続きを読む ＞

CSS3から要素に対して背景画像を複数指定できるようになっています。1つの要素に対して複数指定できるようになったことで、今までは背景+imgを使って表現をしていた部分を、背景+背景として表現する事ができます。
続きを読む ＞

今や特に珍しくも無いレスポンシブデザイン。PC・タブレット・スマホ、いろいろなデバイスでネットができるので、各デバイスで最適化させたサイトを見せたいというのは当然なところでもありますね。
ちょっと前に1ソースでレスポンシブ対応をする業務があったので、復習をかねてのメモ。
続きを読む ＞

floatを使わずに要素を横に並べる方法として用いられる事の多いinline-block。自分も結構な頻度で使用しています。ですが、普通に使うとなぜか数ピクセルの隙間が発生してしまいます。
この隙間の対処として、htmlのみで対処する方法とcssのみで対処する方法をまとめてみました。
続きを読む ＞