「正方形を作ることはできるけどレスポンシブ対応ができない」「pxを使った数値指定の方法でしか正方形を作ることができない」「ネットにあるコードをコピペしたけど上手く表示されなかった」 本日はそんな方に向けてCSSで縦横比を […]
Tips
CSSで縦横比を保ったレスポンシブな正方形を作る方法
CSS
Tips
CSSのみでマウスを乗せると画像やボタンを透けさせる方法【opacity】
Web制作でマウスホバーに関するアニメーションを作ることは多いです。 その代表的な例として「マウスを乗せると画像やボタンが透ける」というものがあり、こちらCSSのみで作成できるので覚えておくと便利です。 また動画もあるの […]
Tips
クリックしたらハンバーガーメニューが閉じるやつの作り方（ドロワーメニュー）
ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。 閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると […]
Tips
CSSのみで拡大、回転、移動のアニメーションを作る方法【scale, rotate, translate, transform, skew】
ホームページやWEBアプリでよく見かけるアイコンや写真にマウスを乗せると大きさが拡大するアニメーションの作り方はとても簡単です。 アニメーションというとJavaScriptを使うのですが、今回紹介するのはCSSのみなので […]
Tips
【アニメーション】JavaScriptをtransitionの後に実行したい
同じページで複数のアニメーションを用意している場合に、実行する順番をコントロールしないといけないことがあります。 今回はWeb制作のアニメーションでよく使われるCSSのtransitionを使ったアニメーションの後に、別 […]
Tips
JavaScriptでアニメーションをレスポンシブ対応させる方法【matchMedia】
JavaScriptでもレスポンシブ対応させることができるのをご存知でしょうか？ 具体的な使い道としてはアニメーションのレスポンシブ対応で、「スマホのみで実行したいイベント」などがあります。 スタイルについてはCSSでレ […]
Tips
CSSのみ！スライダーをライブラリなしで作る方法
JavaScriptやライブラリを使わずにスライダーやカルーセルを作ることをご存知でしょうか？ 「HTML、CSSしか分からないからスライダーはライブラリ一択になっている」「ライブラリを使うけど上手くカスタマイズできずに […]
Tips
JavaScriptのstyleでCSSスタイルを指定する方法【追加、変更、上書き、keyframesとanimationでアニメーション設定など】
JavaScriptでCSSのスタイルを設定できることをご存知でしょうか？ もちろん全体的なコーディングについてはcssファイルに書いていくのですが、アニメーションなど単発の動作についてのスタイルなどで使うことができます […]
Tips
fit-contentを使って文字幅に背景色を揃える方法
見出しなどで「背景色を文字の幅ぴったりに指定したい」という場面があるかと思います。 そんなときにCSSだけで簡単に実現できるfit-contentというプロパティがあり、意外と知られていないので紹介していきます。 また動 […]
Tips
【王道のみ】CSSのflexで横並びにした時の高さを揃えるテクニック4選
コーディングにおいて横並びのレイアウトは必ずと言っても良いほど登場します。 基本的にはdisplayプロパティを使えば簡単に横並びにすることはできます。 しかしWordPress化などで実際に文章が挿入されたときにレイア […]