入力された文字をGoogleフォントに変換します

入力された文字をGoogleフォントに変換するプログラムです。　※一部にAIを使用しています　　英語のみ対応してます　　(https://n3s.nadesi.com/id.php?377)をもとに作成

エディタ

プログラム

#2026/7/15

# 1. HTMLとCSSの設定
「<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Imperial+Script&display=swap" rel="stylesheet">
<input type="text" id="入力欄" placeholder="文字を入力">
<button id="変換ボタン">変換</button>
<div id="表示するもの">　　　　　　　　</div>」をDOM親要素にHTML設定

# 2. スタイルの適用
「#表示するもの」に{「font-family」：「'Imperial Script', cursive」、「font-size」：「30px」、「padding」：「20px」}をDOMスタイル一括設定

# 3. ボタンを押したときに実行する関数を定義
●ボタンクリック処理とは
   
    入力値＝「#入力欄」の「value」をDOM属性取得
 
    「#表示するもの」に入力値をDOMテキスト設定
ここまで

「#変換ボタン」の「click」に「ボタンクリック処理」をDOMイベント追加

/*メモ
・Google フォント「Imperial Script」
　https://fonts.google.com/specimen/Imperial+Script?categoryFilters=Feeling:%2FExpressive%2FFancy
*/
●(txtでURLの)リンク作成
　　ELとは変数＝「a」のDOM要素作成。
　　ELの「href」にURLをDOM属性設定。
　　ELの「target」に「_blank」をDOM属性設定。
　　ELにtxtをテキスト設定。
　　DOM親要素へELをDOM子要素追加。
　　ELで戻る。
ここまで。
「使用したGoogleフォントのサイト」のラベル作成。改行作成。
「Imperial Script」で「https://fonts.google.com/specimen/Imperial+Script?categoryFilters=Feeling:%2FExpressive%2FFancy」のリンク作成。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ