twemojiで、要素ごとに絵文字の大きさを分けたい

前提・実現したいこと

HTMLで趣味として、サイトを作ろうとしています
その中でデフォルトで表示されるOSやブラウザに依ったフォントではなくtwemojiを使って絵文字を統一させて表示させようとしていました

そして、本文とヘッダーのロゴで絵文字の大きさを変えたいのですが、うまく表示できません

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>テスト</title>
6    <link rel="stylesheet" href="style.css">
7    <script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
8  </head>
9
10  <body>
11
12      <div class="header">
13        <div class="header-logo">
14          ????
15        </div>
16      </div>
17
18    <div class="emoji">
19      <h1>
20        ????
21      </h1>
22      <h1>
23        ????
24      </h1>
25      <h1>
26        ????
27      </h1>
28    </div>
29
30    <script>
31        twemoji.parse(document.body, {"size":72});
32    </script>
33  </body>
34</html>
35

css
1img.emoji {
2  height: 50px;
3  width: 50px;
4  margin: 1em;
5  vertical-align: -0.1em;
6}
7
8.header {
9  height: 100px;
10  background-color: #6da6a4;
11}
12
13.header-logo {
14  height: 100px;
15  width: 100px;
16  margin: 10px 50px;
17}
18
19}

試したこと

CSSで .header や .header-logo のheight, width を変えてみた（変化なし）

行動規範の内容に同意します

回答2件

「font-size」で調整してみてください。
※CSSのセレクタ名は一部修正しています。

CSS
1.emoji h1 {
2  font-size: 〇〇〇;  /* ← 任意 */
3}
4
5.header-logo {
6  font-size: 〇〇〇;  /* ← 任意 */
7}

-追記-

font-size:20px

font-size:40px

CSS
1.emoji h1 {
2  height: 50px;
3  width: 50px;
4  margin: 1em;
5  vertical-align: -0.1em;
6  font-size: 40px;
7}
8
9.header {
10  height: 100px;
11  background-color: #6da6a4;
12}
13
14.header-logo {
15  height: 100px;
16  width: 100px;
17  margin: 10px 50px;
18  font-size: 40px;
19}

-追記2-

私の環境では、プロトコル（スキーマ）を付与しないと、読み込んでいなかったので、付与して確認しました。
質問者さんのご指摘どおりで、私の確認不足でした。
m( _ _ ;)m

セレクタの追加で対策可能かと思います。
※heightとwidthを、それぞれで設定してみてください。

CSS
1.header-logo img.emoji {  /* ← セレクタ追加 */
2  height: 50px;  
3  width: 50px;
4  margin: 1em;
5  vertical-align: -0.1em;
6}
7
8/* ↓もうひとつ作成↓ */
9h1 img.emoji {  /* ← セレクタ追加 */
10  height: 50px;
11  width: 50px;
12  margin: 1em;
13  vertical-align: -0.1em;
14}
15

投稿2019/03/31 09:08

編集2019/04/03 02:10

yoshinavi

総合スコア3523

k0w4r3

2019/03/31 10:25

無理っぽいです CSSの img.emoji を消し、.emoji, .header-logo にfont-sizeを指定しましたが、デフォルトの72pxのままで表示されます

yoshinavi

2019/03/31 10:39

追記しました。 CSSのセレクタ名は合っていますか？

k0w4r3

2019/03/31 12:23

うーん……うまくいきませんでした説明不足だったかもしれないので実現したいことの文を追加しました

yoshinavi

2019/03/31 12:30 編集

提示のコードだと、font-sizeを指定しない「デフォルト」でも「72px」には、なりません。

k0w4r3

2019/04/01 01:00

72pxになったのは上に載せていただいた点を修正して img.emoji を消してからですね twemojiのパースで72pxを指定してるのでそうなってます一番最初に載せたコードだと img.emoji のheight widthを50pxにしているので50pxで表示されてるはずです他不足している部分ありましたらご指摘お願いします

yoshinavi

2019/04/01 02:21

提示のコードではh1は32px、他は16pxで表示されます。

yoshinavi

2019/04/01 02:23

CSSの設定箇所が他にあるのではないのでしょうか？

k0w4r3

2019/04/02 05:28

HTMLでtwemojiのサイズを72pxに指定しているんですけどね… 回答者さんの載せた写真だとhttps://github.com/twitter/twemoji/tree/gh-pages/72x72 に載ってる以外のフォントだと思うのですがそちらではtwemojiは導入されているのでしょうか？

yoshinavi

2019/04/02 06:11

質問者さんのスクショを提示して貰えますか？

k0w4r3

2019/04/02 13:20

https://gyazo.com/e1d9ab0b723292116bc26d887cd85ee1 ↑ twemojiあり https://gyazo.com/38c451dafc044a4aa69a6ff2ca8ce01f ↑ twemoji なしです

yoshinavi

2019/04/03 02:11

私の確認不足でした。「-追記2-」としたので、確認してみてください。

k0w4r3

2019/04/03 13:42

詳しい回答ありがとうございます！ですが私の環境ではうまくいかなかった様子でした……

k0w4r3

2019/04/03 13:43

調べていたところ解決方法が載っていたので自己解決で下に載せときます！

行動規範の内容に同意します

自己解決

CSSに指定した img.emoji の height, width の単位を px ではなく em にし、
各要素にfont-sizeを指定する
コード（質問のコードに付け足して利用）

css
1img.emoji {
2  height: 1.0em;
3  width: 1.0em;
4  margin: 1em;
5  vertical-align: -0.1em;
6}
7
8.header-logo {
9  font-size: 50px;
10/*img,emoji で 1.0em と指定したので50pxで表示される*/
11
12.emoji {
13 font-size: 70px;
14/*img,emoji で 1.0em と指定したので70pxで表示される*/
15}

px以外にemがあることを失念していました…
回答をくださった方ありがとうございました！

投稿2019/04/03 13:52

k0w4r3

総合スコア10

yoshinavi

2019/04/03 14:59

この場合、widthとheightは、「1em=50px」であるため、直でwidthやheightに設定して効かないのは、何故ですかね？ 70pxの方は、詳細度から見ると効かない気がするんですが、記述位置は最終的にどのようになったのでしょうか？また、提示以外の部分で指定されてますか？ひょっとして、私の提示コードのサイズは両方同じ数値ですか？任意の数値に変えてありますか？ちょっと気になったので、しつこいと、思われるようであれば、返事は無くても良いです。 (^^;)

行動規範の内容に同意します

あなたの回答