HTMLを始めるにはまず
何からしたらいいの？
HTML（HyperText Markup Language）とは
HTMLとはただの文字に対して、タイトルや文章などを判別させるための【タグ】を書き、
Google等の検索エンジンにその文字が何を意味しているのかを伝えるためのものです。
HTMLを書き始めるためにはまずテキストエディタを選ぶことが重要です。
Windowsに標準で搭載されているメモ帳は、文字コードの制限があり、Web開発には適していません。
代わりに、以下のテキストエディタをお勧めします。
こちらエディタがおすすめ
- Visual Studio Code:
強力なコードエディタで、タグハイライトや拡張機能などが豊富に備わっているのでコードを書く際には一番重宝しています。
Visual Studio Code公式サイトからダウンロード - Sublime Text:
シンプルで使いやすいテキストエディタで、豊富な拡張機能があります。
Sublime Text公式サイトからダウンロード - Atom:
GitHubが開発したオープンソースのテキストエディタで、多彩な拡張機能が利用できます。
Atom公式サイトからダウンロード
エディタデザインや使い勝手を確認し、自分好みのものを使用してください。
このタグを覚えておけばHTMLの基本構造は作れます
すべてのHTMLの基本となる構造
<!-- ページ全体の構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- パソコンとスマホ、それぞれの画面サイズに合わせるための記述 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトのタイトル</title>
<!-- スタイルシートのリンク -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ここに専用のタグを記述して開始します。 -->
<!-- JavaScriptファイルのリンク -->
<script src="js/script.js"></script>
</body>
</html>
これが無ければはじまらない。HTMLの基本となる骨組み。
主にタグ同士を囲んでグループ分けするためのタグ
<div></div>
<div></div>
<div class="group">
<h2>タイトル１について</h2>
<p>メインの文章</p>
</div>
<div class="group">
<h2>タイトル２について</h2>
<p>メインの文章</p>
</div>タグ自体には意味はない。
世界で一番使われているタグ。
文章を段落ごとに書くためのタグ
<p></p>文章以外にも使い道はあるポピュラーなタグ。
順番関係なく箇条書きにしたい場合
<ul>
<li>テキスト<li>
<li>テキスト<li>
<li>テキスト<li>
</ul>順番を付けて箇条書きにしたい場合
<ol>
<li>テキスト<li>
<li>テキスト<li>
<li>テキスト<li>
</ol>リンクを付けたい場合
<a href="対象のURL">表示したいテキスト</a>
<a href="対象のURL" target="_blank" rel="noopener">自分のサイト以外のリンク</a>target=”_blank”は自分のサイト内でも使うことはある。
ちょっと高度なタグ
サイトのヘッダーを意味するタグ
<header></header>
<header></header>
<header class="l-header">
<h1><a href="/">ロゴ</a></h1>
</header>基本的にはタイトルロゴのある個所に使用。
メインコンテンツを指すタグ
<main></main>
<main></main>
<main class="l-content">
<!-- メインビジュアルセクション -->
<section class="main-visual">
<h2>タイトル</h2>
</section><!-- /.main-visual -->
<!-- リードセクション -->
<section class="lead">
<h2>タイトル</h2>
<p>文章文章文章文章文章文章文章</p>
</section><!-- /.lead -->
</main>本文など主となるコンテンツを囲うタグ。
divと似ているが、コンテンツとしての構造を意味するタグ
<section></section>
<section></section>
<!-- メインビジュアルセクション -->
<section class="main-visual">
<h2>タイトル</h2>
<!-- メインビジュアルボックス1 -->
<div class="main-visual_box">
<h3>小タイトル</h3>
<p>文章文章文章文章文章文章文章</p>
</div><!-- /.main-visual_box -->
<!-- メインビジュアルボックス2 -->
<div class="main-visual_box">
<h3>小タイトル</h3>
<p>文章文章文章文章文章文章文章</p>
</div><!-- /.main-visual_box -->
</section><!-- /.main-visual -->
<!-- リードセクション -->
<section class="lead">
<h2>タイトル</h2>
<p>文章文章文章文章文章文章文章</p>
</section><!-- /.lead -->主にdivよりもさらに大きなグループに使う
フッターを意味するタグ
<footer></footer>
<footer class="l-footer">
<small>copyright xxx all right reserved.</small>
</footer>サイトのフッターを意味するタグ
主にコピーライト「©20xx all right reserved.」や、サイト内のすべてのリンクの配置に使う
全部まとめたのがこちら
サイトの用途に合わせて適切なタグを使うことでより検索エンジンに理解してもらえ、
検索にヒットしやすくなります。
<!-- ページ全体の構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトのタイトル</title>
<!-- スタイルシートのリンク -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ヘッダー -->
<header class="l-header">
<h1><a href="/">ロゴ</a></h1>
</header>
<!-- メインコンテンツ -->
<main class="l-content">
<!-- メインビジュアルセクション -->
<section class="main-visual">
<h2>タイトル</h2>
<!-- メインビジュアルボックス1 -->
<div class="main-visual_box">
<h3>小タイトル</h3>
<p>文章文章文章文章文章文章文章</p>
</div><!-- /.main-visual_box -->
<!-- メインビジュアルボックス2 -->
<div class="main-visual_box">
<h3>小タイトル</h3>
<p>文章文章文章文章文章文章文章</p>
</div><!-- /.main-visual_box -->
</section><!-- /.main-visual -->
<!-- リードセクション -->
<section class="lead">
<h2>タイトル</h2>
<p>文章文章文章文章文章文章文章</p>
</section><!-- /.lead -->
</main>
<!-- フッター -->
<footer class="l-footer">
<small>copyright xxx all right reserved.</small>
</footer>
<!-- JavaScriptファイルのリンク -->
<script src="js/script.js"></script>
</body>
</html>
