お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    WordPressのスキルアップ!▶

    【CSS】WordPressでCSS変数(カスタムプロパティ)を使う方法|var(–name)

    WordPress(ワードプレス)
    この記事は約18分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    CSSのvar(–name)とは?

    WordPressのTwenty Twenty-One – WordPress テーマなどのCSSを見ていると、ところどころに、–global–color-background: #ffffff;といった記述がされています。

    ▶サンプルページはこちら
    https://css.eguweb.net/p014/

    :root {
        --global--color-background: #ffffff;
        --global--color-primary: #000;
        --global--color-secondary: #000;
        --button--color-background: #000;
        --button--color-text-hover: #000;
    }

    この、–global–color-primary: #000;、–global–font-size-page-title: var(–global–font-size-xxl);といった記述は一体?

    カスタムプロパティ(CSS 変数)

    カスタムプロパティ (CSS 変数やカスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、–main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(–main-color);) を使ってアクセスします。

    https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

    カスタムプロパティ(CSS 変数)を使うと、var() 関数を使って、事前に指定しておいた変数の値を呼び出して使うことができるようになります。

    Twenty Twenty-One の :root

    Twenty Twenty-One の:rootには、実に多くのカスタムプロパティ(CSS 変数)が設定されています。

    :root {
    
    	/* Font Family */
    	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    	--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    
    	/* Font Size */
    	--global--font-size-base: 1.25rem;
    	--global--font-size-xs: 1rem;
    	--global--font-size-sm: 1.125rem;
    	--global--font-size-md: 1.25rem;
    	--global--font-size-lg: 1.5rem;
    	--global--font-size-xl: 2.25rem;
    	--global--font-size-xxl: 4rem;
    	--global--font-size-xxxl: 5rem;
    	--global--font-size-page-title: var(--global--font-size-xxl);
    	--global--letter-spacing: normal;
    
    	/* Line Height */
    	--global--line-height-body: 1.7;
    	--global--line-height-heading: 1.3;
    	--global--line-height-page-title: 1.1;
    
    	/* Headings */
    	--heading--font-family: var(--global--font-primary);
    	--heading--font-size-h6: var(--global--font-size-xs);
    	--heading--font-size-h5: var(--global--font-size-sm);
    	--heading--font-size-h4: var(--global--font-size-lg);
    	--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
    	--heading--font-size-h2: var(--global--font-size-xl);
    	--heading--font-size-h1: var(--global--font-size-page-title);
    	--heading--letter-spacing-h6: 0.05em;
    	--heading--letter-spacing-h5: 0.05em;
    	--heading--letter-spacing-h4: var(--global--letter-spacing);
    	--heading--letter-spacing-h3: var(--global--letter-spacing);
    	--heading--letter-spacing-h2: var(--global--letter-spacing);
    	--heading--letter-spacing-h1: var(--global--letter-spacing);
    	--heading--line-height-h6: var(--global--line-height-heading);
    	--heading--line-height-h5: var(--global--line-height-heading);
    	--heading--line-height-h4: var(--global--line-height-heading);
    	--heading--line-height-h3: var(--global--line-height-heading);
    	--heading--line-height-h2: var(--global--line-height-heading);
    	--heading--line-height-h1: var(--global--line-height-page-title);
    	--heading--font-weight: normal;
    	--heading--font-weight-page-title: 300;
    	--heading--font-weight-strong: 600;
    
    	/* Block: Latest posts */
    	--latest-posts--title-font-family: var(--heading--font-family);
    	--latest-posts--title-font-size: var(--heading--font-size-h3);
    	--latest-posts--description-font-family: var(--global--font-secondary);
    	--latest-posts--description-font-size: var(--global--font-size-sm);
    	--list--font-family: var(--global--font-secondary);
    	--definition-term--font-family: var(--global--font-primary);
    
    	/* Colors */
    	--global--color-black: #000;
    	--global--color-dark-gray: #28303d;
    	--global--color-gray: #39414d;
    	--global--color-light-gray: #f0f0f0;
    	--global--color-green: #d1e4dd;
    	--global--color-blue: #d1dfe4;
    	--global--color-purple: #d1d1e4;
    	--global--color-red: #e4d1d1;
    	--global--color-orange: #e4dad1;
    	--global--color-yellow: #eeeadd;
    	--global--color-white: #fff;
    	--global--color-white-50: rgba(255, 255, 255, 0.5);
    	--global--color-white-90: rgba(255, 255, 255, 0.9);
    	--global--color-primary: var(--global--color-dark-gray);
    
    	/* Body text color, site title, footer text color. */
    	--global--color-secondary: var(--global--color-gray);
    
    	/* Headings */
    	--global--color-primary-hover: var(--global--color-primary);
    	--global--color-background: var(--global--color-green);
    
    	/* Mint, default body background */
    	--global--color-border: var(--global--color-primary);
    
    	/* Used for borders (separators) */
    
    	/* Spacing */
    	--global--spacing-unit: 20px;
    	--global--spacing-measure: unset;
    	--global--spacing-horizontal: 25px;
    	--global--spacing-vertical: 30px;
    
    	/* Elevation */
    	--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    
    	/* Forms */
    	--form--font-family: var(--global--font-secondary);
    	--form--font-size: var(--global--font-size-sm);
    	--form--line-height: var(--global--line-height-body);
    	--form--color-text: var(--global--color-dark-gray);
    	--form--color-ranged: var(--global--color-secondary);
    	--form--label-weight: 500;
    	--form--border-color: var(--global--color-secondary);
    	--form--border-width: 3px;
    	--form--border-radius: 0;
    	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
    
    	/* Cover block */
    	--cover--height: calc(15 * var(--global--spacing-vertical));
    	--cover--color-foreground: var(--global--color-white);
    	--cover--color-background: var(--global--color-black);
    
    	/* Buttons */
    	--button--color-text: var(--global--color-background);
    	--button--color-text-hover: var(--global--color-secondary);
    	--button--color-text-active: var(--global--color-secondary);
    	--button--color-background: var(--global--color-secondary);
    	--button--color-background-active: var(--global--color-background);
    	--button--font-family: var(--global--font-primary);
    	--button--font-size: var(--global--font-size-base);
    	--button--font-weight: 500;
    	--button--line-height: 1.5;
    	--button--border-width: 3px;
    	--button--border-radius: 0;
    	--button--padding-vertical: 15px;
    	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
    
    	/* entry */
    	--entry-header--color: var(--global--color-primary);
    	--entry-header--color-link: currentColor;
    	--entry-header--color-hover: var(--global--color-primary-hover);
    	--entry-header--color-focus: var(--global--color-secondary);
    	--entry-header--font-size: var(--heading--font-size-h2);
    	--entry-content--font-family: var(--global--font-secondary);
    	--entry-author-bio--font-family: var(--heading--font-family);
    	--entry-author-bio--font-size: var(--heading--font-size-h4);
    
    	/* Header */
    	--branding--color-text: var(--global--color-primary);
    	--branding--color-link: var(--global--color-primary);
    	--branding--color-link-hover: var(--global--color-secondary);
    	--branding--title--font-family: var(--global--font-primary);
    	--branding--title--font-size: var(--global--font-size-lg);
    	--branding--title--font-size-mobile: var(--heading--font-size-h4);
    	--branding--title--font-weight: normal;
    	--branding--title--text-transform: uppercase;
    	--branding--description--font-family: var(--global--font-secondary);
    	--branding--description--font-size: var(--global--font-size-sm);
    	--branding--description--font-family: var(--global--font-secondary);
    	--branding--logo--max-width: 300px;
    	--branding--logo--max-height: 100px;
    	--branding--logo--max-width-mobile: 96px;
    	--branding--logo--max-height-mobile: 96px;
    
    	/* Main navigation */
    	--primary-nav--font-family: var(--global--font-secondary);
    	--primary-nav--font-family-mobile: var(--global--font-primary);
    	--primary-nav--font-size: var(--global--font-size-md);
    	--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
    	--primary-nav--font-size-mobile: var(--global--font-size-sm);
    	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
    	--primary-nav--font-size-button: var(--global--font-size-xs);
    	--primary-nav--font-style: normal;
    	--primary-nav--font-style-sub-menu-mobile: normal;
    	--primary-nav--font-weight: normal;
    	--primary-nav--font-weight-button: 500;
    	--primary-nav--color-link: var(--global--color-primary);
    	--primary-nav--color-link-hover: var(--global--color-primary-hover);
    	--primary-nav--color-text: var(--global--color-primary);
    	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
    	--primary-nav--border-color: var(--global--color-primary);
    
    	/* Pagination */
    	--pagination--color-text: var(--global--color-primary);
    	--pagination--color-link-hover: var(--global--color-primary-hover);
    	--pagination--font-family: var(--global--font-secondary);
    	--pagination--font-size: var(--global--font-size-lg);
    	--pagination--font-weight: normal;
    	--pagination--font-weight-strong: 600;
    
    	/* Footer */
    	--footer--color-text: var(--global--color-primary);
    	--footer--color-link: var(--global--color-primary);
    	--footer--color-link-hover: var(--global--color-primary-hover);
    	--footer--font-family: var(--global--font-primary);
    	--footer--font-size: var(--global--font-size-sm);
    
    	/* Block: Pull quote */
    	--pullquote--font-family: var(--global--font-primary);
    	--pullquote--font-size: var(--heading--font-size-h3);
    	--pullquote--font-style: normal;
    	--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
    	--pullquote--line-height: var(--global--line-height-heading);
    	--pullquote--border-width: 3px;
    	--pullquote--border-color: var(--global--color-primary);
    	--pullquote--color-foreground: var(--global--color-primary);
    	--pullquote--color-background: var(--global--color-background);
    	--quote--font-family: var(--global--font-secondary);
    	--quote--font-size: var(--global--font-size-md);
    	--quote--font-size-large: var(--global--font-size-xl);
    	--quote--font-style: normal;
    	--quote--font-weight: 700;
    	--quote--font-weight-strong: bolder;
    	--quote--font-style-large: normal;
    	--quote--font-style-cite: normal;
    	--quote--line-height: var(--global--line-height-body);
    	--quote--line-height-large: 1.35;
    	--separator--border-color: var(--global--color-border);
    	--separator--height: 1px;
    
    	/* Block: Table */
    	--table--stripes-border-color: var(--global--color-light-gray);
    	--table--stripes-background-color: var(--global--color-light-gray);
    	--table--has-background-text-color: var(--global--color-dark-gray);
    
    	/* Widgets */
    	--widget--line-height-list: 1.9;
    	--widget--line-height-title: 1.4;
    	--widget--font-weight-title: 700;
    	--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
    
    	/* Admin-bar height */
    	--global--admin-bar--height: 0px;
    }

    カスタムプロパティの呼び出し例

    このようにして各所で呼び出しています。

    .wp-block-cover,
    .wp-block-cover-image {
    	background-color: var(--cover--color-background);
    	min-height: var(--cover--height);
    ・・・

    まとめ

    よく使うCSSの設定やプロパティは「カスタムプロパティ(CSS 変数)」としてまとめておくと便利です。

    具体的な使い方などについては、また次回あたりでお伝えしたいと思います!

    メンティー
    メンティー

    「カスタムプロパティ(CSS 変数)」ですね!

    メンター
    メンター

    ぜひ使えるようになってみましょう!

    ご参考ください😃

    ▶サンプルページはこちら
    https://css.eguweb.net/p014/

    タイトルとURLをコピーしました