Chrome Extention "Krafty"を公開しました。

開いているWebページのmeta情報やaltの確認、HTMLのネストの検証、要素のアウトラインの確認などができます。
マークアップエンジニアの方や、ディレクターの方には便利につかっていただけると思います。

名前は、New Orderのアルバムからいただきました。

ストア公開の申請時に、この拡張機能の使用にはホスト権限が必要なので、審査にかなり時間がかかると脅かされましたが、2日ほどで公開されました。
Googleさんありがとうございます。

Chrome Webstore
GitHub

機能紹介

Kraftyの4つの機能をご紹介します。

Head Checker

meta情報などを、ソースを開かずに確認できる機能です。
お客さんや一部ディレクターやなどソースを見るのに抵抗がある方や、コーディング時の漏れチェックのための機能です。

Nest Checker

タグのネストで、NGの部分を赤く表示して教えてくれる機能です。
技術的には、CSSのセレクタで、「このタグの直下にこのタグはNG」というのをひたすら指定しています。
問題なければ表示上何も変わりません。
構造上タグの組み合わせが膨大になってしまうので、漏れや間違いなどがないか、しばらく使って気付いたものを潰していこうと思います。

使用上の注意

許可するタグをnotで指定しているため、仕様上未知のタグはNG判定されてしまいます。
例：Google検索で使われているg-section
(キーワードがアレなのが多い気がしますが、たまたまです)

テスト

試しに、Qiitaの記事ページで使用してみると・・・・あれ・・・・。

早速誤検出か・・・・・。

でもdiv直下のdiv許可してるしな・・・・・。

あれ？閉じタグにもクラス名が？
あーなるほど、タグ名とクラス名の間が全角になっているので、<div>ではなく、未知のタグ<div　class="logly-lift-ad-content">と認識されてNG判定されているようです。
タグのタイポも発見できる場合があることがわかりました。

Outline Checker

ページ内の要素のアウトラインを表示する機能です。
マークアップエンジニアの方が、要素がどのようにレイアウトされているか確認したり、スマホのCSSを書いているときに、謎の横スクロールの犯人の要素がなかなか見つからないときなどに使えると思います。

Alt Checker

ページ内のimg要素のaltを表示する機能です。
お客さんや一部ディレクターやなどソースを見るのに抵抗がある方や、コーディング時の漏れチェックのための機能です。

左上に画像があったんですね。気付きませんでした。

まとめ

最近無職となったので、ご興味持たれた会社様ご連絡お待ちしております。

どうも、7noteです。今回はhtml・cssで吹き出しの三角形を作る3つの方法を解説していきます。

WEBサイトを作成する時、こんなデザインがよく見られます。

吹き出し風のデザインのこんな三角形はよくでてきます。毎回出るのでその度適切な作り方を使い分けて綺麗なコーディングを意識しましょう！

方法1: borderで再現

これが一番綺麗な方法かなと思います。

index.html

<div class="fukidashi">borderで再現</div>

style.css

.fukidashi {
    width: 400px; /*吹き出しの横幅を指定*/
    background: #FCC; /*背景色にピンクを指定*/
    padding: 50px 20px; /*文字の上下左右に余白*/
    position: relative; /*三角形の表示位置の基準として指定*/
}
.fukidashi::after {
    content: ""; /*疑似要素では必ず書く*/
    width: 0; /*横幅を0に。*/
    height: 0; /*縦幅を0に。*/
    border: 15px solid transparent; /*透明のボーダーを作成*/
    border-top: 15px solid #FCC; /*上にボーダーを指定*/
    position: absolute; /*表示位置を設定するために指定*/
    bottom: -30px; /*吹き出しの下から、afterのコンテンツの高さ分下に*/
    left: calc(50% - 15px); /*左から50%のところから左に15pxずれたところ*/
}

わかり安く三角の色を変えると、こんな風になっています。↓

解説

これはborderの特性をうまく利用して作られた三角形です。
要素の横幅と縦幅がない物に、borderを当てるとこんな状態になります。

上と右と下にそれぞれborderを入れた場合

↓拡大↓

見ていただくと上のボーダーと右のボーダーの境目がわかるでしょうか。
ボーダーの特性として、ボーダーの境目は斜めに分けられる。という特性があります。
この特性を利用し、上の三角にだけ色をつけ表示することで、三角形を再現できるという仕組みになります。

方法2: 四角形を重ねて再現

index.html

<div class="fukidashi">四角形を重ねて再現</div>

style.css

.fukidashi {
    width: 400px; /*吹き出しの横幅を指定*/
    background: #CCF; /*背景色に青を指定*/
    padding: 50px 20px; /*文字の上下左右に余白*/
    position: relative; /*三角形の表示位置の基準として指定*/
}
.fukidashi::after {
    content: ""; /*疑似要素では必ず書く*/
    width: 30px; /*横幅を30px*/
    height: 30px; /*縦幅を30px*/
    background: #CCF; /*背景色に青を指定*/
    position: absolute; /*表示位置を設定するために指定*/
    bottom: -15px; /*半分の高さを指定*/
    left: calc(50% - 15px); /*左から50%のところから左に15pxずれたところ*/
    transform: rotate(45deg); /*四角形を45度回転させる*/
}

わかり安く四角の色を変えると、こんな風になっています。↓

解説

疑似要素で作成した四角を45度回転させて、上に重ねています。
基本的に三角形の書き方と変わりません。微妙に数字の違うところもありますが、仕組みは疑似要素をつかった物になるので解説は省きますが、このままだと四角形の後ろにもし模様や文字が重なった時隠れてしまうので注意が必要です！
また三角の頂点が90度にしか出来ないので、自由度がborderよりも低いのが欠点です。

方法3: 画像を入れて再現

index.html

<div class="fukidashi">四角形を重ねて再現</div>

style.css

    .fukidashi4 {
        width: 400px; /*吹き出しの横幅を指定*/
        background: #CCF; /*背景色に青を指定*/
        padding: 50px 20px; /*文字の上下左右に余白*/
        position: relative; /*三角形の表示位置の基準として指定*/
    }
    .fukidashi4::after {
        content: ""; /*疑似要素では必ず書く*/
        width: 30px; /*横幅を30px*/
        height: 15px; /*縦幅を15px*/
        background: url(triangle.gif); /*背景画像で三角を指定*/
        position: absolute; /*表示位置を設定するために指定*/
        bottom: -15px; /*吹き出しの下から、afterのコンテンツの高さ分下に*/
        left: calc(50% - 15px); /*左から50%のところから左に15pxずれたところ*/
    }

解説

画像の場合も疑似要素に背景画像を入れてposition:absoluteをつかって好きな位置に配置する方法になります。画像を使用する場面としては、borderなどで再現出来ないような場合に使うことが多いです。例えば三角の形が丸みを帯びているような形だったり、など。

まとめ

簡単な三角なら基本borderでほとんど再現出来ます。
三角形作成ツールなどもあるので、初心者の方は活用して作業速度をあげるのもいいと思います！

border三角形ジェネレーター

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

はじめに

Visual Studio Code で Nuxt.js を使った Docker コンテナ内での開発
作成した環境でボタンコンポーネントを作ってみます。

下記リポジトリをクローンすれば開発できる状態になります。
https://github.com/nakazawaken1/nuxt_in_docker.git

差分が確認できるように GitHub の差分ページのリンクを載せていきます。

---

仕様

色、左右マーク、ボタン文字をプロパティで指定できるようにする。

---

コンポーネントファイルを作成

components/MyButton.vue ファイルを作成する

---

最低限の内容を入力し保存

components/MyButton.vue

<template>
  <a>ボタン</a>
</template>

---

pages/index.vue に配置してみる

index.vue はプロジェクト作成時に作成されて内容が入っているが、以下に書き換える。

GitHub 差分

pages/index.vue

<template>
  <div class="container">
    <div>
      <MyButton />
    </div>
  </div>
</template>

<script>
import MyButton from "~/components/MyButton.vue";
export default {
  components: {
    MyButton
  }
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

• template 内に <MyButton タグを記載します。
• script 内に MyButton を使用するための import と components 登録を記述します。

開発サーバを起動し、ブラウザをみてみると以下のように表示されます。

---

スタイルを適用する

MyButton.vue に <style> を追加します。

色合いを決める時は以下のサイトが便利です。
https://color.adobe.com/ja/create/color-wheel

GitHub 差分

components/MyButton.vue

<template>
  <a class="MyButton">ボタン</a>
</template>

<style>
.MyButton {
  background-color: #00a656;
  border-radius: 1.5em;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
  padding: 1em 2em;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}
</style>

ブラウザで確認すると以下のようになっているはずです。

---

色を指定できるようにする

以下の２つのファイルを書き換えます。

GitHub 差分

components/MyButton.vue

<template>
  <a class="MyButton" :style="{'background-color': back_color, color: fore_color}">ボタン</a>
</template>

<script>
export default {
  props: {
    back_color: {
      type: String,
      default: "#00a656"
    },
    fore_color: {
      type: String,
      default: "#ffffff"
    }
  }
};
</script>

<style>
.MyButton {
  border-radius: 1.5em;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
  padding: 1em 2em;
  font-weight: bold;
  text-decoration: none;
}
</style>

• a タグの style 属性の前に : をつけると値にJavaScriptの式がかけます。
  style の場合は、ここでオブジェクト式を書くとキーがスタイル名、値がスタイルの値となります。
  background-color を back_color、 color を fore_color というカスタム属性で指定できる様にしています。

• script タグの export default するオブジェクトの中に props: を指定すると、
  カスタム属性を作成できます。
  back_color, fore_color の型と省略時の既定値を指定しています。

• style タグからは background-color, color の定義を消しました。

---

pages/index.vue

<template>
  <div class="container">
    <div>
      <MyButton back_color="#666666"/>
    </div>
  </div>
</template>

<script>
import MyButton from "~/components/MyButton.vue";
export default {
  components: {
    MyButton
  }
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

• MyButton タグに作成したカスタム属性 back_color を指定しています。
• fore_color は指定していないので、既定値が使用されます。

ブラウザで確認すると色が変わっています。

---

ボタンを並べてみました

GitHub 差分

---

矢印の有無指定ができるようにする

以下の２つのファイルを書き換えます。

GitHub 差分

components/MyButton.vue

<template>
  <a
    class="MyButton"
    :style="{'background-color': back_color, color: fore_color}"
    :class="{left_arrow, right_arrow}"
  >ボタン</a>
</template>

<script>
export default {
  props: {
    back_color: {
      type: String,
      default: "#00a656"
    },
    fore_color: {
      type: String,
      default: "#ffffff"
    },
    left_arrow: {
      type: Boolean,
      default: false
    },
    right_arrow: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style>
.MyButton {
  border-radius: 1.5em;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
  padding: 1em 2em;
  font-weight: bold;
  text-decoration: none;
}
.MyButton.left_arrow {
  padding-left: 0;
}
.MyButton.left_arrow::before {
  content: "〈";
  padding-right: 1em;
}
.MyButton.right_arrow {
  padding-right: 0;
}
.MyButton.right_arrow::after {
  padding-left: 1em;
  content: "〉";
}
</style>

• class 属性もオブジェクト式を指定すると、キーがクラス名、値がtrueの時のみそのクラス名がつくという書き方ができます。新しいJavaScriptの文法でキーと同名の変数がある場合はキーを省略して書けます。
• left_arrow, right_arrow という 真偽値型の属性を追加しています。
• left_arrow が true の場合は .left_arrow クラスがつくので、CSSで矢印の文字を表示するよう指定しています。
• right_arrowも同様です。

pages/index.vue

<template>
  <div class="container">
    <div>
      <MyButton />
      <MyButton back_color="#666666" />
      <MyButton back_color="#330000" fore_color="#ffeeee" />
      <MyButton left_arrow />
      <MyButton right_arrow />
      <MyButton left_arrow right_arrow />
    </div>
  </div>
</template>

<script>
import MyButton from "~/components/MyButton.vue";
export default {
  components: {
    MyButton
  }
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

• left_arrow のみをつけたボタン
• right_arrow のみをつけたボタン
• left_arrow, right_arrow 両方つけたボタン

を追加しました。

ブラウザで確認すると以下の様に表示されます。

---

ボタン文字を変更できるようにする

カスタム属性を追加してもできますが、今回は slot というものを使用してみます。

以下の２つのファイルを書き換えます。

GitHub 差分

components/MyButton.vue

<template>
  <a
    class="MyButton"
    :style="{'background-color': back_color, color: fore_color}"
    :class="{left_arrow, right_arrow}"
  ><slot>ボタン</slot></a>
</template>

<script>
export default {
  props: {
    back_color: {
      type: String,
      default: "#00a656"
    },
    fore_color: {
      type: String,
      default: "#ffffff"
    },
    left_arrow: {
      type: Boolean,
      default: false
    },
    right_arrow: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style>
.MyButton {
  border-radius: 1.5em;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.2);
  padding: 1em 2em;
  font-weight: bold;
  text-decoration: none;
}
.MyButton.left_arrow {
  padding-left: 0;
}
.MyButton.left_arrow::before {
  content: "〈";
  padding-right: 1em;
}
.MyButton.right_arrow {
  padding-right: 0;
}
.MyButton.right_arrow::after {
  padding-left: 1em;
  content: "〉";
}
</style>

• <slot>タグを追加しました。タグ内には省略時の既定値を書きます。

pages/index.vue

<template>
  <div class="container">
    <div>
      <MyButton />
      <MyButton back_color="#666666" />
      <MyButton back_color="#330000" fore_color="#ffeeee" />
      <MyButton left_arrow />
      <MyButton right_arrow />
      <MyButton left_arrow right_arrow />
      <MyButton>実行</MyButton>
    </div>
  </div>
</template>

<script>
import MyButton from "~/components/MyButton.vue";
export default {
  components: {
    MyButton
  }
};
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

• MyButton タグ内に書いた内容がボタンの文字として表示されます。

ブラウザで確認すると以下の様に表示されます。

100日チャレンジの366日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
366日目は、

おはようございます
昨日の作業・やったこと⇩

●ブログ記事1記事作成
●プログラミング学習366日目 2h
・udemyでフロントエンド講座
・メンターの課題

クーラー壊れたから扇風機最大で過ごす#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 9, 2020

【ゴール】

flex-box忘れていたので、振り返り

【コード】

何はともあれ、「display: flex;」を親要素に指定

flex-wrap: wrap;

＊折り返し
＊HTMLにboxとcontentクラスを用意

css.hoge.css

.box{
  background-color: lightgreen;
  min-height: 200px;
  widows: 100%;
  display: flex;
  flex-wrap: wrap;
}

.content{
  margin: 10px;
  height: 100px;
  width: 30%;
  background-color: green;

justify-content: space-between;

hoge.css

.box{
  background-color: lightgreen;
  height: 200px;
  widows: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content{
  background-color: green;
  height: 100px;
  width: 100px;
}

justify-content: center;

＊横軸の位置

css.hoge.css

.box{
  background-color: lightgreen;
  height: 200px;
  widows: 100%;
  display: flex;
  justify-content: center;
}

align-items: center;

＊縦軸の位置

css.hoge.css

.box{
  background-color: lightgreen;
  height: 200px;
  widows: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

抜けていたので、復習含めて書きました。
bootstrapを使えばあまり使わずすみますが、覚えていて損はないかと

【合わせて読みたい】

■ 【Rails new】Ruby on rails アプリケーション作成
https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583

■ 【devise】 rails g devise:install ができない、、時こそ！！
https://qiita.com/tanaka-yu3/items/8a2002921cda080907f8

■ 【メソッド集】　rails メソッド　まとめ　基礎　随時追加
https://qiita.com/tanaka-yu3/items/89abad875187494bec53

CSSだけでアニメーションを作る（trasition及び@keyframeを使用）

　・hoverした際に動くアニメーションとしました
　・アニメーション以外は前回作ったシャーロックホームズのテンプレを一部利用しています
　・画像はフリーのものを使用しました

お世話になったサイト様

@7968様 @keyframeとanimation
@7968様 trasition関連

完成物

コード

<!DOCTYPE html>
<html>
<head>
<title>CSS 3D Ratating Image Gallery</title>
<link rel="stylesheet" type="text/css" href="30_10.css">
</head>
<body>
  <nav id="nav-drawer">
    <input type="checkbox" id="check" id="nav-input">
    <label for="check" class="checkbtn open"></label>
    <label for="check" class="checkbtn close"></label>
    <label class="logo"><a href="#" class="logo">Sherlock</a></label>
    <ul>
      <li><a class="active" href="#">ホーム</a></li>
      <li><a href="#">会社概要</a></li>
      <li><a href="#">事業内容</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">採用情報</a></li>
    </ul>
  </nav>

  <div class="description">マウスをあわせると変化する</div>
<div class="animate1"><a href="#">アニメーション1</a></div>
<div class="animate2"><a href="#">アニメーション2</a></div>
<div class="animate3"><a href="#">アニメーション3(2秒後変化)</a></div>
<div class="animate4"><a href="#">アニメーション4</a></div>
    <div class="container">
        <div class="box">boxを中心にくるくるアニメーション
            <span style="--i:1;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:2;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:3;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:4;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:5;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:6;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:7;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
            <span style="--i:8;"><img src="トムとジェリー.png"width="300px" height="300px"></span>
        </div>
    </div>
</body>
</html>

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.description{
  top:0;
  color: black;
}
a{
  text-decoration: none;
  color: black;
}
.container
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
/* 一個目 */
.animate1{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
}
.animate1:hover{
  animation-name: none;
  background-color:blue;
  color: black;
  width: 300px;
  transition-duration: 5s;
}
/* 二個目 widthが５秒で変化、bgcがすぐに変化*/
.animate2{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
  transition-property:width;
}
.animate2:hover{
  animation-name: none;
  background-color:blue;
  color: black;
  width: 300px;
  transition-duration: 5s;
}
/* 3個目 2秒まってスタート*/
.animate3{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
}
.animate3:hover{
  animation-name: none;
  background-color:blue;
  color: black;
  width: 300px;
  transition-delay:2s;
  transition-duration: 3s;
}
.animate4{
  background-color: rgb(192, 240, 255);
  width: 150px;
  top: 0;
  margin: 10px;
  text-decoration: none;
}
.animate4:hover {
  animation-name: fadeIn;
  animation-duration:5s;
}
@keyframes fadeIn {
  0% {
      opacity:0;
  }
  100% {
      opacity:1;
  }
}
.box{
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;

}
.box:hover
{
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
  animation: animate 22s linear infinite;
}
.box span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);
}
.box span img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes animate
{
    0%
    {
        transform: perspective(1000px) rotateY(0deg);
    }
    100%
    {
        transform: perspective(1000px) rotateY(360deg);
    }
}
/* ↓ナビゲーションバー */
nav{
  background-color: black;
  width: 100%;
  top:0;
}
#check,
#nav-input{
  display: none;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
label.logo a{
  color: white;
  font-size: 40px;
  line-height: 80px;
  font-weight: 600;
  text-decoration: none;
  margin-left:30px;
}
nav ul{
  float: right;
  margin-right: 60px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 2px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  padding: 7px 15px;
  text-transform: uppercase;
  text-decoration: none;
}

学べたこと

　・trasitionの動きと記述の流れ
　・@keyframeとanimationの関係及び応用

感想

　いままであまり気にしていなかった、trasitionやkeyframeの理解が進み、レパートリーが増えました。
　今回作成したものは簡単なものですが画像等を用いると、企業向けの面白いサイトができそうです。
　くるくる実装は建築系や、面白い雑貨屋さん等のオシャレなサイトにありそうですね！
　今回は以上となります。
　
　ここは違う、ここはこうしたほうが良いかも？等々ございましたらご指摘いただけますと幸いです。
　最後までみていただき、ありがとうございました。
　

SalesForceのコミュニティービルダーで

①cssを有効化したい

独自cssをとりこみ、適用したい。

設定→カスタムコード→静的リソース→新規→cssやjsファイルを取り込みできることは確認済み。
　CSS名：commonstyle、アップロードCSSファイル名：style.css

設定→カスタムコード→Visualforceページ→新規
　表示ラベル：test1、名前：test1
　Markup内に
という記述をしています。
この下記辺りに

で対象のcss名を指定しています。

ビルダーでコンポーネントのVisualforce Pageを配置して
作ったVisualforceページ名にtest1を設定していますが、
CSSが効きません。
このやり方ではできないのでしょうか？

②ビルダーの中でhidden情報をポストで送信したい

外部ページにAPIのパラメータが必要でhiddenで情報を予め保持しておき、
送信ボタンでform送信したいと思っています。
ビルダー内でできるのか想像ができません。
Visualforceを使ったやり方となるのでしょうか？

どのようなやり方はありますでしょうか？

ion-contentの背景色の変更、Ionic初心者は恐らくこうやっている。

home.page.html

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>
      ホーム
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="home">

</ion-content>

home.page.scss

.home {
  background-color: #fff5cc;
}

でもこれではうまくいかないんですよ〜！

ion-contentの背景色を変更する方法

※このやり方がベストなのかは分かりませんが、とりあえずこの方法でもできたので。。

variables.scssに値を追加

variables.scssのroot内にこちらを追加

variables.scss

/** Ionic CSS Variables **/
:root {
/** 省略 **/
--ion-background-color:#ffffff;
}

背景色を変更したいページのscssに値を追加

home.page.scss

ion-content{
    --ion-background-color:#fcfde8;
}

これでhome.pageだけ背景色が変わる！

全てのページの背景色を変更するには？

variables.scssを以下のようにして、上記の例のように各ページで一切上書きしなければ、全てのページの背景色を変更可能

variables.scss

/** Ionic CSS Variables **/
:root {
/** 省略 **/
--ion-background-color:#000000;
}

参考

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