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のスロットリングを戻すの忘れがち
↧