Web FontsでカウントダウンQ!! (全7回)
Google Web FontsとJavaScriptを使ってカウントダウンタイマーを作ってみましょう。
-
#01 カウントダウンタイマーを作ろう (02:16)
- 完成版の確認
- ひな形ファイルの作成
-
#02 Google Web Fontsを設定しよう (02:58)
- Google Web Fontsの設定
- サイトのスタイリング
-
#03 処理の流れを確認しよう (02:25)
- 表示部分の設定
- 全体の流れの確認
-
#04 残り時間を計算しよう (02:29)
- ターゲットの時刻の算出
- 現在時刻の算出
- 差（残り時間）の算出
- 結果の確認
-
#05 日数、時間、分、秒を割り出そう (02:41)
- 日数の算出
- 時間の算出
- 分の算出
- 秒の算出
-
#06 カウントダウン処理を実装しよう (02:56)
- 結果の表示
- タイマー処理
-
#07 スタイリングを調整しよう (02:13)
- 数字の桁数調整
- フォントの調整
#01 カウントダウンタイマーを作ろう
#02 Google Web Fontsを設定しよう
2018年3月9日
補足情報 フォント埋め込み用のスクリプトを入手する方法
Quick Useのリンクは廃止され、かわりに「+」アイコンがあるのでそちらをクリックしてください。そうすると画面下部に「1 Family Selected」と出るので、そちらをクリックすれば埋め込み用のスクリプトを入手することができます。
2018年3月9日
補足情報 Google Web Fontsのサイトについて
Google Web FontsはGoogle Fontsという名前に変わっています。テキストをプレビューするには直接テキストをクリックして変更してみてください。また線の太さや大きさもその場で選べます。
補足情報 この動画で使っているエディタについて
このレッスンではTincta Proというエディタを使っていますが、Atomなど他のプログラミングエディタでも問題ありません。
ヘルプの「レッスンで使っているテキストエディタは何ですか？」もあわせてご覧ください。