目次
見出し
<h★> タグは見出しを指定する時に使います。
★の部分には 1～6 までの数字が入り、<h1> から <h6> まであります。
<h1> が一番上位で、数字が大きくなるほど下位の見出しになります。次の行との間には 1 行分の余白が空きます。
（※ 見出しタグは文字を大きくするためではなく、文章の構造を表すためのタグです。）
<h★></h★>
<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>
h1の見出し
h2の見出し
h3の見出し
h4の見出し
h5の見出し
h6の見出し
Browser Display文字の上付き、下付き
<sup> や <sub> は、数式・化学式・注釈番号など、意味を持つ表現に使います。
<br> は改行タグです。
<sup></sup>
<sub></sub>
ax<sup>2</sup>+bx+c=0<br>
水素の化学式は、H<sub>2</sub>、酸素はO<sub>2</sub>です。
水素の化学式は、H2、酸素はO2です。 Browser Display
汎用的なブロックレベルの領域を指定（ひとまとめにする箱）
<div> は、複数の文字や画像を、一つの大きな「グループ」としてまとめるためのタグです。
このタグで囲むと、その前後で自動的に改行されます。（ブロック要素として表示されるため、前後が改行されたように見える）
<div></div>
<div style="width:100px;height:100px;background-color:#ff69b4;">背景色をピンクに指定</div>
<div style="width:250px;height:90px;background-color:#ffffff;text-align:center;">
<img src="lion1.gif" alt="ライオン"><br>中の文字や画像を<br>まとめてセンタリング</div>
中の文字や画像を
まとめてセンタリング
<img src="lion1.gif" alt="ライオン"> は、ライオンの画像を貼る為のタグ、
style="～" の部分は、スタイルシートです。
汎用的な範囲を指定（ここだけ装飾）
<span> は、文章の中の「ここから、ここまで」と、一部分だけを指定したいときに使います。
前後に改行は入りません。文章の途中の文字に色をつけたり、小さなアイコンを添えたりするのに便利です。
<span></span>
『トワイライト』の<span style="color:#ffffff;background-color:#00cc33;">エドワード</span>になりたい！
リスト
順不同のリストは、<ul> と <li> で、
番号付きのリストは、<ol> と <li> で作ります。
前者の場合は、先頭に黒丸が付き、後者の場合は、先頭に数字が付きます。
リストは、字下げ（インデント）された状態で表示されます。
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<p>◆ 好きな映画ベスト３ ◆</p>
<ul>
<li>ロード・オブ・ザ・リング</li>
<li>トワイライト</li>
<li>ゲーム・オブ・スローンズ</li>
</ul>
<p>◆ 二度と観たくない映画ベスト３ ◆</p>
<ol>
<li>リング</li>
<li>シャイニング</li>
<li>死霊のはらわた</li>
</ol>
◆ 好きな映画ベスト３ ◆
- ロード・オブ・ザ・リング
- トワイライト
- ゲーム・オブ・スローンズ
◆ 二度と観たくない映画ベスト３ ◆
- リング
- シャイニング
- 死霊のはらわた
定義リスト（名前と説明のリスト）
<dl> ～ </dl> で全体を囲み、リストを作ります。
<dt></dt> に「名前（用語）」、
<dd></dd> に「その説明」を書いて一つのセットにします。
このセットを並べることで、Q&A や用語集などをきれいに作ることができます。セットの数は自由に追加できます。
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt>ロード・オブ・ザ・リング</dt>
<dd>フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。</dd>
<dt>トワイライト</dt>
<dd>人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。</dd>
</dl>
- 『ロード・オブ・ザ・リング』
- フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。
- 『トワイライト』
- 人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。
整形済みテキスト表示（そのまま表示）
<pre> は、スペースや改行を入力した通りに表示するためのタグです。
画面上でも、書いた時と同じレイアウトを保ちたい場合（プログラムのコードを表示する際など）に使用します。
<pre></pre>
<pre>
『ロード・オブ・ザ・リング』
あらすじ：
フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。
エルフやドワーフや魔法使いも出てくるよ。
『トワイライト』
あらすじ：
人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。
様々な吸血鬼の仲間たちも出てくるよ。
</pre>
『ロード・オブ・ザ・リング』
あらすじ：
フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。
エルフやドワーフや魔法使いも出てくるよ。
『トワイライト』
あらすじ：
人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。
様々な吸血鬼の仲間たちも出てくるよ。
Browser Display
テキストにルビを振る
テキストにルビ（ふりがな）を振るためのタグです。<ruby> でルビを振る対象の文字を囲み、
<rt> の中に表示したいルビを記述します。
<ruby> は現在の HTML でも推奨されている正式なタグです。
<ruby>
<rt></rt>
</ruby>
<ruby>
漢字<rt>かんじ</rt>
</ruby>
背景色をつけて、角を丸くする
HTML + CSS（インラインスタイル）
<div style="background: #ffecb3; padding: 20px; border-radius: 15px;">背景がついた！</div>
「border-radius: 15px;」は、角を丸くするための指示です。
直角（90度）である角を、半径 15px の円のカーブで切り取ります。
数字を大きくするほど丸みが強くなり、正方形に対して 50% を指定すると完全な円になります。
文字をピカピカ（？）させる
HTML + CSS（インラインスタイル）
<span style="color: red; font-size: 30px; text-shadow: 2px 2px 5px gray;">影がついた！</span>
「text-shadow: 2px 2px 5px gray;」は、文字に影をつけて、立体感を出したり目立たせたりする指示です。
4 つの値にはそれぞれ役割があります。
2px (1つ目)：影を右にどれくらいずらすか。
2px (2つ目)：影を下にどれくらいずらすか。
5px (3つ目)：影のぼかし具合。数字が大きいほど、ふわっと広がります。
gray：影の色。ここではグレーを指定しています。
「1. HTML タグを使おう」でも触れました通り、これまで
HTML タグにインラインスタイル（style=""）を追加してきましたが、本来 CSS は 1 箇所にまとめて管理するのが望ましい方法です。
インラインスタイルの書き方に慣れてきたら、次は HTML の <style> タグ内にまとめたり、
さらに発展させて別ファイル（CSS ファイル）として外部化したりするようにしましょう。
CSS を 1 箇所にまとめて記述することで、サイト全体のデザインを一括で変更でき、コードの見通しも格段に良くなります。
次の「CSS を使って点滅」「CSS で作るマーキー」は、スタイルシートを別にまとめた記述例です。ぜひ参考にしてください。
また、<style> タグ内にまとめる具体的な方法は、「Webページを作ろう」のページも役立つはずです。
次の、「CSS を使って点滅」「CSS で作るマーキー」には、常に動き続けている要素が含まれます。 光の点滅や画面の揺れに敏感な方は、閲覧にご注意ください。
CSS を使って点滅
CSS アニメーションで、文字を点滅させます。
HTML
<p class="blink-infinite">この文字はずっと点滅します</p>
<p class="blink-3times">この文字は3回点滅したら止まります</p>
CSS
/* ずっと点滅し続けるクラス */
.blink-infinite {
animation: blink-animation 5.0s infinite;
}
/* 3回だけ点滅して止まるクラス */
.blink-3times {
animation: blink-animation 2.0s 3; /* 回数を3にする */
}
/* 点滅の動きのルール（不透明度を 1 から 0 にする） */
@keyframes blink-animation {
0% { opacity: 1.0; } /* 見える */
50% { opacity: 0.0; } /* 消える */
100% { opacity: 1.0; } /* また見える */
}
この文字はずっと点滅します
この文字は3回点滅したら止まります
Browser DisplayCSS で作るマーキー
CSS アニメーションで、文字や画像をスクロールさせます。
HTML
<div class="marquee-box">
<div class="m-inner pattern-infinite">
ずっとスクロールさせたい文字
</div>
</div>
<div class="marquee-box">
<div class="m-inner pattern-2times">
2回だけスクロールさせたい文字
</div>
</div>
<div class="marquee-box">
<div class="m-inner pattern-stop">
<img src="画像のURL" alt="画像の説明">
</div>
</div>
CSS
.marquee-box {
overflow: hidden;
white-space: nowrap;
padding: 8px 0;
}
/* --- 共通：動く中身のベース --- */
.m-inner {
display: inline-block;
width: max-content;
padding-left: 100%; /* 右端からスタート */
}
.m-inner img {
display: inline-block;
vertical-align: bottom;
margin: 0;
}
/* --- 【1】 ずっと走り続ける --- */
.pattern-infinite {
animation: scroll-infinite 20s linear infinite;
}
@keyframes scroll-infinite {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* --- 【2】 2回走って、画面外へ消える --- */
.pattern-2times {
animation: scroll-out 20s linear 2 forwards;
}
@keyframes scroll-out {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* --- 【3】 1回目は通過、2回目に中央で止まる --- */
/* 3番：中央で止まる電車専用 */
.pattern-stop {
/* 2段階のアニメーションを連続で動かす */
/* 「1回目は通り過ぎる(10s)」「2回目は中央で止まる(10s)」 */
animation:
step1-pass 10s linear 1,
step2-stay 10s linear 10s 1 forwards;
}
/* 1段階目：右から左へ */
@keyframes step1-pass {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* 2段階目：右から出てきて中央で止まる */
@keyframes step2-stay {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* 止まる位置（-50%〜-70%で調整） */
}
- スピードを変えたい:
10s（10秒）の数字を大きくするとゆっくり、小さくすると速くなります。 - 止まる位置を微調整: 「
transform: translateX(-50%);」の%の数字で調整します。
このページは、AI（ChatGPT & Gemini）のアドバイスを取り入れて、より分かりやすく作り直しました。 また、コードやサンプル表示を読みやすくするため、私のお気に入りのフォント設定を適用しています。 そのため、一般的なブラウザの初期設定とはサイズ感やフォントの種類が違って見えるかもしれませんが、ご了承ください。
