HTML初心者向け｜どこが何のコードかすぐわかるやさしい説明書
これだけHTMLを使えば読みやすい記事になる！説明書
このページでは、「ここからここまでは何のコードなのか」を、やさしく説明します。
HTMLは、むずかしい暗号ではありません。1つ1つに名前と役目がある部品です。
全部覚えなくて大丈夫です。まずは、どのコードが何をしているかがわかればOKです。
このHTMLでできること
- 記事が読みやすくなります
- 大事な文を目立たせやすくなります
- コピペして文字を変えるだけで使いやすくなります
このページのコード例について
このページに出てくるコードは、説明のための例です。
「このタグはこんなふうに使われることがある」と見るためのものなので、まずは意味だけつかめば大丈夫です。
タグというのは、<p> や <h1> のような、HTMLの部品の名前です。
コードは「部品の集まり」です
HTMLは、1つ1つの部品が集まってできています。
それぞれの部品には、ちゃんと役目があります。
まずは「この部品は何をするものか」だけわかれば十分です。
例1：大きな見出しのコード
<h1>これだけHTMLを使えば読みやすい記事になる！</h1>ここからここまでが大きな見出しです。
<h1> から </h1> までは、ページの大きな見出しを表すときによく使う部品です。
このページが何について書かれているかを、最初に伝えたいときに使われることが多いです。
例2：本文のコード
<p>このテンプレは、コピペしてすぐ使える記事用のHTMLです。</p>ここからここまでが文章のひとかたまりです。
<p> から </p> までは、文章を1つのまとまりとして書くときによく使う部品です。
説明文、本文、案内文など、いろいろな文章に使えます。
この例では説明文として使っていますが、<p> は説明文だけのためのタグではありません。
例3：囲み箱のコード
<div style="border:1px solid #ddd; padding:12px;">
ここが大事なポイントです。
</div>ここからここまでが囲み箱です。
<div> から </div> までは、内容をひとまとめにするときによく使う部品です。
大事な文を囲んだり、いくつかの要素をまとめたりするときに使えます。
例4：リンクのコード
<a href="https://example.com">BOOTHで見る</a>ここからここまでがリンクのコードです。
<a> から </a> までは、クリックすると別の場所へ進めるリンクを作る部品です。
読者を次の場所へ案内したいときによく使います。
href="URL" の部分には、飛ばしたい先の住所を書きます。
例5：画像のコード
<img src="画像URL" alt="画像の説明">これは画像を表示するときに使うコードです。
<img> は、画像を出したいときによく使う部品です。
見た目で伝えたいときに使われることが多いです。
src には画像の場所、alt には画像の説明を書きます。
この説明書の流れ
- このHTMLは何をするコードかを知る
- コードは部品の集まりだと知る
- 大きな見出しのコードを知る
- 本文のコードを知る
- 囲み箱のコードを知る
- リンクのコードを知る
- 画像のコードを知る
- 書きかえていい場所を知る
- 最初はさわらなくていい場所を知る
書きかえていい場所
- タイトルの文字
- 本文
- リンク先
- ボタンの文字
- 画像の説明（altの中の文字）
最初はさわらなくていい場所
< > /の記号- タグの名前
- わからない英字の並び
ここを無理にいじると、見た目がくずれることがあります。
なので、最初は文字だけ書きかえるのがおすすめです。
ダウンロードはこちら
商品ページはこちらです。
最後に
このHTMLは、むずかしいことを覚えるためのものではありません。
まずはコピペして、少し書きかえる。
それだけで、記事はかなり見やすくなります。
「HTMLは無理」と思っていた人ほど、まず1回だけ試してみてください。
コメント
コメントを投稿