Javascriptを使って簡単なストップウオッチを作る➂

Javascriptを使って簡単なストップウオッチを作る

ストップウオッチを作ってみよう➂

CSSでデザインする

ストップウォッチ

0
CSS .title {
text-align: center;
}
#stopwatchpanel {
margin: 0 auto;
width: 10em;
}
.display {
font-weight: bold;
text-align: right;
height: 2.0em;
margin-bottom: 0.3em;
background-color: burlywood;
}
.actions {
text-align: center;
margin-bottom: 1em;
}
.startButton {
margin-bottom: 1em;
} .message { border-bottom: 1px dashed black; }

解説

.title {
text-align: center;
}
文字を中央寄せにします。
#stopwatchpanel {
margin: 0 auto;
width: 10em;
}
中央寄せにして幅を設定します。
.display {
font-weight: bold;
text-align: right;
height: 2.0em;
margin-bottom: 0.3em;
background-color: burlywood;
}
文字を太文字にし、右側に文字を設定し、高さを2.0emにし、margin-bottomでボタンとの距離を少し空け、背景色を決めます。
.actions {
text-align: center;
margin-bottom: 1em;
}
文字を中央寄せにします。margin-bottomで底から1文字分を空けます。
.startButton {
margin-bottom: 1em;
}
底から1文字分を空けます。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT)
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。


わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。