動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
Play
Current Time 0:00
/
Duration Time 0:00
Remaining Time -0:00
Stream TypeLIVE
Loaded: 0%
Progress: 0%
0:00
00:00
Mute
Playback Rate
    1
    Subtitles
    • subtitles off
    Captions
    • captions off
    Chapters
    • Chapters
    分割
    • シアター
    • 分割
    • ピクチャ
    • 全画面
    x1.0
    • プレミアム会員になると動画の速度を変更できます
    男性ボイス
    • プレミアム会員になると講義音声を切り替えられます
    HD
    Loaded: 0%
    Progress: 0%
    0:00
    The video could not be loaded, either because the server or network failed or because the format is not supported.
    この動画には 2 件の補足情報があります。

    レッスンで分からないところはありましたか?

    プレミアムプランに登録すると現役エンジニアに質問できます。

    詳しくはヘルプ「質問機能とは?」をご覧ください。

    さて、ここからは動画横のブラウザ実行環境を使っていきましょう。
    では、早速 JavaScript がどういった雰囲気なのかを見ていきたいのですが、今回あらかじめこうしたコードをセットしておきました。

    文字起こしはプレミアムプラン向けの機能です

    詳しくみる

    JavaScript実装の一例として、アイコンをクリックしたら現れる入力フォームを紹介していきます。

    • ブラウザ実行環境の紹介
    • Bootstrap Icons
    • JavaScriptコードの構成、特徴
    2023年4月19日

    このレッスンで扱っているブラウザ実行環境ではいくつかのショートカットキーを使うことができます。詳しくは以下のヘルプをご覧ください。

    ・ブラウザ実行環境のエディタで使えるショートカットキーについて知りたい
    https://dotinstall.com/help/903

    2023年4月19日

    Bootstrap Iconsの詳しい使い方については以下のレッスンを参考にしてみてください。

    ・Bootstrap Icons入門 (全3回)
    https://dotinstall.com/lessons/basic_bootstrap_icons

    このレッスンの問題を報告する

    • Q1

      JavaScript のコードはどのタグの中に書く?

      ユーザー登録(無料)をすると
      ミニクイズで理解度をチェックできます

      無料で新規登録
    この動画に関する質問と回答はありません。

    プレミアムプランに登録すると、わからないところを現役エンジニアに質問できます。

    質問機能とは?

    素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です

    詳しくみる

    ソースコードを閲覧するにはプレミアムプランへの登録が必要です

    詳しくみる

    このレッスンの問題を報告する

    お手本のコードと比較

    をお手本のコードと比較しています。 異なる箇所は赤色で表示されています。 両者のコードに異なる箇所はありません。

    お手本のコード
    
    
    あなたのコード