クレヨンしんちゃん (HTML+CSS)

Respect for

キャンバスサイズの設定

最近クレヨンしんちゃんを見ていないので念の為4:3にしましょう、自信があれば16:9でも良いと思います。

<section>
  <p>Hello, world!</p>
</section>

body {
  background: gray;
}

section {
  aspect-ratio: 4 / 3;
  background: #fff;
  display: grid;
  place-content: center;
  width: 600px;
}

色の定義

:root {
  --top-color: rgb(94% 51% 64%);
  --bottom-color: rgb(95% 95% 50%);
}

これらの色をlinear-gradientで描画します。

section {
  aspect-ratio: 4 / 3;
  background: linear-gradient(to bottom, var(--top-color), var(--bottom-color));
  display: grid;
  place-content: center;
  width: 600px;
}

やりたいことが分かってきたでしょうか

タイトルの設定

タイトルを追加します。

<section>
  <h1>
    開発者ツールで<br />
    スロットリングを切り忘れるゾ
  </h1>
</section>

重要なのは以下の部分です。

h1 {
  color: purple;
  font-size: 30px;
  padding-left: 1em;
}

h1::before {
  content: '';
  margin-left: -1em;
}

h1::beforeを使うことで１行目を少しズラしています。

ルビをふる

子供の番組なので、ルビを振ります。

 <section>
   <h1>
-    開発者ツールで<br />
+    <ruby>開発者<rp>(</rp><rt>かいはつしゃ</rt><rp>)</rp></ruby>ツールで<br />
     スロットリングを切り忘れるゾ
   </h1>
 </section>

フォントを変える

フォントも丸っぽいやつにしておきます。

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

h1 {
  color: purple;
  font-size: 30px;
  font-family: 'Kosugi Maru', sans-serif;
  padding-left: 1em;
}

これでHTML+CSSでクレヨンしんちゃんのタイトルコールを作ることが出来ました。

いかがでしたか？

完成品

オリジナル

補足

• 原典と体裁を合わせるため、CSS変数などを無駄に使っています
• スロットリングを切り忘れるゾ ＝ デベロッパーツールで低速環境再現のためにセットした3Gのスロットリングを戻すの忘れがち