基づく表記】ページ内のコンテンツには、商品プロモーションが含まれていますスタイルコード(CSSに記述するコード)で文字の大きさを指定するときなどに使う「em」と「rem」、理解して使いわけていますか?コピペで..というような参考ページのスタイルコードをそのまま貼り付けて「よし!」としていませんか?実は中に書かれている「em」「rem」には違いがあり、誤った使い方をしていると、自身の見ている環境以外ではとんでもないことになっているかも知れません。そこで本ページでは、私が理解している範囲での「em」と「rem」の違い、使い方をメモ代わりに公開しておきます。このページをご覧いただいて分かる通り、私はデザイナーではありませんし、特に「em」と「rem」にこだわりを持って使い分けているわけでもありませんので、詳しい情報はご自身でいろいろと探してみてください「em」と「rem」は基準となるサイズが異なる「em」はすぐ上の親要素の文字サイズを基準としてどの割合の大きさにするのかを相対値や割合で指定します。Chrome」ブラウザーでは基本となる文字サイズが16pxなので、1emは16pxとなります。その要素(子要素)を囲む要素(親要素)があり、そこに別の文字サイズが指定されている時は、親要素の文字サイズを1とした相対値や割合で計算されたものが文字サイズになるという仕様になっています。「rem」は表示しているブラウザーの基準文字サイズを1として相対値や割合で指定します。Chromeブラウザーでは基本となる文字サイズが16pxなので、1remは16pxとなり、その要素を囲む要素に文字サイズの指定があっても常に16pxに対する割合や相対値で計算された値になります。以下のようなHTMLとスタイルコードを使ってemとremで同じ0.5という相対値を指定した場合の表示の違いです。【HTML】emで0.5を指定した時の文字サイズemで0.5を指定した時の文字サイズ【スタイル】.sample-parent-div{font-size:30px;}.em-sample{font-size:0.5em;}.em-sample{font-size:0.5rem;}【ブラウザー上の表示】emで0.5を指定した時の文字サイズemで0.5を指定した時の文字サイズ親要素をあえて30pxと大きめにしているので、こうして実際に表示させてみると一目瞭然ですね。数字的には、emの場合は「30pxの半分」、remの場合はChromeブラウザなら「16pxの半分」になっています。従って、冒頭で紹介したようにどこかのコードをコピペした場合には、親要素によっては参考コードとまったく違う表示になってしまったり、関係なくうまく表示できたりするという現象が発生するのです。「em」と「rem」の使い分けの基準を言葉で表現すると以下のようにすればいいと思います。独立したコンテンツとして表現したい場合で、一番親となる要素に絶対値で文字サイズ指定されているのであれば子要素に「em」を使う上記の場合でなければ、ページ全体のバランスが取れる「rem」を使う平たく言えば、通常はremを使っておいて、ここだけ限定したいというところだけemを使うという感覚でよいのではないかと思います。ちなみにここで書いた通り、私はこのサイトでは基本的にremを使い、emで指定している部分はほぼありません(ひょっとするとWordPress本体やプラグインなどで意図的にemが使われているところがあることを除き、自身で追加したコードにはemはありません)。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。コメントをキャンセルメールアドレスが公開されることはありません。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。Monitorプラグインからの離脱方法メモ(ちょっと大変かも..)。