<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="" />
<title>超絶簡単！5分ですべて分かるHTML講座</title>
<style>
body{
margin:1em 6em;
}
header,footer{
}
h1{
margin:0;
}
header{
border-radius:10px 10px 0 0;
}
aside{
margin:0 1em 0 0;
}
aside h2::before{
content:"";
}
</style>
</head>
<body>
<header>
<!--ページ全体の見出し-->
<h1>超絶簡単！5分ですべて分かるHTML講座</h1>
</header>
<main>
<article style="width: calc(100% - 17em);">
<!--記事本体-->
<section>
<h2 id="chap1">全体の書式～マージンを作る</h2>
<h3 id="chap1-1">初期状態のHTML</h3>
<p>スタイルシートを適用しない生のHTMLは書式をブラウザ任せにしているのであまり見やすくはありません。特に文字が画面横にびっちり埋められているのが読みにくい！書籍でもそうですが、マージン(余白)のない文章は非常に読みづらいものなのです。</p>
<h3 id="chap1-2">中央揃え</h3>
<p>左に文字がきっちり埋まってしまうHTML（ブラウザ）の初期表示に対して、変化を持たせようとして流行ったのが「センタリング」です。ワープロソフトでも最初にやりたくなる書式設定です。ただ見出しをセンタリングするのは良いのですが、本文まるごとセンタリングするには通常はやりません。でもなぜか「ホームページ」ではそういう書式が横行したのです。いま改めて見てみると結構みっともないですね。当時から嫌う人は嫌っていて、この手の書式設定を行っているサイトを「蛸壺」サイトなどと呼んでいたりしました。</p>
<h3 id="chap1-3">引用</h3>
<p>なぜここで突然引用？実は引用を意味するタグblockquoteはブラウザでは左に余白を作ることが多いのです。それゆえ余白を作るためにblockquoteタグで全体を囲んでしまうテクニックが一時期はやりました。今にして思えば妙なテクニックです。もちろん今はそれをやってはいけません。</p>
<h3 id="chap1-4">表</h3>
<p>htmlで作る表は横幅を決められますので、本文全体を表組みにして横幅を適宜決めることでページ余白を作るテクニックが流行したこともあります。「引用」よりはよほど意味としてはまともなので、これはごく最近までは多くのサイトで用いられました。今でもそういうサイトは数多く残っていますが、やはり今は余り良くないとされています。</p>
<h3 id="chap1-5">スタイルシート</h3>
<p>そういう書式は、もはや改めていうまでもなく、スタイルシートで設定しましょう。</p>
</section>
<section>
<h2 id="chap2">HTMLタグ説明</h2>
<h3 id="chap2-1">段落を作る</h3>
<p>日本語では段落という概念が希薄ですが、小学校のときに「改行して一文字あける」と習った、あれのことです。HTMLでは「一文字あける」には一手間必要ですが、考え方は変わりません。</p>
<p>pは改行をするためのタグでは<strong>ありません</strong>。あくまで文章の内容的なひとまとまりである<em>「段落」</em>の範囲を示すためのタグです。もちろん開始タグと終了タグは<strong>必須</strong>です。逆にワープロソフトなどとは違って単に改行するだけでは段落を作ったことにはなりません。</p>
<h3 id="chap2-2">引用</h3>
<p>とにもかくにも引用をしてみよう。例えば次のような事例。</p>
<p>カールマルクスは『資本論』の冒頭で以下のように述べた。</p>
<blockquote>
<p>資本制的生産様式が支配している諸社会の富は、「商品の巨大な塊」として現われ、個々の商品はその富の要素形態として現われる。それゆえ我々の研究は、商品の分析から始まる。</p>
<p>商品は、なによりもまず、その諸属性によってなんらかの種類の人間的欲求を満たす一つのもの、一つの外的対象である。これらの欲求の性質、すなわちその欲求がたとえば胃袋から生じるか、想像から生じるかということは事態を何ら変えない。ここではまた、どのようにしてものが人間的欲求を満たすか－直接に生産手段として、すなわち享受の対象としてか、それとも、回り道をして、生産手段としてか－ということも問題ではない。(<cite>『資本論』</cite>)</p>
</blockquote>
<p>今こんなのを読む人は誰もいないだろうね。とりあえず引用してみた。</p>
</section>
<section>
<h3 id="chap2-3">表</h3>
<figure>
<table>
<caption>表 テーブルタグ説明</caption>
<tr>
<th>タグ</th><th>英語</th><th>日本語の意味</th>
</tr>
<tr>
<td>tr</td><td>table row</td><td>行を作る</td>
</tr>
<tr>
<td>th</td><td>table header</td><td>見出しセルを作る</td>
</tr>
<tr>
<td>td</td><td>table data</td><td>データセルを作る</td>
</tr>
</table>
</figure>
<p>表についての説明はやっぱり表を使って説明するのがコンパクトでいいね。というわけで表をみればだいたい分かると思う。</p>
<p>trが行、thが見出しセル、tdがデータセル。</p>
</section>
</article>
<aside style="width:15em;">
<nav>
<!--ナビゲーション領域-->
<h2>目次</h2>
<ul>
<li><a href="#chap1">全体の書式～マージンを作る</a>
<ul>
<li><a href="#chap1-1">初期状態のHTML</a></li>
<li><a href="#chap1-2">中央揃え</a></li>
<li><a href="#chap1-3">引用</a></li>
<li><a href="#chap1-4">表</a></li>
<li><a href="#chap1-5">スタイルシート</a></li>
</ul></li>
<li><a href="#chap2">HTMLタグ説明</a>
<ul>
<li><a href="#chap2-1">段落を作る</a></li>
<li><a href="#chap2-2">引用</a></li>
<li><a href="#chap2-3">表</a></li>
</ul></li>
</ul>
</nav>
<h2>リンク集</h2>
<ul>
<li><a href="http://www.soc.ryukoku.ac.jp/index.php" target="_blank">龍谷大学社会学部</a></li>
<li><a href="http://www.gakkai.ne.jp/jss/" target="_blank">日本社会学会</a></li>
<li><a href="http://www.w3.org/" target="_blank">World Wide Web Consortium</a></li>
<li><a href="http://www.stat.go.jp/data/index.htm" target="_blank">総務庁統計局統計データ</a></li>
</ul>
</aside>
</main>
<footer>
<!--著者情報-->
<address>瀬田大学社会学部3回生 C000000 高橋なつみ</address>
</footer>
</body>
</html>