CSS・デザイン– category –
-
CSS・デザイン
【WordPress】いろんなCSSアニメーションを取り入れてみました(導入手順とコピペ用コードも)
訪問ありがとうございます。 今回の記事は以前紹介したCSSアニメーションを使って自分のサイトに取り入れたアニメーションの紹介とそのコードをコピペで使えるように載せておきました。 シンプルな動きなのでご自身のサイトにアレンジして使っていだけたら... -
CSS・デザイン
【cording】“calc()”—数値を計算する関数—
calc()は、CSSで数値を計算するための関数です。この関数を使用することで、異なる単位や値を組み合わせて動的に計算した結果をスタイルに適用することができます。特にレスポンシブデザインやレイアウト調整に役立ちます。 calcのイメージ 使用方法 calc(... -
CSS・デザイン
【cording】「@keyframes」「animation」でCSSアニメーションする
訪問ありがとうございます。 このページでは動きのあるWebサイトを構成する際に使うCSSアニメーションの全体イメージと基本的な使い方を備忘録の意味も兼ねてまとめたページです。 これから「CSSアニメーションを使ってみよう!」と思われた方に参考になれ... -
CSS・デザイン
【cording】vw・vh(ビューポート)と%の違い
ページテーマ CSSの「100vw」と「100%」の違いをスッキリさせる CSSにおけるビューポートとパーセントの違いについて説明します。 ビューポート (Viewport) ビューポートは、ウェブページが表示されるブラウザの表示領域を指します。 ビューポートのサイズ... -
CSS・デザイン
【CSS】「pointer-events:none」でaタグのリンクを無効にする
閲覧ありがとうございます。 ページテーマ CSSの「pointer-events:none」でaタグのリンクを無効にする HTMLの記述を変更せずにリンクを無効にしたい WordpressでカスタムCSSの記述でリンクを無効にできないの? そんな問題解決につながれば嬉しいです。 【... -
CSS・デザイン
【WordPress】子テーマでhead内にタグなどを反映させる方法
閲覧ありがとうございます。 ページテーマ 【Wordpress】子テーマでhead内に計測タグなどを反映させる そもそも計測タグを/headの直前に入れるってなに? 意味は解るけどどうしたらいいの? プラグインを使わずに反映させるにはどうしたらいい? グーグル... -
CSS・デザイン
【WordPress】gif画像を使って動的にイメージを伝える方法
閲覧ありがとうございます。 ページテーマ 【Wordpress】gif画像を使って動的にイメージを伝える 動画を入れたいけどページが重くなるのは困る 画像じゃ伝わらないんだよな… そんな問題解決につながれば嬉しいです。 gifなら効果的にイメージを伝えられる ... -
CSS・デザイン
【コーディング】CSS ど忘れコードまとめ
閲覧ありがとうございます。 ページテーマ CSSを書いていて“あのコードは何だっけ?”をまとめました ん、あのコードどうやって書くんだっけ? コードの記述順、何が先だっけ? そんな問題解決につながれば嬉しいです。 各名称 .selector{ property: value;... -
CSS・デザイン
【コーディング】display: grid; を整理します
閲覧ありがとうございます。 ページテーマ CSS 【display: grid;】 を整理する gridってどうやって使うんだっけ? flexとの使い分けができないかな? もっとコードがシンプルにならないかな? そんな問題解決につながれば嬉しいです。 レスポンシブ対応を... -
CSS・デザイン
【WordPress】使いたいフォントを読み込んで使う方法
閲覧ありがとうございます。 ページテーマ Wordpressにもともと入っていないフォントを呼び出して使う方法 フォントファミリーを指定したのに変わらない フォントの呼び出し方がわからない wpに含まれていないフォントをプラグイン無しで使いたい そんな問...