スクロールした時に特定の要素だけ固定するには？方法についてまとめてみた！
【CSS入門】スクロール時に要素を固定するには？ positionプロパティの2つの指定方法を解説 Webサイトを閲覧していると、スクロールしてもヘッダーが常に画面の上部に表示されているサイトを見かけたことがあるのではないでしょうか。「自分のサイトにも取り入れてみたいけど、どうやって実装するのかわからない」「CSSだけでできるの？」そんな疑問をお持ちの方も多いと思います。 このような固定表示は、C […]
CATEGORY
WEB制作
position: sticky; の使い方と 注意点についてまとめてみた！
はじめに パララックス・追従ヘッダー・固定サイドバーに便利！ かつてはInternet Explorer（IE）非対応のため、position: sticky; を使うにはポリフィルを入れるか、position: fixed; で代用するしかありませんでした。しかし、IEのサポートが終了した今、stickyは安心して使えるプロパティになっています。 この記事では、position: sticky; […]
【コピペでOK】サイトに動きをつけるCSSアニメーションまとめてみた
【コピペで使える】CSSアニメーション実装まとめ（サンプルコード付き） 近年では、Webサイトに動きを加えるアニメーションの活用が一般的になりつつあります。中でも重要な要素に動きをつけることで、ユーザーの関心を引いたり、ページを飽きずに読み進めてもらうための工夫として有効です。 そこで本記事では、表現しづらい「動きのニュアンス」に焦点を当て、シンプル・ポップ・スタイリッシュ・柔らかい印象など、イメ […]
画像が横スクロールし続ける無限ループの作り方についてまとめてみた！
【CSSアニメーション】 画像が無限に横スクロールするループの作り方 Web制作において「何ができるのか」を知ることはとても大切です。ホームページを作る側も、依頼する側も、表現の幅を知ることでより魅力的でオリジナリティのあるサイトづくりが可能になります。 今回は「画像を横に無限スクロールさせるアニメーション」の作り方をご紹介します。 ■ Step 01：画像を右から左へ無限ループさせる まずは、画 […]
エックスサーバーのメール設定方法と使い方についてまとめてみた！
エックスサーバーのメール設定方法と活用ガイド この記事では、国内シェアNo.1のレンタルサーバー「エックスサーバー（Xserver）」が提供するメール機能について、設定方法と使い方を詳しくご紹介します。 エックスサーバーでは、独自ドメインのメールアドレスを簡単に作成できるため、初心者の方にも扱いやすいのが特長です。Mac・iPhone・Windowsなど、主要なデバイス別にメールソフトの設定手順を […]
ワードプレス Redirectionを使ったリダイレクト設定についてまとめてみた！
はじめに〜Redirectionのリダイレクトの設定〜 リダイレクトとは、、あるURLへのアクセスを別のURLに自動的に転送する仕組みです。 リダイレクトをする目的とは、サイトのURLを変更した場合、旧URLにアクセスしたユーザーを新しいURLに自動的に転送するためです。 Redirectionのリダイレクトの設定 Redirectionを使うことで、簡単にリダイレクトができ、リダイレクトの管理も […]
多言語翻訳プラグイン「GTranslate」の使い方について調べてみた！
多言語翻訳プラグイン「GTranslate」の使い方 WEBサイトを閲覧していて、「日本語に対応していなくて読みにくい……」と感じた経験はありませんか？実は、あなたのWEBサイトに訪れている外国の方も、同じように感じているかもしれません。 そんなときに便利なのが、多言語対応プラグインの導入です。WordPressサイトを手軽に多言語化できる方法として、プラグインの活用が非常に有効です。 多言語化を […]
Figma 画像のトリミングについて調べてみた！
画像のトリミングについて（Figma） Figmaでは、画像をトリミングすることで不要な周辺部分を非表示にし、必要な範囲だけを表示することができます。このトリミング処理は、あとから再調整することも可能で、カットされた部分の画像データ自体は削除されることはありません。 一度トリミングした画像でも、後から編集して表示範囲を変更することができます。 Figmaで画像をトリミングする手順 Figmaでは、 […]
ブログのアイキャッチ画像はテンプレート化するべき？調べてみた！
ブログに欠かせない「アイキャッチ画像」 「毎回アイキャッチ画像を作る時間がない…」 「おしゃれなデザインにしたいけど、毎回時間がかかる…」 そんな悩みを抱えている方は少なくありません。 そこで便利なのが、アイキャッチ画像のテンプレート化です。テンプレートを使えば、毎回ゼロからデザインを考える必要がなくなり、時短・デザインの統一感を両立することができます。 ただし、実際に大量のアイキャッチを作成して […]
Figma フォントの追加について調べてみた！
ここでは、Figmaのフォントの追加方法について説明していきます。 はじめに ✅ この機能を利用できるユーザー すべてのプランで利用可能 誰でもFigmaデザインにカスタムフォントを追加可能 📚 フォントの利用について Figmaでは、デフォルトでGoogle Fontsが組み込まれており、インストール不要でそのまま使用できます。しかし、Google Fonts以外の […]