CSS

CSS

【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫!

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

はにわまん
CSS

【コピペOK】よく使われがちなマウスホバーのCSSパターン10選と作り方

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

はにわまん
CSS

【具体的なコードあり】スマホでグローバルメニューを表現する5パターン

スマホの限られたスペースでメニューを表現するための5つのパターンを具体的なコードと共に紹介します。 スマホメニューを表現する際の基本となる5パターンなので、しっかりと使いこなせるようにしておきましょう…

はにわまん
CSS

「キャッシュの削除お願いします」をなくせ!強制的にCSSのキャッシュを無効化する2つの方法

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

はにわまん
CSS

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

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

はにわまん
CSS

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

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

はにわまん
CSS

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

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

はにわまん
CSS

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

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

はにわまん
CSS

CSSで表現できるボタンの基本パターン(※ Font Awesomeを使うものもあり)

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

はにわまん
CSS

クリック時に波状に広がるマテリアル風なボタンをCSSとJavaScriptで表現

クリック時に波状に広がるボタンの作り方です。 ボタン コピー<div class=”btn-wave”>ボタン</div> コピー.btn-wave { display: in…

はにわまん
1 2 3 4