1. HTMLでWebページを作成してみよう

htmlの基本構造①で全体構造や基本的な仕組みを紹介しました。
では実際に、HTMLソースを書いていきましょう。
今回は、wordpressの固定ページのコードエディターに、HTMLを書いて練習していきます。

1-1. まずは、セクションを作ってみましょう

<section>
<div>
<h1>障害者と健常者の
共生社会を目指す</h1>
<p>障害をひとつの個性として捉え
<span>健常者と障害者が共に認め合う社会を</span></p>
</div>
<div>
<dl>
<dt>事業所の紹介</dt>
<dd>A型事業所で作業を行っています。</dd>
<dt>WEBデザイン制作</dt>
<dd>Adobe XDを使用したWEBデザイン制作</dd>
</dl>
</div>
</section>

（使用するタグ）

・<section></section>セクションを作る。
・<p></p>段落を指定するためのタグで、文章をひとかたまりにする。
・<span></span>タグで囲んだテキストを強調→後ほどspanにCSSで強調文字にする。
・<div></div> でひとかたまりにする。
・ <dl></dl> <dt></dt> <dd></dd>で定義を作成する。

1-2.タグの基本構造は入れ子構造になります。

<div>
<h1>障害者と健常者の 共生社会を目指す</h1>
<p>障害をひとつの個性として捉え <span>健常者と障害者が共に認め合う社会を</span></p>
</div>

例えば上記のように、1つの囲みがありその中に見出しや段落で文書を記述するといった入れ子構造となっています。

2.CSS を書いてみましょう

cssを書いてみましょう。
書いたHTMLに、CSSを当てていきます。
今回は外観→カスタマイズ→追加CSSの箇所に書いていきます。

section {background-color:#3eb6bd;}
h1 {color:#fff;}
span {font-weight:bold;}

書いたら実際にブラウザで確認してみましょう！