CSSプロパティにjQuery以外の方法で変数を代入する方法。

最近react-nativeを触っていて、ふと疑問に思ったことがありました。

軽く自己紹介をすると、プログラマ歴６ヶ月ないくらいなので、私の知識不足の質問かもしれません。自分で調べられる限り調べて、答えが見つからなかったので、ご存知の方がいたら教えてください。
また、そもそもjQueryは存在をふわっとしか知らないため、jQueryに対する認識が間違っていたらすいません。

reactjsのHTMLタグにstyleを指定するときの話です。

react-nativeではanimatedやinterpolateを用いて、宣言した変数をCSSプロパティに代入できました。
reactjsでこのようなCSSの指定方法を見かけなかったので、自分としては、react-native的な指定方法ができる方がわかりやすかったので、reactjsでもできるのか気になった次第です。

本題に入ります。

例えば、windowサイズをgetWindowSizeしたとして、適当なstateにsetしておきます。
画面幅を取得し、画面幅の４０％のdivの幅を常に得たいと思った時に、

js
1~~~~
2
3this.setState({size:width})
4
5~~~~
6
7<div style={{width:'(this.state.size*0.4)'}}>
8</div>

現時点でコードは間違っていると思いますが、イメージとして、このようにできた方が便利だと僕は思います。
このようなCSSの指定の仕方は存在するでしょうか？
似たようなものでも構いません。

kei344

2018/02/17 04:45

「native」とは何でしょう。

MOTOMUR

2018/02/17 04:56

ごめんなさい。直しますね。react-nativeのことです。

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

回答1件

ベストアンサー

reactは触っていないので、意図が違うかもしれませんが、CSSで「画面幅の４０％のdivの幅を常に得たい」というのは「40vw」と指定すればよいです。

【レスポンシブに便利なCSSのvh/vw/vmin/vmaxの基本と使い方とは - WPJ】
https://www.webprofessional.jp/css-viewport-units-quick-start/

一応変数もあります。

【Web制作がめっちゃ捗る！CSS変数の基礎と実践テクニック - WPJ】
https://www.webprofessional.jp/practical-guide-css-variables-custom-properties/

【CSS Variables(カスタムプロパティ)でCSSがより便利に！ - Qiita】
https://qiita.com/kyota/items/bd5d291809415cc2d7b1

一応計算もできます。

【[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス】
http://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

投稿2018/02/17 05:02

kei344

総合スコア69398

MOTOMUR

2018/02/17 07:01 編集

丁寧な回答ありがとうございます！試行錯誤してみます。下記追記します。

MOTOMUR

2018/02/17 07:01 編集

最後のURLが見れないです！viewport便利ですね！存在を知らなかったです、ありがとうございます。ところで、CSSのプロパティを条件分岐で変えるのは@mediaでするしかないですかね？ width:(this.state.width<=500) ? 80vw : 40vw のようにできると自分としては使いやすいです。このようなことって可能でしょうか？