動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
JavaScript実装の一例として、アイコンをクリックしたら現れる入力フォームを紹介していきます。
- ブラウザ実行環境の紹介
- Bootstrap Icons
- JavaScriptコードの構成、特徴
2023年4月19日
補足情報 Bootstrap Iconsについて
Bootstrap Iconsの詳しい使い方については以下のレッスンを参考にしてみてください。
・Bootstrap Icons入門 (全3回)
https://dotinstall.com/lessons/basic_bootstrap_icons
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Playground</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css">
<style>
input {
all: unset;
transition: width 0.4s, border 0.4s;
width: 0;
}
input.appear {
transition: width 0.6s, border 0.6s;
border: 1px solid #333;
padding: 4px 8px;
border-radius: 4px;
width: 200px;
}
#search {
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="input">
<i class="bi bi-search" id="search"></i>
<script>
// メガネアイコンの要素を取得
const search = document.getElementById('search');
// 入力フォームの要素を取得
const input = document.getElementById('input');
// メガネアイコンをクリックしたときの処理
search.addEventListener('click', () => {
// 入力フォームを表示する
input.classList.add('appear');
// 入力フォームにフォーカスを当てる
input.focus();
});
// 入力フォームからフォーカスが外れたときの処理
input.addEventListener('blur', () => {
// 入力フォームを非表示にする
input.classList.remove('appear');
});
</script>
</body>
</html>
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するには無料のユーザー登録が必要です。
補足情報 ブラウザ実行環境について
このレッスンで扱っているブラウザ実行環境ではいくつかのショートカットキーを使うことができます。詳しくは以下のヘルプをご覧ください。
・ブラウザ実行環境のエディタで使えるショートカットキーについて知りたい
https://dotinstall.com/help/903