-
【CSS】transform: scale()で要素を拡大・縮小する方法
今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてく... -
【CSS】transform: scale()で要素を上下・左右に反転させる方法
Webサイト制作をしていると、要素や画像を反転させたい場面があるかと思います。特に矢印のアイコンなどは、右向き&左向き、上向き&下向きなどセットで必要な場... -
CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】
Webページ上に「ノートのような罫線つきのデザインを実装したい！」という方もいるかと思います。単純に線を引くだけならborderプロパティを使えばよいのですが、ノート... -
【HTML】ulタグとolタグの違いは？使い分けについて解説！
Webサイトを閲覧していると、箇条書きや、左に番号が振られたリストを見ることがありますよね。これらはulolというタグを使用して実装されています。ulタグの見た目順序... -
【CSS】olタグの数字の背景に色付きの円をつける方法
順序付きリストolタグを使うことで、番号付きのリストを作ることができます。olタグのデフォルトの見た目順序付きリストデフォルトの見た目はこんな感じしかしデフォル... -
【CSS】マウスカーソルで選択したテキストの色や背景色を変える方法
Webページ上では、マウスカーソルを当ててクリック＆ドラッグすることで、テキストを選択できますね。デフォルトでは、選択範囲の文字色はそのままで、背景が薄い青色に... -
CSSとJavaScriptで新年カウントダウンタイマーを実装する方法
今回はCSSとJavaScriptを使って、現在から新年までの時間をカウントダウンするタイマーを実装する方法を紹介します。次の年まであと何日あるかがひと目で分かるので、便... -
CSSとJavaScriptでおしゃれなデジタル時計を実装する方法
JavaScriptで今日の日付と現在時刻を表示するデジタル時計を作ってみたので、実装方法を紹介しようと思います。難易度は比較的低めで、JavaScriptの初心者の方でも充分... -
JavaScriptで今日の日付や現在時刻を取得する方法【Dateオブジェクト】
サイト上に今日の日付や、現在時刻を表示したいという場面がありますよね。今回の記事では、JavaScriptのDateオブジェクトを使って、今日の日付と時間を取得する方法を... -
【WordPressプラグイン】カテゴリーの順番を自由に入れ替える方法を紹介！
WordPressカテゴリーの並び順は、デフォルトでは以下のようになっています。「数字」 → 「アルファベット」 → 「ひらがな」 → 「カタカナ」 → 「漢字」その上、標準のま... -
【サイト高速化】jpg・png画像を圧縮できる「TinyPNG」の使い方
Webサイトやブログに画像をたくさん使う場合、ページの表示速度が気になりますよね。大きい容量の画像を何枚も表示すると、表示速度が遅くなりユーザビリティの低下に繋... -
WordPressでSVGをアップロード可能にするプラグイン「Safe SVG」
WordPressでは、SVG画像をアップロードしようとすると以下のエラーが表示されてしまいます。このファイルタイプはセキュリティ上の理由から、許可されていません。SVGに... -
【CSS】@supportsでブラウザ対応状況を判別して条件分岐させる方法
Web制作をしていると、という経験がある人も多いのではないでしょうか。特にIEや古いバージョンのブラウザでは、新しめのCSSプロパティがサポートされていないというこ... -
【JS&CSS】スマホのアドレスバー・ツールバーを除いた100vhの値を指定する方法
WEBページのファーストビューに画面いっぱいに要素を表示したいとき、heightやmin-heightに100vhを指定することが多いですよね。PCだと問題なく表示されますが、スマホ... -
簡単にフォームが作れるプラグイン「WPForms」の使い方を紹介【reCAPTCHAの設定も解説】
WordPressには、様々なお問い合わせフォームのプラグインがありますね。日本ではContact Form 7やMW WP Formが有名ですが、どちらも多少のコーディング知識が必要になっ... -
【CSS】ボタンから波紋が広がっていくエフェクトを実装する方法
SNSボタンなどに使えそうな、ボタンから波紋が広がっていくエフェクトを実装してみたので、紹介していこうと思います。以下が実際のエフェクト付きボタンです。このボタ...
