表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

197/210

ionicでCSS変数を使う

ゲームブックでブックの枠をデザインする事で多少なりとも”雰囲気”を出そうとしているのですが、これ自体は


1.それぞれのデザインのCSSを用意する

2.AngularのngClassディレクティブを利用する


の2つで単純な例としては実装出来ました。


この連載の『ionic(angular)の画面デザインの動的変更』を参照ください。

https://ncode.syosetu.com/n5283hn/193/


しかし、これだけでは細かいカスタマイズ(もっと明るくしたいなど)には適していません。


そこで存在だけは知っていたCSS変数と言うものを使えないかと考えました。


CSS カスタムプロパティ(変数)の使用

https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties


しかし、どうもうまく行かないので(変数が存在しない時の挙動をする)調べて見ると、ionicでCSS変数を定義する場所が異なっていることが判明しました。


CSS変数

https://ionicframework.com/docs/ja/v6/theming/css-variables


結論を言うと、”src/theme/variables.scss”というファイル内で定義してやることで動作しました。


javascriptで変数の設定も動作するようです。(細かなテストはこれから)

https://ionicframework.com/docs/ja/v6/theming/css-variables#javascript%E3%81%A7%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9


ちょっと引っかかったのは、HTML要素に対して操作する事です。


最初、[ngClass]のクラス名に対して処理を行おうとしたのですが、”動的”なのであるエレメントがそのクラスを使用しているとは限らないためか、うまく動作しませんでした。


操作例は、以下のコードをご参照ください。

const el = document.querySelector('.fancy-button');

el.style.setProperty('--background', '#36454f');


評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ