ぱたぱたアニメ館

「このタグを書くと、どう見える？」 「CSS（style=""）を加えると、どう変わる？」 このページでは、その変化をシンプルに体験していきます。 Webの基本である「タグ」と「スタイル」の関係を知れば、文字や画像は思い通りに操れます。 まずは色々と書き換えて、画面が変わる楽しさを味わってみてください。

＜表示のさせ方＞

1. PCやスマホのメモ帳に、好きなタグを打ち込みます。
2. 名前を test.html にして保存。これでWebページになります。（必ず「.html」）
3. そのファイルをブラウザで見れば、表示されます。
4. CodePen などの練習サイトならもっと簡単です。

HTML のみ

<b></b>

<b>太字になります</b>

<b> のように要素の始まりを示すものを 開始タグ、
</b> のように要素の終わりを示すものを 終了タグ（閉じタグ） と呼びます。

「重要だから太くする」なら、<strong> タグを使うのが今の主流です。

<strong>太字</strong>になります

HTML + CSS（インラインスタイル）

<b>タグは現在も表示されますが、単に見た目を太くしたいだけなら、CSS が推奨されます。 インラインスタイルになりますが、HTML タグの中に 「style="..."」 と書くことで、CSS を使って文字を太くできます。 「style="..."」 は「今からデザインを指示するよ！」という合図です。

以下の「font-weight: bold;」は「太字にする」という CSS のルールです。「font-weight」には、 100, 200, 300, 400, 500, 600, 700, 800, 900, bold などが指定できます。

<span style="font-weight: bold;">太字</span>になります
<p style="font-weight: bold;">太字になります</p>

いろんなパターンがありますが、少しずつ覚えていきましょう。

HTML + CSS（インラインスタイル）

<span style="font-size: 24px;">文字</span>が大きくなります
<p style="font-size: 24px;">文字が大きくなります</p>

font-sizeには、数値＋単位（px, em など）、％、small、large などが指定できます。

HTML + CSS（インラインスタイル）

<span style="color: #ff0000;">文字</span>は赤くなります
<p style="color: red;">文字は赤くなります</p>

文字の色は、「カラーコード（色番号）」 か 「色の名前（英語）」で指定します。（すべての色の名前が使えるわけではありません。）

色の名前（一部）

HTML のみ

<i></i>

<i>斜体になります</i>

「専門用語や強調」なら、<em> タグを使うのが一般的です。

ここは<em>重要</em>です

HTML + CSS（インラインスタイル）

単に斜めにしたいだけなら、「style="font-style: italic;"」 が推奨されます。

<span style="font-style: italic;">文字</span>が斜めになります
<p style="font-style: italic;">文字が斜めになります</p>

HTML のみ

<u></u>

<u>文字にアンダーラインを引く</u>

HTML + CSS（インラインスタイル）

リンクと見間違われやすいため、デザイン目的の下線は 「style="text-decoration: underline;"」 で引くのが一般的です。

<span style="text-decoration: underline;">文字</span>に下線を引きます
<p style="text-decoration: underline;">文字に下線を引きます</p>

HTML のみ

<s></s>

<s>文字に取り消し線を入れる</s>

HTML + CSS（インラインスタイル）

「もう正確ではない情報」という意味で使うなら、<s> タグで大丈夫ですが、 デザインとして使うなら 「style="text-decoration: line-through;"」 が推奨されます。

<span style="text-decoration: line-through;">文字</span>に取り消し線を入れる
<p style="text-decoration: line-through;">文字に取り消し線を入れる</p>

HTML + CSS（インラインスタイルで色と大きさを指定）

タグは、いろいろ組み合わせることができます。文字の大きさ、 文字の色（lime / #00ff00）、 太さ、斜体、アンダーライン、 取り消し線を組み合わせてみます。 タグを閉じるときは、後から開いたタグを先に閉じてください。

<p style="font-size: 24px; color: #00ff00;"><b><i><u><s>タグの組み合わせ</s></u></i></b></p>

HTML + CSS（インラインスタイルで全て指定）

<span style="font-size: 24px; color: #00ff00; font-weight: bold; font-style: italic; text-decoration: underline line-through;">
CSSの組み合わせ
</span>

文章に改行を入れてみましょう。（<br> に閉じタグはありません。）

<br>

ここに<br>改行を入れます

リンクを貼ってみましょう。リンクとはページからページへの移動を指します。 「mailto:」はメールアドレスへのリンクです。

<a href="リンク先のURL"></a>

<a href="mailto:メールアドレス"></a>

<a href="https://pata2.jp/">ぱたぱたアニメ館</a>
<a href="mailto:**@**.**">メール</a>

画像へのリンクは、 [画像をリンクにする] をご参照ください。

<img src="画像のURL" alt="画像の説明">

<img src="lion1.gif" alt="ライオン">
<img src="image/dog3.gif" alt="犬" width="25" height="29">
<img src="https://pata2.jp/www/image/taurus.gif" alt="おうし座">

Browser Display

レイアウト崩れ防止のために、横幅（width=""）と縦（height=""）の指定が推奨されています。 alt="" には、画像の内容を説明する文字を入れます。

画像URLの「フルパス（絶対パス）」と「相対パス」

相対パス：

「相対パス」は、今のファイルから見て、画像がどこにあるかを指定する方法です。

index.html に dog3.gif を貼る

<img src="image/dog3.gif" alt="犬の画像">

abc.html に dog3.gif を貼る（index.html と同じ階層なので書き方も同じ）

<img src="image/dog3.gif" alt="犬の画像">

page フォルダ（ディレクトリ）の 01.html に dog3.gif を貼る

<img src="../image/dog3.gif" alt="犬の画像">

「../」 で一度上の階層（ルート）へ戻り、そこから image フォルダの中を見に行くというイメージです。

フルパス / 絶対パス（ネット上の住所）:

「https://」 から始まる住所を直接書く方法です。

<img src="https://pata2.jp/www/image/dog3.gif" alt="犬の画像">

この画像を大きくしてみましょう。 横幅と高さはピクセル（px）で指定します。 ピクセルがどのぐらいの大きさなのか、100×100 と 200×200 の大きさ（いずれも単位は px )のボックスを作りましたので参考にしてください。

<img src="画像のURL" width="横幅" height="高さ" alt="画像の説明">

<img src="umaya-09.gif" width="120" height="100" alt="うまやどくん">

Browser Display

リンクの方法は、「文字でのリンク」と同じです。文字の代わりに画像を使います。 <a> タグで挟むと画像がリンクボタンになります。

<a href="リンク先のURL"><img src="画像のURL" alt="画像の説明"></a>

<a href="https://pata2.jp/"><img src="dinosaur2r.gif" alt="首長竜" style="border: none;"></a>

Browser Display

画像をリンクした場合に青い枠が出る場合には、「style="border: none;"」を追加します。