文字や画像の修正から始めたい人のHTML入門。とりあえずここから！
HTMLが初めてで、一から作り上げようとすると、
CSS？相対リンク？<link～とか<meta～とか書いてあるけど何？という感じで、
あきらめたくなっちゃいますよね。
私も大学時代にサイト模写から急にチャレンジしたのですが、
相対リンクが理解できず、
画像は表示されない・・・
CSSが効かず全部シンプルに縦並び・・・
で挫折してしまった経験があります。
6年越しに基礎から勉強し直し、無事WEBデザイナーに転職成功したのですが、
まずは修正くらいから始めれば、挫折せずにステップアップできていたのではないかと感じました。
目次
ということで今回は！
「HTMLでちょっとした修正だけしたい」
「ホームページを一から作れなくてもいい」
というWEB担当者さまや
「HTMLの勉強、まずは文字や画像などを差し替えるくらいから始めたい」
というWEBデザイナー向けの
HTML修正の基礎知識をお届けします。
WEBサイトはhtmlとcssでできている
ここではざっくりとしか説明しませんが、基本的にWEBサイトはHTMLとCSSでできています。
HTMLに表示したい内容を書いて、それをレイアウト・装飾しているのがCSSです。
ということで、今回はテキスト修正や画像の差し替えをしたいので、
○○.htmlファイル（トップページならindex.html）を編集してあげるとOK！
htmlファイル内には大きく2つの枠がある
htmlファイルを開いてみると・・・
なんかごちゃごちゃ難しいことがいっぱい書いてある・・・
と思うかもしれません。
でも大丈夫！
ちょっとした見方のコツが分かれば、どこを修正すればよいか簡単に分かります！
htmlは大きく分けて2つの枠に分かれています。
<head></head>に囲まれている部分と、
<body></body>に囲まれている部分です。
それを<html></html>というタグで囲むことでhtmlファイルが成り立っています。
<head></head>内にはページの基本設定が書いてあって、
実際にWEBサイトには表示されない部分です。
「○○.cssを使って見た目を整えます」など様々な裏設定を書いていくところで、
修正程度では基本いじりません。
<body></body>に書かれているのが実際にWEBサイトで表示される部分で、
修正するときはここの文章やコードを触っていきます。
<body></body>に囲まれている部分を見つけて、その中だけ見ていけばOKなんです！
6つのタグを覚えて、修正しよう！
どこを見ていけばいいか分かったら、修正を始めていきましょう！
文字や画像は、タグというもので囲って入れてあげます。
タグは<〇●>から始めて、表示したい内容を書いて、</〇●>で閉じてあげます。
タグには種類があり、入れるものによって〇●の部分を変えます。
中身に意味づけしてあげるのがタグです。
簡単な修正だったら以下の６つのタグだけ覚えればだいたいOK！
知らないタグが出てきたら、ググりましょう！
<h1> ～ <h6> タグ
タイトルを表示させるタグ。
<h1>タイトルが入ります。</h1>
<h1>＝大見出し、<h2>＝中見出し、<h3>＝小見出し、・・・
と思ってもらえたら分かりやすい。
本と一緒で、大見出しの次に中見出し・・・と順番に構成していく。
<p>タグ
文章を入れるときに使います。
<p>段落の文章が入ります。<br>段落内の改行はbrを使います。</p>
<p>段落単位でくくってあげます。</p>
段落単位で括ってあげ、段落替えしないただの改行には<br>タグを使います。
<img>タグ
画像を表示させたいときに使います。
<img src="画像のURL" alt="その画像が何であるかの説明" />
まるっと覚えてしまいましょう。
<img>タグは最後に/を追加して閉じタグを省略します。
<li>タグ
箇条書きのリストを表示したいときに使います。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
という風に、<ul></ul>タグで囲んであげます。
<a>タグ
他のページにリンクさせたいときに使います。
<a href="リンクさせたいサイトのURL">ここをクリック</a>
という風に、<a>タグで囲んだ要素をクリックするとリンク先に飛ぶように設定できます。
<div>タグ
意味のないただの箱です。
<div>
<p>divの中にpタグなどいろいろ入れてあげます。</p>
</div>
cssでスタイルを入れたいときに、必要に応じてこれで囲みます。
まとめてコードにするとこんな感じ
これで簡単な修正ができる！
まずは文字や画像の差し替えからはじめて、
少しずつCSSも触れるようになってくるとできることの幅が格段に拡がっていきます！
少しずつ進んでいきましょう！
