こんばんは。
今回は文字装飾タグやリストの作成方法を学びます。
ワードプレスを使っているとエディタで簡単に装飾できてしまうところですが、
自分でWEBサイトを作るとなるとまた勝手が違ってくるところです。
ここでしっかり基本を押さえて後は反復練習を積み重ねていきたいですね。
今回のレクチャー
今回学ぶのはこちら
- Bold（太字）、Italic（斜体）、コメントも使ってみよう。
- リストの作り方
リストの作り方はまさにこの●です。
レクチャー4：Bold（太字）、Italic（斜体）、コメントも使ってみよう。
よく文章の中で使う文字を強調したりする際に使うタグです。
Bold（太字）
<b>
<strong>
今回作成したWEBページのサンプル
<b><strong>とも同じ効果のタグ
Italic（斜体）
<i>
<em>
今回作成したWEBページのサンプル
<i><em>とも同じ効果のタグ
コメント
コメントは実際のウェブサイトの表示されないため、自分へのメモ、共同開発者へのメモとして使えます。
<!– あああああ –>
今回作成したWEBページのサンプル
引用・転用
どこかの文献を参考にした際に挿入するタグ
<blockqoute>
今回作成したWEBページのサンプル
リストの作り方
リストは項目を分かりやすく並べたり、文章を見やすくする際によく使います。
オーダーリスト（順序のあるリスト）
こちらは１．２．などのように順序のあるものです。よく何かの手順などで使われます。
<ol>
— インシデント –<li>ああああ</li>
— インシデント –<li>ああああ</li>
</ol>
一つの要素に他の要素が入る場合はインデントを付けると見やすくなる
今回作成したWEBページのサンプル
アンオーダーリスト（順序の無いリスト）
こちらは項目の洗い出しなどに使われるリストです。持ち物をリストを作る際に使います。
<ul>
— インシデント –<li>ああああ</li>
— インシデント –<li>ああああ</li>
</ul>
今回作成したWEBページのサンプル
ディフィニションリスト（定義リスト）
こちらははじめ意味が分かりませんでした…。
でも作ってみればどこかで見たことあるようなものだなーって分かります。
以下の三つのタグを使っていきます。
<dl>ディフィニションリスト
<dt>ディフィンションターム
<dd>ディフィニションディレクション
<dl>
— インシデント –<dt>ああああ</dt>
— インシデント –<dd>いいいい</dd>
— インシデント –<dt>aaaa</dt>
— インシデント –<dd>bbbb</dd>
</dl>
ニュースフィードなどの作成に使える
今回作成したWEBページのサンプル
メストリスト（複数リストの作成）
今回の内容の総まとめです。複数のリストを組み合わせて一つのリストを作成します。
オーダーリストの中にアンオーダーリストを入れたものを作成します。
<ol>
— インシデント –<li>ああああリスト
— インシデント ——<ul>
— インシデント ———-<li>aaaa</li>
— インシデント ———-<li>bbbb</li>
— インシデント ———-<li>cccc</li>
— インシデント ——</ul>
— インシデント –</li>
— インシデント –<li>いいいいリスト
— インシデント ——<ul>
— インシデント ———-<li>1111</li>
— インシデント ———-<li>2222</li>
— インシデント ———-<li>3333</li>
— インシデント ——</ul>
— インシデント –</li>
</ol>
今回作成したWEBページのサンプル
今回のレクチャーの感想
少しずつページのWEBサイトっぽくなってきたような気がします。
いまは中身が全然入っていないものになりますが、簡単な旅行の持ち物ページくらいなら作れそうですね。
リストが作れるようになると一気にサイトの見栄えが変わるので、段々とWEBプログラマーになっているのかなって時間がわいてきました笑
まあ、まだまだですけどね。。
では、また次回。
