ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
2024/09/10
NEW
『Go言語入門 制御構造編』をリリースしました
PREMIUM
JavaScriptでキャラ診断を作ろう
JavaScriptを使って、キャラ診断アプリを作る方法を見ていきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(17)
質問と回答
(1)
#01 キャラ診断アプリを作ってみよう
(02:39)
無料公開中
完成版の確認
index.htmlの作成
styles.cssの作成
main.jsの作成
未完了
#02 画面遷移の仕組みを理解しよう
(01:52)
無料公開中
画面遷移の仕組みについて
未完了
#03 必要な要素を配置しよう
(02:51)
無料公開中
HTMLのマークアップ
おおまかなスタイリング
未完了
#04 要素のスタイルを整えよう
(02:49)
無料公開中
画面遷移のためのクラス設定
JavaScriptの読み込み
未完了
#05 画面遷移を完成させよう
(02:16)
要素の取得
クリックイベントの設定
動作確認
未完了
#06 カードの大きさを整えよう
(01:48)
カードの大きさ調整
未完了
#07 カードの中身を作り込んでいこう
(02:44)
カードのおおまかなマークアップ
カード全体のスタイリング
未完了
#08 診断前画面のマークアップをしよう
(02:30)
診断前画面のマークアップ
未完了
#09 ボタンのスタイルを整えよう
(02:50)
フォームのスタイリング
診断ボタンのスタイリング
未完了
#10 診断結果画面のマークアップをしよう
(02:47)
診断結果画面のマークアップ
未完了
#11 診断結果のスタイルを整えよう
(02:43)
テキストのスタイリング
ツイートボタンのスタイリング
未完了
#12 必要なデータを揃えよう
(02:52)
診断結果データの用意
getRandomElement()の作成
未完了
#13 診断結果を表示しよう
(02:45)
setTextContent()の作成
未完了
#14 背景画像を設定しよう
(02:34)
背景画像の表示
未完了
#15 入力した名前を表示させよう
(02:53)
入力した名前の表示
フォーカスの設定
名無し設定
未完了
#16 ツイート機能を実装しよう
(02:49)
ツイート機能の実装
公式ドキュメントの確認
未完了
#17 診断結果をツイートに反映させよう
(02:14)
ツイート機能の完成
未完了
#14 背景画像を設定しよう
'left-side' の後ろにスペースを入れる理由を教えてください
2017年9月22日
リリース情報(note)
『JavaScriptでキャラ診断を作ろう』を追加しました
詳細情報
最終更新日
2017年9月7日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript