「正方形を作ることはできるけどレスポンシブ対応ができない」「pxを使った数値指定の方法でしか正方形を作ることができない」「ネットにあるコードをコピペしたけど上手く表示されなかった」 本日はそんな方に向けてCSSで縦横比を […]
Tips
CSSで縦横比を保ったレスポンシブな正方形を作る方法
2023年1月
Tips
CSSのみでマウスを乗せると画像やボタンを透けさせる方法【opacity】
Web制作でマウスホバーに関するアニメーションを作ることは多いです。 その代表的な例として「マウスを乗せると画像やボタンが透ける」というものがあり、こちらCSSのみで作成できるので覚えておくと便利です。 また動画もあるの […]
Tips
クリックしたらハンバーガーメニューが閉じるやつの作り方（ドロワーメニュー）
ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。 閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると […]
Tips
CSSのみで拡大、回転、移動のアニメーションを作る方法【scale, rotate, translate, transform, skew】
ホームページやWEBアプリでよく見かけるアイコンや写真にマウスを乗せると大きさが拡大するアニメーションの作り方はとても簡単です。 アニメーションというとJavaScriptを使うのですが、今回紹介するのはCSSのみなので […]
Tips
【アニメーション】JavaScriptをtransitionの後に実行したい
同じページで複数のアニメーションを用意している場合に、実行する順番をコントロールしないといけないことがあります。 今回はWeb制作のアニメーションでよく使われるCSSのtransitionを使ったアニメーションの後に、別 […]
Tips
TypeScriptでany型はおススメしません、unknown型でOKです
本日はTypeScriptにおけるany型とunknown型の違いを解説していきます。 どちらも型が決まっていないときに使う、という意味では同じものに見えるのですが大きな違いがあり、初学者の方には共有されていないことが多 […]
Tips
JavaScriptでアニメーションをレスポンシブ対応させる方法【matchMedia】
JavaScriptでもレスポンシブ対応させることができるのをご存知でしょうか？ 具体的な使い道としてはアニメーションのレスポンシブ対応で、「スマホのみで実行したいイベント」などがあります。 スタイルについてはCSSでレ […]
Tips
CSSのみ！スライダーをライブラリなしで作る方法
JavaScriptやライブラリを使わずにスライダーやカルーセルを作ることをご存知でしょうか？ 「HTML、CSSしか分からないからスライダーはライブラリ一択になっている」「ライブラリを使うけど上手くカスタマイズできずに […]
Tips
JavaScriptでアニメーションをレスポンシブ対応させる方法
サイト制作などでアニメーションをレスポンシブ対応できることをご存知でしょうか？ 考え方は簡単で「画面サイズ」を取得できれば良いわけです。 JavaScriptで画面サイズを取得したり、監視したりする方法を紹介していきます […]
Tips
JavaScriptのstyleでCSSスタイルを指定する方法【追加、変更、上書き、keyframesとanimationでアニメーション設定など】
JavaScriptでCSSのスタイルを設定できることをご存知でしょうか？ もちろん全体的なコーディングについてはcssファイルに書いていくのですが、アニメーションなど単発の動作についてのスタイルなどで使うことができます […]