CSS

コーディング時に意外と使われがちな背景画像のCSSについて紹介です。 背景で最も覚えておくべきは「background-size」だと思います。この指定の違いによって表示がどのように変わってくるのか、マウスでドラッグしな […]

Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使 […]

マウスホバーのパターンを１０個まとめました。 ホバー時の動きは、基本的には指示がなくコーダーに一任されることが多いので、自分の中で「お決まり」のホバーアクションを決めておくとコーディングが捗るかもしれません。 ちなみにわ […]

～ とあるサイトのカスタマイズ案件にて ～ わたし「対応が完了したので、ご確認いただけますでしょうか。」 クライアント「変更されていません。」 わたし「大変お手数ですが、キャッシュを削除してからご確認いただけますでしょう […]

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

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

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

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

ボタンのパターン集を作成しました。 コピペで使っていただいてOKです。 <div class=”btn”>ボタン</div> 上記のHTMLをCSSでカスタマイズしていきます！ ベースのボタン ボ […]

クリック時に波状に広がるボタンの作り方です。 ボタン <div class=”btn-wave”>ボタン</div> .btn-wave { display: inline-block; padd […]

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

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

animationプロパティは指定できる値を見てもらうと分かりますが、transitionととても似ています。 animationで指定できる値（プロパティ）は以下のとおり。 animation-name animati […]

transformプロパティでは、以下の変形を実現できます。 移動 縮尺 回転 傾斜 遠近効果 transform自体は要素を変形させるだけの役割ですが、 transitionなどと組み合わせることで、マテリアルデザイン […]

transitionを日本語訳すると、 移り変わり 移行 変遷 変化 といった意味になります。 まさにアニメーションに関するプロパティですね。少し難しく表現すると「時間的変化」を表現するものです。 マテリアルの表現はtr […]

要素の高さを意識せずに上下中央に揃える方法を紹介します。 レスポンシブで要素の大きさが固定できない今の時代に合った指定の仕方だと思うので、ぜひ覚えてください！ position: abosoluteを使います。 上下揃え […]

今の時代、レスポンシブデザインできないWeb屋なんてWeb屋じゃありません。ただ残念なことに、少し勉強すれば考え方は理解できるレスポンシブを理解しないまま枯れはじめているWeb屋が多いのも事実です。 時代に取り残されない […]