「ヘッダーの固定をすると下の背景と重なってしまう」「ヘッダー固定しながらアンカーリンクさせると思った場所にスクロールされない」「スクロール位置の調整をJavaScriptで書いているけど上手く動かない」 本日はそんな方に […]
Tips
CSSのみ！ヘッダー固定でアンカーリンクがずれるを解決【ページ内スクロール、スムーススクロール】
CSS
Tips
Youtube、Twitterタイムライン、GoogleMapを埋め込む方法
サイトやアプリにSNSを埋め込むのは当たり前になりました。 それぞれ簡単な仕組みで表示させることができるので、主要なSNSについて表示方法を解説していきます。 また動画もあるので必要に応じて活用してください。 Webサイ […]
Tips
JSなし！画像がダウンロードできるボタンを設置する方法【img download】
画面に表示している画像をダウンロードさせるボタンの作り方をご存知でしょうか。 ボタンに関するイベント処理は色んな種類がありますが、今回はJavaScriptを使わずに実装できる内容なので初学者の方でも理解して頂ける内容に […]
Tips
はみ出たテキストを省略して表示するCSSのテクニック【抜粋文】
Web制作でブログ記事など長文のテキストを抜粋文のような形で途中で省略して表示する場面がありますよね。 初学者の多くはWordPressの関数でそのようなテキストの省略を学びますが、PHPのような難しいものではなくCSS […]
Tips
CSSで縦横比を保ったレスポンシブな正方形を作る方法
「正方形を作ることはできるけどレスポンシブ対応ができない」「pxを使った数値指定の方法でしか正方形を作ることができない」「ネットにあるコードをコピペしたけど上手く表示されなかった」 本日はそんな方に向けてCSSで縦横比を […]
Tips
CSSのみでマウスを乗せると画像やボタンを透けさせる方法【opacity】
Web制作でマウスホバーに関するアニメーションを作ることは多いです。 その代表的な例として「マウスを乗せると画像やボタンが透ける」というものがあり、こちらCSSのみで作成できるので覚えておくと便利です。 また動画もあるの […]
Tips
クリックしたらハンバーガーメニューが閉じるやつの作り方（ドロワーメニュー）
ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。 閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると […]
Tips
CSSのみでズームアップ（拡大）のアニメーションを作る方法【scaleプロパティ】
ホームページやWEBアプリでよく見かけるアイコンや写真にマウスを乗せると大きさが拡大するアニメーションの作り方はとても簡単です。 アニメーションというとJavaScriptを使うのですが、今回紹介するのはCSSのみなので […]
Tips
【アニメーション】JavaScriptをtransitionの後に実行したい
同じページで複数のアニメーションを用意している場合に、実行する順番をコントロールしないといけないことがあります。 今回はWeb制作のアニメーションでよく使われるCSSのtransitionを使ったアニメーションの後に、別 […]
Tips
【2023年版】JavaScriptでレスポンシブ対応させる方法
JavaScriptでもレスポンシブ対応させることができるのをご存知でしょうか？ 具体的な使い道としてはアニメーションのレスポンシブ対応で、「スマホのみで実行したいイベント」などがあります。 スタイルについてはCSSでレ […]