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

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

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

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1012閲覧

ionic4でのhtmlからscssの使い方

Hyonta

総合スコア36

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/02/06 10:27

編集2020/02/06 10:28

直接htmlにスタイルを記述した場合はスタイルは適用されますが、
以下のようにhtmlでclassを記述した場合はscssに記載したスタイルが適用されません。
ionic3の時は以下の記載でもよかったのですが、なにが問題でしょうか。
global.scssやvariables.scssも関連しているでしょうか。
もしくはscssの記述に問題が?

login.page.ts

.. @Component({ selector: 'page-login', templateUrl: 'login.page.html', styleUrls: ['login.page.scss'], providers: [CustomNativeStorage] }) ..

login.page.html

<ion-content> .. <div class="welcome_text"> <h4>WELCOME_TEXT</h4> </div> .. </ion-content>

login.page.scss

page-login { .welcome_text{ margin-top: 50px; color: white; text-align: center; } .. }

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

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

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

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

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

guest

回答1

0

自己解決

SCSSの中でselecterの指定はいらなかったみたいです。

元の記述

scss

1page-login { 2 .welcome_text{ 3 margin-top: 50px; 4 color: white; 5 text-align: center; 6 } 7.. 8}

新しい記述

scss

1.welcome_text{ 2 margin-top: 50px; 3 color: white; 4 text-align: center; 5 }

投稿2020/02/07 01:24

Hyonta

総合スコア36

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問