追記 回避方法を探ってみると、© の文字実体参照は 3 種類あることがわかりました。左からⓒ Ⓒ © で表示させたものです! この3種類は著作権マークがフォントや文字セットで利用できない場合のために作られたものらしく、意味は同じなようです。 サイズもCの感じも微妙に違いますよね? その他IEバグ IEだけmainタグが認識されない. CSS 変数とは、正式には「カスケード変数のための CSS カスタムプロパティ (CSS custom properties for cascading variables)」と定義されています。従来の CSS では、変数は Sass や LESS のような CSS プリプロセッサを使わなければ利用できませんでしたが、多くのブラウザでサポートされたことにより利用可能になりました。ただし、Internet Explorer など一部のブラウザは対応していません。また、Edge はサポートしていますが、バグが多発している報告があるため、クロスブラウザでテストする場合は注意が必要です。もしも非対応ブラウザも含めてサポートする場合、後述する @supports ブロックを使う方法があります。, 今まで CSS は変数が使えなかったため、サイズや色などのプロパティ値をそれぞれのセレクタに直接定義していました。そのため何かを変更するための修正コストが大きく、メンテナンス性が悪い問題点がありました。特にチーム開発など、複数人で CSS をメンテナンスしている場合、CSS 自体が破綻する原因にもなっていました。, CSS 変数は、それらの問題点を改善するための仕様です。最初に CSS 変数にプロパティ値を定義すれば、それぞれのセレクタには変数を設定するだけで値が適用されるようになります。変数を定義、および使用するルールとしては、以下のとおりです。, var() 関数 は変数が未定義であった場合に備えて、第二引数にフォールバック値も設定できます。ただし上記の例のとおり、フォールバック値は省略が可能です。下記の例は、--color-red が未定義である場合、blue にフォールバックされます。, CSS 変数には、CSS と同じようにプロパティ値を設定できるため、単位ありの数値、単位なしの数値、文字列などが設定できます。下記のようにマスターとなる値を定義しておけば、将来的に変更になった場合でも適用しているすべてのセレクタを修正する必要はなく、:root に定義された変数のみ修正すれば良いことになります。, 更に CSS 変数は CSS 変数を使って定義することも可能です。下記の例は、赤色と青色のグラデーションを実現するために CSS 変数を使用しています。, CSS 変数は別の値が設定された場合、要素の子要素は新しい値を継承します。CSS は他のセレクタでも値の変更が可能であり、変更された場合は対象の要素の子要素は新しい値を継承します。これは、CSS 変数のスコープに関係しています。:root で定義された変数はグローバルなスコープになり、他のセレクタで変更された場合は対象の要素の子要素はローカルなスコープになります。, CSS 変数は、Javascript でも getPropertyValue を指定することで変数の値を取得できます。, Javascript から CSS 変数の値を変更するには以下のように設定します。, CSS 変数が非対応ブラウザを含めたクロスブラウザ対応を行う場合、@supports ブロックを使って回避する方法があります。@supports ブロックとは、CSS の機能をサポートしているかどうかを判別するための機能クエリです。以下の例では、非対応ブラウザが @supports ブロックをサポートしているかどうか判別しています。また、var() 関数にフォールバック値を設定しておけば安全性が高まり、レガシーブラウザにも対応できます。以下の例で sectionの要素は、CSS 変数が対応しているモダンブラウザの場合は青色文字になり、非対応のレガシーブラウザでは灰色文字になります。, CSS 変数の仕様は、あくまでも今までの問題の改善であり解決ではない点に注意してください。どのような場合においても、これらの機能に頼りすぎて複雑化すれば CSS 全体が破綻してしまうリスクはなくなっていません。CSS 変数はこれまでのメンテナンスに選択肢が増えただけに過ぎず、どのように CSS を管理していくかが重要になります。, calc() 関数とは、CSS で数学演算を行うことができる関数で、標準的なブラウザはすべてサポートしています。calc() 関数では以下のように異なる単位での四則演算が可能です。, Sass や LESS などの CSS プリプロセッサでも値の計算は行なえますが、calc() 関数とは根本的にことなります。CSS プリプロセッサの計算された値はブラウザに依存しない静的な値であるのに対して、calc() 関数はブラウザ依存の動的な値です。つまり、画面のリサイズによって Viewport が変更されても再計算により追従することができます。もしも CSS プリプロセッサで単位の異なる値を calc() 関数として出力する場合は、以下のようになります。, calc() 関数はサイズ、幅、高さ、角度、時間など、何かしらの単位が必要なプロパティ値に利用できます。ただし、演算子の前後はスペースで区切らなければ有効にならないため注意が必要です。, calc() 関数は、特にレスポンシブデザインにおいて効果を発揮します。例えば、2 カラム構成でサブコンテンツの width は 300px 必要で、残りはメインコンテンツにしたい場合、以下のように指定できます。, CSS 変数と calc() 関数を組み合わせることで、より柔軟な計算ができるようになります。例えば、CSS 変数で定義した値のマイナス値が欲しい場合、以下のような方法になります。, 上記の方法では、CSS 変数で定義されたマイナス値を取得するために calc() 関数で -1 を掛けています。CSS 変数は少し使いにくい点はありますが、calc() 関数を組み合わせることで今まで取得できなかった値を取得できることになります。アイデア次第では CSS 変数と calc() 関数を組み合わせることで、多くのレシピを生み出すことができます。, Can I use... Support tables for HTML5, CSS3, etc. CSSハックとは各ブラウザごとでCSSの実装状況やバグの影響で表示が崩れてしまう時に、特定のブラウザのみにCSSの指定ができるテクニックです。ここではWindows10から登場したEdge(エッジ)を含めChrome、Firefox、Safari、IEの5つ主要ブラウザを中心にCSSハックの方法をご紹介します。 CSS.

W3C仕様書より, 変数にプロジェクトに関連した分かりやすい名前をつけることにより、コードの管理やメンテナンスがしやすくなります。プロジェクトで原色を編集する場合、CSSカスタムプロパティ--primary-colorの値を変更すればよく、すべての場所のCSSプロパティの値を変更する必要はなくなるのです。, Webサイトのスタイリングで変数の持つ柔軟性を利用する方法は、SassやLessといったプリプロセッサーの活用です。, プリプロセッサーで変数を設定すると、関数やループ、算術演算などで使えます。CSS変数に大きなメリットはないのでしょうか?, そうとは言えません。CSS変数にはプリプロセッサーで変数を設定するとは違った面がいくつかあります。, CSS変数がブラウザーで実行する動的なCSSプロパティなのに対し、プリプロセッサーの変数はCSSコードにコンパイルされるためブラウザーは関与しません。, つまり、スタイルシートドキュメント内のCSS変数は、インラインスタイル属性やSVGのプレゼンテーション属性で変更したり、JavaScriptで選択、操作したりできるのです。可能性が無限に広がります。プリプロセッサーの変数では実現できません。, CSS変数かプロセッサーの変数か、選ぶ必要はありません。CSS変数とプリプロセッサーの変数、両方とも利用しない手はないでしょう。, 分かりやすくするために「CSS変数(CSS variables)」と呼んでいますが、公式では「カスケード変数のためのCSSカスタムプロパティ(CSS custom properties for cascading variables)」としています。CSSカスタムプロパティ部分のコードは以下の通りです。, カスタムプロパティは冒頭にハイフンを2つ記述し、通常のCSSプロパティと同様に値を設定します。上のスニペットでは、カラー値にカスタムプロパティ--my-cool-backgroundを設定しました。, カスタムプロパティのスコープはCSSセレクタ内です。var()はCSSプロパティの実際の値として使えます。, 上のスニペットで、カスタムプロパティ--my-cool-backgroundのスコープは疑似クラス:rootで、値はグローバルに利用できます(つまり 要素内のすべてに適用できます)。これでID fooをもつコンテナのbackground-colorプロパティにvar()関数で値を適用でき、背景色がライトブルーになります。, さらに、var(--my-cool-background)を使ってカスタムプロパティ値を取得し、CSSプロパティに適用するだけで、ライトブルーのカラー値をcolor、border-colorといった複数のHTML要素のカラープロパティに設定できます。ただし、複雑化しないうちにCSS変数の命名規則を決めることをおすすめします。, 上のスニペットでは変数--my-gradientを作成し、値を変数--top-colorと--bottom-color双方で設定してグラデーションを実現しています。これで変数の値を変更すれば、グラデーションを修正できます。スタイルシート全体からグラデーションインスタンスをすべてピックアップする必要はないのです。, 上のスニペットでは「#333」がフォールバック値です。フォールバック値を記述しないと、カスタムプロパティが無効だったり設定されていなかったりすると、代わりに継承値が適用されます。, たとえば、var(--foo)とvar(--FOO)は別のカスタムプロパティを参照します。, 通常のCSSプロパティと同様、CSS変数は継承されます。カスタムプロパティを定義し、値をblueとします。, ルート要素内で変数--main-colorが適用された要素はすべて値としてblueを継承します。, ほかの要素内でカスタムプロパティに別の値が新しく設定された場合、要素の子要素はすべて新しい値を継承します。以下に例を示します。, 上のマークアップの最初の段落はグローバル変数--main-colorから値を継承し、カラーは青になります。, .alertクラスのdiv内の段落のカラーは、ローカルにスコープ指定された変数--main-colorから値を継承しているため、--main-colorの値の赤になります。, CSS変数とSVGの相性は抜群です。CSS変数を使って、インラインSVG内のスタイルとプレゼンテーション属性の双方を変更できます。, アイコンが配置された親コンテナごとにSVGアイコンのカラーを変更します。変数のスコープを親コンテナに限定し、それぞれに希望の色を設定すると、各コンテナのアイコンは親コンテナの色を継承します。, 上のマークアップではタグで、SVG画像を非表示にします。続いてタグで画像を表示します。この方法では要素のIDを使って(#close-icon)参照するだけで、アイコンを複数作成でき、それぞれカスタマイズできます。画像の数だけコードを繰り返し記述するより便利です。詳しくは、Build Your Own SVG Icons(オリジナルのSVGアイコン作成)が参考になります。, SVGの「symbol」要素の「circle」要素内、strokeプロパティの値と「text」要素内のfillプロパティの値を見てください。どちらもCSS変数--icon-colorが適用されています。このCSS変数はCSSドキュメント内の:rootセレクタで定義しています。, SVGアイコンを複数のコンテナ要素内に配置し、変数を個々の親要素のセレクタ内にローカル化して別のカラー値を設定すると、スタイルルールを追加しなくてもアイコンの色を変えられます。, .successセレクタ内で値にgreenを設定すると変数--icon-colorをローカル化し、結果を確認します。, CSS変数は、通常のHTML要素やインラインSVG要素のCSSアニメーションにも使えます。アニメーションの要素を、ターゲットとするセレクタ内でカスタムプロパティを定義して@keyframesブロック内で関数var()を使ってカスタムプロパティを参照するだけです。, SVG画像内で.bubbleクラスの要素をアニメーションしてみましょう。, CSSのcalc()を使って関数var()と計算しています。コードの柔軟性がさらに向上します。, この場合、CSS変数を使うメリットは、適切なセレクタ内で変数の値を変更するだけでアニメーションを微調整できることです。@keyframesで指定したすべての部分に含まれるプロパティを探し出す必要はないのです。, 値が100px、スコープはCSSドキュメント内の.sidebarクラスのCSS変数--left-posがあるとします。, 上のスニペットでは、サイドバー要素用の変数--left-posの値を200pxに設定しています。, CSS変数でWebページにインタラクティビティを持たせる方が、状況に応じて多くのクラスを切り替えたり、CSSルール全体を繰り返し記述したりするよりずっと簡単でメンテナンス性が向上します。, 次のデモを確認してください。CSS変数とJavaScriptだけでインタラクティブにサイドバーを切り替えたり、blend modeプロパティや背景色を変更したりできます。, 執筆時点で、IE11(非対応)とMicrosoft Edge(対応しているがバグが多発)を除き、主要ブラウザーはCSS変数に対応しています。, 対応していないブラウザーを考慮に入れるなら、ダミー条件クエリで@supportsブロックを使いコードを書く方法があります。, IEやEdgeが@supportsに対応していればこれでOKです。さらに関数var()内のフォールバック値を使えば安全性が高まり、低機能ブラウザーにも柔軟に対応できます。, ChromeをはじめとするCSS変数対応ブラウザーでは、
要素内のテキストは青になります。, CSS変数を使っても、非対応ブラウザーが主流のプロジェクトでは、コードが複雑になり、メンテナンスがちょっとした悪夢になるデメリットがあります。, その場合は、PostCSSでcssnextで、CSSコードを非対応ブラウザー用に変換します(JavaScriptのトランスパイラーのようなイメージです)。, ブラウザー対応に関する回避策やおもしろい用途を、CSS変数全般を詳しく知りたい人は、以下の資料を参考にしてください。, (原文:A Practical Guide to CSS Variables (Custom Properties)), SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。フロントエンドのプログラミング指導方法にも興味を持ち、WebのコーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。, 進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。, Build Your Own SVG Icons(オリジナルのSVGアイコン作成), A Practical Guide to CSS Variables (Custom Properties). SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin(ミックスイン)、loop(ループ)などCSSコーディングに動的な機能を追加すると、繰り返し処理を最小限にし、開発時間を短縮できます。, CSSの一部として動的な機能がいくつか登場しています。CSS変数(CSS variables:カスタムプロパティ)はブラウザーの対応状況もとてもよく、すでに利用可能です。「CSS版mixin」は準備段階です。, この記事では、CSS開発ワークフローにCSS変数を組み入れる方法を紹介します。スタイルシートのメンテナンス性が向上し、DRYの原則(繰り返しを避けること)に沿ったスタイルシートを実現します。, プログラミング言語を使った経験がある人にとって、変数のコンセプトはおなじみでしょう。変数にはプログラムの動作に必要な値を格納します。変数の値は更新可能です。, 2つの変数「number1」と「number2」があり、数値「2」と「3」が格納されています。, totalも変数で、number1とnumber2の合計「5」が格納されています。変数の値は動的に変更でき、プログラム内の任意の場所で更新された値を使えます。上のスニペットでは、number1の値を4に変更したのち同じ変数(number1とnumber2)を使い、加算しています。結果、格納された数字がtotalが5から7に変わりました。, 変数のメリットは、値を格納したあと用途に応じて値を変更できることです。別の変数をもつ新しいエンティティをプログラムの各所に追加する必要はありません。値の変更はすべて同じ変数で実行します。, CSSは動的な機能を持たない宣言型言語です。CSSに変数が登場すると、理論ずくめで考える人はフロントエンド開発の定義が覆るじゃないかと感じるかもしれませんね。Web関連の技術は生きもののように、取り巻く環境や開発現場のニーズに応じて発展、適応します。CSSも例外ではありません。, 変数はCSSの世界で注目され、発展し、現実になったのです。このすばらしい新技術をマスターして使いこなすのはとても簡単です。, CSSで変数を使うメリットは、ほかのプログラム言語で変数を使うのと大きな違いはありません。, CSS変数を使うことで、無意味に見える値に分かりやすい名前をつけられるため、サイズの大きいファイルの読み取りが容易になります。値の変更はカスタムプロパティ(CSS変数)で1回すればよく、変更はその変数が使われている箇所すべてに伝わります。ファイルの編集が簡単になり、エラーも少なくなります。 暖かくなったらどっか旅行へ行きたい。。。。. squareBox /* margin 30px */ width: calc(100 vmin - 60px) height: calc(100 vmin - 60px) 参考: css3でレスポンシブな正方形を作る - Qiita. css height (5) ... IE10とIE11のフレックスボックスプロパティのサポートはバグがあり、IE9以下はサポートが全くないことに注意することが重要です。 ... 私はちょうど私が持っていたこの問題を解決するcss calc()を考え出しました。 CSSのコーディングを行っていて、iPhoneだけ表示が思った通りにならないことも多いかと思います。今回はiPhoneのブラウザのみで発生する3つの事例と対策を紹介いたします。 web関連から趣味の記事を書いていきたい お好みのものを使用してください!


css(とdhtml)のバグ報告、お待ちしてます。 ※報告の際はOS・ブラウザ名とそのヴァージョンを明記して下さい。 再現条件をつきとめるため、必要に応じてソースを出して下さい。 Microsoft Edgeを触ってみて、EdgeのCSSのバグ?仕様?なものに気づいた。 CSSの書き方の問題もあるのでバグと言い切るには微妙で、仕様にしては「えー?」となる問題だったので、気づいたこととしてとりあえず書いておきます。