サイト内に擬似ウインドウを作る方法

サイト内で擬似的なウインドウを作る方法です。1つの要素をドラッグで可変にするのですが、凝ったことしなくてもcssにrisizeというプロパティが用意されているので簡単にできます! DEMO(デモ) 右下に三角をドラッグす […]

「display:inline-block」での隙間(余白)を消す方法

display:inline-block;を使用すると、余計な隙間ができます。これを取り除く方法を4つ紹介します。 改行しない display:inline-block;を適用させた要素をソース内で改行していると、余白が […]

PCサイトをレスポンシブ化する時の考え方と注意点

PCサイトをレスポンシブ化する際の流れと注意点を紹介します。シンプルなサイトであれば数時間で終わります。スマホ対応していないサイトは淘汰されていく時代ですので、ぜひレスポンシブ化をご検討ください! ビューポートを設定する […]

PCサイトのレスポンシブ化で横揺れさせない3つのポイント

PCサイトのレスポンシブ化で横揺れ(水平スクロール)させないポイントを3つ紹介します。 幅をガチガチに指定するPC脳は捨てて、レスポンシブ脳に切り替えましょう! レスポンシブ化のチェックリスト 要素の幅はMax100% […]

CSS「transition」vs CSS「animation」vs jQuery「animate」

HTML上でアニメーションを表現する方法は大きく3つあります。 transition(cssプロパティ) animation(cssプロパティ) animate(jQuery関数) アニメーションを一斉に動かしたときに違 […]

影を操れ!box-shadowの使い方を分かりやすく解説します

マテリアルデザインで欠かせないものが「影」。 影を操るものはマテリアルデザインを制します。ということで、CSSで影を表現するbox-shadowについて、使い方のおさらいをしておきましょう。 基本的な使い方 box-sh […]