CSS
PCサイトのレスポンシブ化で横揺れさせない3つのポイント
PCサイトのレスポンシブ化で横揺れ（水平スクロール）させないポイントを3つ紹介します。 幅をガチガチに指定するPC脳は捨てて、レスポンシブ脳に切り替えましょう！ レスポンシブ化のチェックリスト 要素の…
はにわまん 
CSSで表現できるボタンの基本パターン（※ Font Awesomeを使うものもあり）
ボタンのパターン集を作成しました。 コピペで使っていただいてOKです。 コピー<div class=”btn”>ボタン</div> 上記のHTMLをCSSでカスタマイズしていき…
クリック時に波状に広がるマテリアル風なボタンをCSSとJavaScriptで表現
クリック時に波状に広がるボタンの作り方です。 ボタン コピー<div class=”btn-wave”>ボタン</div> コピー.btn-wave { display: in…
CSSのtransitionとanimation、jQueryのanimateの比較
HTML上でアニメーションを表現する方法は大きく３つあります。 transition（cssプロパティ） animation（cssプロパティ） animate（jQuery関数） アニメーションを一…
影を操れ！box-shadowの使い方を分かりやすく解説します
マテリアルデザインで欠かせないものが「影」。 影を操るものはマテリアルデザインを制します。ということで、CSSで影を表現するbox-shadowについて、使い方のおさらいをしておきましょう。 基本的な…
CSSでアニメーション！「animation」と「keyframes」の使い方のおさらい
animationプロパティは指定できる値を見てもらうと分かりますが、transitionととても似ています。 animationで指定できる値（プロパティ）は以下のとおり。 animation-na…
マテリアルデザインを設計する上で欠かせないCSS「transform」について解説
transformプロパティでは、以下の変形を実現できます。 移動 縮尺 回転 傾斜 遠近効果 transform自体は要素を変形させるだけの役割ですが、 transitionなどと組み合わせることで…
移ろいゆくアニメーションを表現するCSS「transition」について解説
transitionを日本語訳すると、 移り変わり 移行 変遷 変化 といった意味になります。 まさにアニメーションに関するプロパティですね。少し難しく表現すると「時間的変化」を表現するものです。 マ…
「高さ分からない要素」をCSS（absolute）で上下左右中央揃えにする方法
要素の高さを意識せずに上下中央に揃える方法を紹介します。 レスポンシブで要素の大きさが固定できない今の時代に合った指定の仕方だと思うので、ぜひ覚えてください！ position: abosoluteを…
レスポンシブデザインサイトの作り方。たった2つのことを覚えておけば簡単に作れますよ！
今の時代、レスポンシブデザインできないWeb屋なんてWeb屋じゃありません。ただ残念なことに、少し勉強すれば考え方は理解できるレスポンシブを理解しないまま枯れはじめているWeb屋が多いのも事実です。 …