Contents
HTML・CSS・JavaScriptだけで作る、タイピング表示付きのミニ機能
ブログに少し遊び心を入れたいと思って、サイドバーに「今日の無駄知識」という小さなウィジェットを追加しました。
ただ文章を表示するだけだと少し味気ないので、今回は
- ランダムで内容を表示
- タイピング風に1文字ずつ出す
- ボタンで別の内容に切り替えられる
という、ちょっと動きのある形にしています。
しかも、使っているのは HTML・CSS・JavaScriptだけ です。
大げさなライブラリも不要なので、初心者でも仕組みを理解しやすいです。
この記事では、実際にサイドバーへ追加したウィジェットの構造を、できるだけ分かりやすく順番に解説します。
まず、今回作ったものは何か
今回追加したのは、ブログのサイドバーに置ける小さなボックスです。
表示の流れはこうです。
- ページが読み込まれる
- 「・・・解析中・・・」のような演出が出る
- ランダムな文章がタイピング風に表示される
- ボタンを押すと、別の内容が表示される
見た目はシンプルですが、ただのテキスト表示より少しだけ印象に残ります。
こういう小さな仕掛けは、ブログ全体の雰囲気づくりにも効きます。
全体の作り方
今回のコードは、大きく分けると3つです。
- HTML：画面の土台
- CSS：見た目の調整
- JavaScript：ランダム表示やタイピング演出
初心者の方は、まず「この3つがそれぞれ別の役割を持っている」という理解だけで十分です。
1. HTMLでウィジェットの土台を作る
まずはHTMLです。
HTMLは、画面に何を置くかを決める部分です。
今回のウィジェットでは、主に次の要素を置いています。
- タイトル
- テキストを表示する箱
- ボタン
- 補足説明
たとえば、構造としてはこんなイメージです。
<div class="mudachishiki-widget">
<h2 class="mudachishiki-title">今日の無駄知識</h2> <div class="mudachishiki-box">
<p class="mudachishiki-text" id="js-mudachishiki-text">
<span id="js-typed-text"></span>
<span class="mudachishiki-cursor" id="js-cursor">|</span>
</p>
</div> <div class="mudachishiki-actions">
<button class="mudachishiki-button" id="js-mudachishiki-button">
別の無駄知識を見る
</button>
</div>
</div>
ここで大事なのは、class と id の違いです。
classとは
class は、主にCSSで見た目を整えるために使います。
たとえば mudachishiki-title という class がついていれば、そのタイトル部分だけ文字を大きくしたり、色を変えたりできます。
idとは
id は、JavaScriptで「この要素を動かしたい」と指定するときによく使います。
たとえば id="js-typed-text" がついている部分に対して、JavaScriptから文字を1文字ずつ入れていく、ということができます。
つまり今回は、
- class = 見た目のため
- id = 動きを付けるため
という使い分けをしています。
2. CSSで見た目を整える
次はCSSです。
CSSは、HTMLで置いた要素を「どんな見た目にするか」を決める部分です。
今回のウィジェットでは、特に次の点を調整しています。
- 全体の幅
- 背景色
- 枠線
- 角丸
- 文字サイズ
- ボタンの見た目
- スマホでの表示
ウィジェット全体のデザイン
たとえばこの部分です。
.mudachishiki-widget {
max-width: 680px;
margin: 40px auto;
padding: 24px;
border-radius: 20px;
background: linear-gradient(135deg, #fffaf0, #fff);
border: 1px solid #f0e2c7;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
ここでは、ウィジェット全体の箱を整えています。
max-width
max-width は最大の横幅です。
画面が広くても必要以上に大きくなりすぎないようにしています。
margin
margin: 40px auto; は、上下に余白を作りつつ、左右は中央寄せにする指定です。
padding
padding は、箱の内側の余白です。
文字が枠ギリギリにくっつかないようにしています。
border-radius
角を丸くして、少し柔らかい印象にしています。
background
背景に単色ではなく、薄いグラデーションを入れています。
これだけでも、見た目が少し整って見えます。
box-shadow
影をつけて、少しだけ浮いているように見せています。
タイトルや本文の文字サイズ
文字サイズを変えたいときは、ここを調整します。
.mudachishiki-title {
font-size: 28px;
}.mudachishiki-text {
font-size: 22px;
}
mudachishiki-titleはタイトルmudachishiki-textは本文
以前も触れましたが、サイドバーに入れる場合は少し小さめの方が収まりが良いです。
その場合は、たとえば次のように変更します。
.mudachishiki-title {
font-size: 22px;
}.mudachishiki-text {
font-size: 18px;
}
こういう数字を少しずつ変えながら、見やすいバランスを探すのが基本です。
スマホ用の調整
PCではちょうど良くても、スマホでは大きすぎることがあります。
そこで使うのが @media です。
@media (max-width: 640px) {
.mudachishiki-text {
font-size: 18px;
}
}
これは「画面幅が640px以下のときだけ、この設定を使う」という意味です。
つまり、
- PCでは通常サイズ
- スマホでは少し小さめ
という切り替えができます。
初心者のうちは、まず通常版を作ってから、最後にスマホ調整を足す のが分かりやすいです。
3. JavaScriptで動きをつける
ここが今回の一番面白い部分です。
JavaScriptでは、主に次の処理をしています。
- 表示する文章の候補を用意する
- ランダムで1つ選ぶ
- タイピング風に1文字ずつ表示する
- ボタンを押したら再抽選する
- 同じ内容が連続しにくくする
順番に見ていきます。
文章データを配列で持つ
まずは表示したい文章をまとめておきます。
const uselessFacts = [
"タコに骨はないが、歯はある。",
"エビの心臓は頭にある。",
"クラゲには脳がない。"
];
このように、複数の文字列をひとまとめにするのが 配列 です。
配列は、初心者が最初につまずきやすいですが、考え方は単純です。
「選択肢を箱の中に順番に入れておく」くらいのイメージで大丈夫です。
今回はこの中からランダムに1つ取り出します。
HTMLの要素をJavaScriptで取得する
次に、HTML側の要素をJavaScriptで操作できるようにします。
const typedTextEl = document.getElementById("js-typed-text");
const buttonEl = document.getElementById("js-mudachishiki-button");
const cursorEl = document.getElementById("js-cursor");
ここでは、HTMLで id を付けておいた要素を取得しています。
たとえば typedTextEl は、文字を実際に表示する場所です。
このようにしておくと、JavaScriptから
- 文字を書き換える
- ボタンを無効化する
- カーソルを表示/非表示にする
といった操作ができます。
ランダムで1件選ぶ
ランダム表示は、次のような関数で行います。
function getRandomFact() {
const index = Math.floor(Math.random() * uselessFacts.length);
return uselessFacts[index];
}
ここは初心者向けにかなり大事です。
Math.random()
Math.random() は、0以上1未満のランダムな数字を作ります。
uselessFacts.length
length は、配列の要素数です。
たとえば3個入っていれば 3 になります。
Math.floor()
Math.floor() は、小数点以下を切り捨てます。
つまりこの1行で、
- 配列の範囲内で
- ランダムな番号を作り
- その番号の文章を返す
ということをしています。
タイピング風に表示する
今回のウィジェットの核になるのがここです。
function typeText(text) {
let i = 0; const timer = setInterval(() => {
typedTextEl.textContent = text.slice(0, i + 1);
i++; if (i >= text.length) {
clearInterval(timer);
}
}, 45);
}
ここは初心者には少し難しく見えるかもしれませんが、やっていることは単純です。
text.slice(0, i + 1)
これは「最初の1文字、次は2文字、次は3文字」というように、少しずつ文字を取り出す処理です。
setInterval()
これは「一定時間ごとに何度も処理を実行する」機能です。
今回なら、45ミリ秒ごとに1文字ずつ増やしています。
clearInterval()
最後まで表示したら、繰り返しを止めます。
これをしないと、ずっと処理が回り続けてしまいます。
つまりこの関数は、
- 文字数を0からスタート
- 少しずつ増やす
- そのたびに表示を更新する
- 最後まで行ったら止める
という流れです。
これでタイピング風の表示になります。
「解析中」の演出を入れる
いきなり文字が出るより、少し待たせた方が「何か処理している感」が出ます。
そこで使っているのが setTimeout() です。
function showRandomFact() {
typedTextEl.textContent = "・・・解析中・・・"; setTimeout(() => {
const fact = getRandomFact();
typeText(fact);
}, 800);
}
setTimeout()
これは「一定時間後に1回だけ処理を実行する」機能です。
今回は 800 ミリ秒、つまり 0.8 秒後に本当の文章を表示しています。
この少しの待ち時間だけでも、単なる表示より印象が変わります。
ボタンを押したら再表示する
ボタンに動きを付けるには、イベントを使います。
buttonEl.addEventListener("click", showRandomFact);
これは「ボタンがクリックされたら showRandomFact() を実行する」という意味です。
JavaScriptではこの addEventListener がとてもよく出てきます。
最初は難しそうに見えますが、まずは
"click"= クリックされたらshowRandomFact= この処理を動かす
と覚えてしまって大丈夫です。
連打防止も入れておく
タイピング中に何度もボタンを押されると、表示が崩れることがあります。
そのため、処理中はボタンを無効にしておくのが安全です。
buttonEl.disabled = true;
完了したら再び有効にします。
buttonEl.disabled = false;
こういう小さな制御があると、見た目以上に「ちゃんとしたウィジェット」になります。
サイドバーに追加して感じたこと
今回のウィジェットは、見た目も処理も比較的シンプルです。
それでも、ブログにこういう小さい動きを入れるだけで、かなり印象が変わります。
特にサイドバーは、放っておくと
- プロフィール
- カテゴリ一覧
- 最近の記事
- 広告
のように、情報が並ぶだけになりがちです。
そこに、少し遊べる・少し見たくなる要素があると、ブログ全体の空気が少し柔らかくなります。
しかも今回のような実装なら、難しい環境構築も不要です。
HTML・CSS・JavaScriptが少し分かれば、自分でカスタマイズもできます。
初心者向けに覚えておくと良いこと
今回のコードで、初心者が特に押さえておくと良いポイントはこの4つです。
1. HTMLは土台
何を表示するかを決める
2. CSSは見た目
サイズ、余白、色、枠線を整える
3. JavaScriptは動き
ランダム表示やタイピング演出を付ける
4. idとclassを使い分ける
- class は見た目向け
- id はJavaScript操作向け
この4つが理解できると、今回のような小さなウィジェットはかなり作りやすくなります。
まとめ
今回は、ブログのサイドバーに「今日の無駄知識」ウィジェットを追加した話を書きました。
やっていること自体はそこまで難しくありません。
- HTMLで箱を作る
- CSSで整える
- JavaScriptでランダム表示とタイピング演出を入れる
これだけです。
でも、この「これだけ」の積み重ねが、ブログの見た目や滞在感を少しずつ良くしてくれます。
大きな機能をいきなり作るのは大変でも、こういう小さいウィジェットなら試しやすいです。
初心者の方がフロントエンドに慣れる練習としても、かなりちょうど良い題材だと思います。
