質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

992閲覧

cssのremの使い方について

keisuke.F

総合スコア19

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/30 02:12

お世話になっております。

現在、チームでWeb制作をしています。
その中で、
height: rem(900);

というような、cssの当て方を見かけました。
これは、900remとは違うのでしょうか?
特殊な書き方な気がするのですが...。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hallen0225

2021/06/30 02:24

通常のCSSの記法ではないと思うので、プリプロセッサーなど何かのツールを併用されているのだと思いますが、そのチームの方に質問されてはいかがでしょうか?? 900remというサイズは、恐らく通常の画面では表示しきれないので、違うのだとは思います。
K_3578

2021/06/30 02:28

それ書いた人に聞いた方が早いと思う。 少なくとも通常の記法ではない
m.ts10806

2021/06/30 04:02

ぐぐると関数表記法のページに辿り着きますが、調べて何も出ませんか?
hallen0225

2021/06/30 06:37 編集

m.ts10806様 関数表記法のrem関数は、2つの引数(px数など)を渡してその余りを返すもので、CSS Values and Units Module Level 4(草案段階)のものです。こちらで把握している限り、現在実装されているブラウザはありません。 "rem()"などで検索して出てきたのだと思いますが、正しい情報とは言えないのではないでしょうか??
guest

回答2

0

cssのrem()関数は、まだWorkingDraft(草案)としてしか存在していない、これから実装されるかもしれないcss関数のうちの1つです。

原文:
https://drafts.csswg.org/css-values-4/#round-func
日本語訳:
https://triple-underscore.github.io/css-values-ja.html#round-func

草案によると、rem関数は2引数の関数で、第1引数を第2に引数で割った余りを返します。この際、返値の符号が第1引数の符号に依存する(mod関数と逆の動作になる)ことになる、とのことです。

ということで、もし質問文のremが本当にrem関数のことであれば、

  • まだどのブラウザでもサポートされていない草案段階の関数をあえて使っている
  • 引数の数が合わない

という2重の間違いを犯していることになります。この状況を鑑みると、本実装された関数のつもりで記載しているとはとても考えられません。
単位のremをよく理解しないまま使用していると考えるのが妥当だと思われます(900remという大きな値を要素のheightに与える必然性がどこにあるのかも疑問です)。

なお、Can I Use でもまだ出てきません。
https://caniuse.com/?search=css%20rem()

最新のChomeバージョン(91.0.4472.114※)で試してみましたが ivalid property valueでした。
イメージ説明

※微妙に最新ではありませんでした。2021/6/30現在では新しいバージョンが出ています。

※既にBAがついていますが、この質問作成時点(2021/6/30)ではまた実装されていない要素ということを明示するため、あえて回答しています。

投稿2021/06/30 10:54

編集2021/06/30 10:56
hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

みなさん、ありがとうございます。
関数表記法でした。

cssにも関数が存在するんですね。勉強になりました。

ありがとうございました!

投稿2021/06/30 06:07

keisuke.F

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hallen0225

2021/06/30 06:23 編集

関数表記法のrem()だとしたら、使い方も違いますし、今現在使えるブラウザが存在しないと思うのですが…??(CSSに追加される予定の新要素であって、今現在使えるものではありません) 早とちりされてはいらっしゃらないでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問