ionicを試す ３日目 文字のスタイルを変更する
今回は前回入力した文字に色々な変更を加えたいと思います。
前回表示された文字列の色が薄い灰色だったことが気になる方も居るかもしれません。
まず、この修正を行いたいと思います。
VisualStudioCodeを立ち上げてください。
前回、最後に作業した状態が残されていると思います。
他のものが表示されているならば、すべて閉じ、改めて"C:\MyTest\test000"フォルダを開いて下さい。
左側のエクスプローラから、以下の2つのファイルを開いて下さい。
・"src\app\home\home.page.html"
・"src\app\home\home.page.scss"
上の"src\app\home\home.page.html"は、前回、”初めてのionic”と書いたファイルですね。
下の"src\app\home\home.page.scss"は、スタイルを変更する"CSS"ファイルと同様のファイルです。
そこの"#container p"の記述に、"color: #8c8c8c;"と書いて有るのが文字列の色が灰色だった原因です。
("#container p"は、id="container"タグ内の<P>タグのスタイル設定を意味します。)
colorの横に、色のついた四角がありますが、こちらをクリックすると色見本が出ます。
しかし、今回は直接値を変更しましょう。
#8c8c8c → #000000
cssの色の表示形式は複数あります。主要な色ならば例えば"black"でも有効です。
色だけでなく文字の大きさも変更してみましょう。
------------------------------------------
#container p {
font-size: 100px;
line-height: 1.5;
color: black;
margin: 0;
}
------------------------------------------
(css関係の説明は割愛します)
もしコマンドプロンプトから"ionic serve"が起動されていなければ、カレントディレクトリを"C:\MyTest\test000"に変更した上で、"ionic serve"でブラウザを立ち上げてください。
（なお、起動しているならばファイルを変更すると、ブラウザの内容も自動的に変わります)
かなりインパクトのある表示になりました。
かなり短いですが今回はここまで
