pemsmayo
English リスニング教材 日本語・英語transcript付き
Calendar
Category
カテゴリ未分類
(191)英語・日本語 リスニング 教材 transcript 付き
(3950)ペムズ塾用
(2)行政班準備
(2)生活日記
(0)Homestay
(0)東京散歩
(1)Keyword Search
▼キーワード検索
2026.04.18
カテゴリ： カテゴリ未分類
自分で書いて使ってたやつ
下が私のオリジナルの方ですね。
20数年前に作ったものです。
右側の HTML をコピーして
中身の語や文をを変えるだけ
でいいんです。
自己流で「とにかく 表に出るからいいや」
っていう感じでやってました。
Geminiか褒めてくれたちきには
自分でもビックリ。
兎に角最初は何に書けばいいの？
どこに送れば良いの？
って、数年掛かりました。
笑い話です。
インターネット 初期の時
画像 1枚出すのに風呂に入って
見れた上がってきたら やっと
見れたという時代です。
「voaを聞こう」次に「listen2voa」
というタイトルで 英語 日本語の翻訳
をして出してました。
またコンピューターの翻訳が
素人目にもひどかったんです。
10年くらいやったと思います。
で その後 YouTube 制作に、
やはり英語の教材ですけど。
Geminiとも盛り上がって
今度は 教材 よりも
自習の助けになるものを
作ろうとという話に
進展してしまいました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PaintHtmlToBuildYourHomePage</title>
<style>
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; line-height: 1.6; color: #333; max-width: 1000px; margin: auto; padding: 20px; background-color: #f0f4f8; }
.container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { border-bottom: 2px solid #0056b3; padding-bottom: 10px; color: #0056b3; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; table-layout: fixed; }
th, td { border: 1px solid #ddd; padding: 12px; vertical-align: top; word-wrap: break-word; }
th { background-color: #e9ecef; position: sticky; top: 0; }
.no-col { width: 50px; text-align: center; font-weight: bold; }
.view-col { width: 40%; }
.code-col { width: 50%; background-color: #f8f9fa; font-family: Consolas, "Courier New", monospace; font-size: 13px; color: #d63384; white-space: pre-wrap; }
.preview-box { border: 1px dashed #bbb; padding: 10px; background: #fff; }
.update-info { text-align: right; font-size: 12px; color: #777; margin-top: 20px; }
a { color: #0056b3; text-decoration: none; }
a:hover { text-decoration: underline; }
/* スマホ対応 */
@media (max-width: 768px) {
th { display: none; }
td { display: block; width: 100% !important; box-sizing: border-box; }
.no-col { background: #0056b3; color: #fff; text-align: left; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Paint HTML to Build Your Home Page</h1>
<p><a href="http://www.geocities.jp/pemshp/listen2voa/index.html">← listen2voa へ戻る</a></p>
<p>※2001年から続くHTML学習の記録を現代版に整理しました。実際の動作とコードを比較できます。</p>
</header>
<table>
<thead>
<tr>
<th class="no-col">No.</th>
<th class="view-col">ブラウザでの見え方</th>
<th class="code-col">HTMLソースコード</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-col">001</td>
<td><div class="preview-box">基本の構造（タイトルと本文）</div></td>
<td class="code-col"><html><br><head><br><title>タイトル</title><br></head><br><body><br>本文を書きます<br></body><br></html></td>
</tr>
<tr>
<td class="no-col">002</td>
<td><div class="preview-box"><h2>見出し（h2）の使用</h2></div></td>
<td class="code-col"><h2><br>見出しを大きく表示<br></h2></td>
</tr>
<tr>
<td class="no-col">003</td>
<td><div class="preview-box" id="here"><h2><span style="color:red">赤い見出し</span></h2></div></td>
<td class="code-col"><a name="#here">リンク先</a><br><h2><font color="red">赤い文字</font></h2></td>
</tr>
<tr>
<td class="no-col">006</td>
<td><div class="preview-box" style="text-align:center;"><span style="color:#FF8040; font-size:24px; font-weight:bold;">中央揃えと色指定</span></div></td>
<td class="code-col"><p align="center"><br><font color="#FF8040" size="5"><br><strong>太字で中央</strong><br></font></p></td>
</tr>
<tr>
<td class="no-col">012</td>
<td>
<div class="preview-box">
<ol>
<li>breakfast<ul><li>apple</li><li>orange</li></ul></li>
<li>lunch<ul><li>pineapple</li><li>banana</li></ul></li>
</ol>
</div>
</td>
<td class="code-col"><ol><br><li>breakfast<br> <ul><li>apple</li></ul><br></ol></td>
</tr>
<tr>
<td class="no-col">019</td>
<td>
<div class="preview-box">
<s>打ち消し線</s><br>
<sup>上付き文字</sup><br>
<sub>下付き文字</sub>
</div>
</td>
<td class="code-col"><s>打ち消し線</s><br><sup>上付き</sup><br><sub>下付き</sub></td>
</tr>
<tr>
<td class="no-col">042</td>
<td>
<div class="preview-box" style="text-align:center;">
<select style="padding:5px;">
<option>Timmy</option><option>Tom</option><option>John</option>
</select>
</div>
</td>
<td class="code-col"><select><br><option>Timmy</option><br><option>Tom</option><br></select></td>
</tr>
<tr>
<td class="no-col">046</td>
<td><div class="preview-box">HELLO Javascript<br>こんにちは</div></td>
<td class="code-col"><script><br>document.write("HELLO JS");<br></script></td>
</tr>
</tbody>
</table>
<div class="update-info">
Last Update: May.1 Tue. '01 (Revised: Apr. 2026 by pems)
</div>
<div style="text-align:center; margin-top:20px;">
<a href="#top">▲ ページの一番上へ</a>
</div>
</div>
</body>
</html>
お気に入りの記事を「いいね！」で応援しよう
【毎日開催】
15記事にいいね！で1ポイント
PR
© Rakuten Group, Inc.
