一人でダイスを振り続けるさみしいWebアプリの作成に挑戦してみた#2。

世界のぽっぽや　てつお

2024年7月23日 21:25

はい、前回の続きです。
今日も暇なので書いていきます。
CSSのファイルを作成します。
右端のファイルを作成して、styles.cssという名前を付けます。

styles.cssができました。
それでは、まず最初にHTMLに記述した。
<div class="container">というクラスのデザインを決めていきます。
このグループは、Refresh Meという見出し文が中身です。

これに対して、↓のように記述します。
.container {
width: 70%;　※幅70%
margin: auto;　※水平中央に配置
text-align: center;　※中央揃え
}

次に、<div class="dice">というクラスのデザインを決めていきます。

こちらは、サイコロのイメージが保存されています。
これに対して、↓のように記述します。
.dice {
text-align: center;　※中央揃え
display: inline-block;　※インラインブロック：ダイスのイメージを二つ目のダイスと揃えたいのでインラインブロックを使用
}

続いて、<body>のデザイン。
とりあえず、黒にしましょう。

次に、<h1>Refresh Me</h1>の目次もかっこよくデザインをします。

h1 {
margin: 30px;　※文字周囲に30ピクセルのマージンを設定
font-family: 'Lobster', cursive;　
※フォントを「Lobster」に設定し、代替フォントとして「cursive」を指定
text-shadow: 5px 0 #232931;　
※テキストに5ピクセル右方向に影を付け、その色を#232931に設定
font-size: 8rem;　
※フォントサイズを8rem（ルートエム）に設定します。これは通常のフォントサイズの8倍
color: #4ECCA3;　
※テキストの色を#4ECCA3に設定
}

次に、<p>Player 1</p>の文章もかっこよくデザインをします。

p {
font-size: 2rem;　
※フォントサイズを2rem（ルートエム）に設定します。これは通常のフォントサイズの2倍。
color: #4ECCA3;　※テキストの色を#4ECCA3に設定
font-family: 'Indie Flower', cursive;　
※フォントを「Indie Flower」に設定し、代替フォントとして「cursive」を指定
}