ITエンジニアのプレイングマネージャー化応援サイト

2.見出しとリストで文章の構造を表現する

ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

見出しを作成する

前回は「1.HTMLとCSSの雛形を作成する」方法について学びました。

今回は、その雛形に見出しとヘッダーとフッターを追加することで、読み手に文章の構造が伝わりやすくしてみたいと思います。

見出し

見出しを使うと文章の構造を示すことができます。

<アウトプット>

h1の見出しです

h2の見出しです

h3の見出しです

h4の見出しです

h5の見出しです
h6の見出しです

(注:このページにはCSSによる装飾がかかっています)

 

<ソースコード>

h1~h6まであり、数字が大きいほどだんだん細かい見出しになります。

表示したい見出しのサイズに応じて、h1~h6を使い分けます。

ちなみに、“h”というのはheading(見出し)という意味です。

 

リストを作成する

番号付きリストや箇条書きリストを使うことがあります。
 
<アウトプット例:番号付きリスト>
  1. ひつまぶし
  2. ういろう
  3. もつ煮込み
  4. 天むす
<アウトプット例:箇条書きリスト>
  • ひつまぶし
  • ういろう
  • もつ煮込み
  • 天むす
<ソースコード>

どちらも<li>タグを使うという点では同じです。

ちなみに、“li”というのはlistという意味です。

このリストを<ol>タグで囲めば番号付きになり、<ul>タグで囲めば箇条書きになります。

それぞれ、“ol”はordered list の略で順序のあるリスト、“ul”はunordered listの略で順序がないリストです。

とても覚えやすいですね。

 

以上、今回は「見出しとリスト表示」を学びました。

次回は、「段落と改行で見やすくする」方法について学んでいきましょう。

 

 

新人エンジニア向けHTML講座の一覧に戻る

新入社員研修ポータル

IT企業の人財育成に関することなら全てお任せ下さい TEL 0120-559-463 受付時間 10:00 - 17:00 (土・日・祝日除く)

ZOOMを使った遠隔研修メニュー(PDFが開きます)

ZOOMを使った遠隔研修

新人エンジニアのためのJavaタイピングゲーム

新人プログラマのためのプログラミング動画

YouTubeチャンネル

お問い合わせはこちらから

お名前 (必須)

メールアドレス (必須)

題名(件名)

メッセージ本文

確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。

新入社員研修ポータル

PAGETOP
Copyright © Say Consulting Group, Inc. All Rights Reserved.