HTMLタグ
html
HTML文書全体を表す
<html></html>head
HTML文書の設定（メタ情報）
<head></head>body
HTML文書の本体であることを表す
<body></body>title
HTML文書の名前を指定する
<head>内に記述する
<title></title>h1〜h6
見出しを表す
「heading」の「h」
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>p
段落を表す
「paragraph」の「p」
<p></p>a
段落を表す
「anchor」の「a」
href：「HyperText Reference」参照先の情報
<a href="URL"></a>ul
順番なしリストを表す
同格のリストや箇条書きに
「unordered list」のul
li：リスト項目
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>ol
順番ありリストを表す
手順や流れなど順序のあるリスト
「ordered list」のol
li：リスト項目
<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>dl
定義リストを表す
言葉の説明などのリスト
「definition list」のdl
dt：定義する用語：「definition term」
dd：用語の説明：「definition description」
<dl>
<dt>用語1</dt>
<dd>用語1の説明</dd>
<dt>用語2</dt>
<dd>用語2の説明1</dd>
<dd>用語2の説明2</dd>
</dl>section
文章や情報のまとまりを表す
<section></section>div
グループ化する
<div></div>span
範囲指定する
<span></span>br
改行する
終了タグは不要
<br>色と情報
赤色（red）
■
- 情熱、危険、興奮、革命、勇気、愛国心、怒り、力、攻撃、野蛮、赤字、セール、採点
- 火、血、トマト、イチゴ、鳥居、毒、ポスト、消防車、紅葉、口紅、日の丸、スポーツカー
- 赤色は強調や目印として便利な色である。特に利用頻度が高いと思われる、白黒で構成されたデザインには優れたアクセントとなる。度合いの高さなどの表現にも用いられる。
黄色（yellow）
■
- 軽快、陽気、冗談、明快、親切、不快、乾燥、日光、注意、ポップ、コメディ
- バナナ、アシナガバチ、カレー、重機、光、雷、警告灯、太陽、砂、卵
- 赤と同様、視線を集める効果がある。黄色は白などの明度の高い背景では目立ちにくいため、輪郭線を使ったり、明度の低いものの中で使うことで本来の効果を発揮できる。
緑色（green）
■
- 平和、自然、エコロジー、安全、新鮮、若さ、繁栄、回復、安定、癒し
- 葉、野菜、緑茶、メロン、キュウリ、カエル、エメラルド、ピーマン
- 緑色は彩度を上げると現代的な印象に、逆に彩度を下げるとアンティークな印象になる。
青色（blue）
■
- 鎮静、清涼、爽快、清純、清らかさ、冷静、内気、悲哀、失望、憂鬱、理知的
- 海、空、水、地球、涙、雨、トルコ石、ジーンズ
- 青色は赤色の補色ではないが、赤色の逆の役割を担うことが多い。度合いの低さなどの表現によく用いられる。
紫色（purple）
■
- 威厳、優雅、気品、王位、心配、権威、好奇、緊張、魅力
- ナス、袈裟、仏具、アメジスト、紫外線、ブドウ、スミレ
- 紫色のもつ気品や高貴さを活かすには、彩度の調整と全体の中での使用割合の調整がポイントとなる。
茶色（brown）
■
- 渋さ、老年、高級、練達、豊穣、自然、田舎、素朴、頑固、保守、伝統
- 革、毛皮、馬、日焼け、土、ビール、コーヒー、チョコレート、木材、パン、葉巻
- 茶色は「高級」と「素朴」という一見真逆の情報を併せ持つ。これは「歴史がある」ことが共通している。
橙色（orange）
■
- 快活、温暖、健康、喜び、元気、騒々しさ、娯楽、実り、夕方、夏、美味しさ
- オレンジ、太陽、柿、ニンジン、カボチャ
- 橙色は食べ物の表現には欠かすことのできない色である。また活発さや元気さを表す色でもあり、赤色や黄色の代替をこなすこともできる。
桃色（pink）
■
- 女性、かわいらしさ、甘さ、恋、幼稚、春、華麗、妖艶
- 桃、晴れ着、桜、肉球、リボン
- 桃色は若い女性や幼児、小動物をイメージさせる。色の個性が強いため、白や黒とは相性が良いが、有彩色との組み合わせはぶつかり合う場合があるので彩度や明度を調整する必要がある。
白色（white）
■
- 清潔、潔白、清楚、優美、上品、冷たさ、平和、純情、無邪気、貞操、希望、冬
- 雪、雲、ご飯、牛乳、白衣、ウェディングドレス、病院、砂糖
- 白色はすべての色との相性が良い。背景としてはもちろん、有彩色を背景とした時には主役にもなれる。ただ、白の上に白を置く際は輪郭線や影などで存在を強調する工夫が必要である。
黒色（black）
■
- 暗黒、闇、罪悪、死、厳粛、悲哀、神秘、深遠、悲しみ、邪悪、高級、誠実、無個性
- 髪の毛、喪服、液晶画面、タイヤ、炭、墨、鎧、新聞
- 黒色も白色と同様、すべての色と相性が良い。ただ黒自身が持つイメージはネガティブなものが多いので、使用分量には注意しなければならない。
灰色（gray）
■
- 平凡、憂鬱、退屈、陰鬱、調和、曖昧、中立、地味、不安、没個性、ハイテク、未来
- 灰、曇り空、煙、アスファルト、コンクリート、都会、ネズミ
- 灰色も白や黒と同様、いろいろな色と組み合わせることができる。都会、ハイテクといった、有彩色だけでは表現できない情報をサポートする力をもつ。特に明度の高い色や蛍光色と組み合わせるとスポーティーで未来的な印象をあたえることができる。
本日の提出課題例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学籍番号</title>
</head>
<body>
<h1>日本経済大学のホームページ</h1>
<section>
<h2>キャンパスの紹介</h2>
<dl>
<dt>福岡キャンパス</dt>
<dd>福岡県太宰府市五条3-11-25</dd>
<dt>神戸三宮キャンパス</dt>
<dd>兵庫県神戸市中央区琴ノ緒町4-4-7</dd>
<dt>東京渋谷キャンパス</dt>
<dd>東京都渋谷区桜丘町24-5</dd>
</dl>
</section>
<section>
<h2>日本経済大学について</h2>
<ul>
<li>資料請求</li>
<li>オープンキャンパス</li>
<li>入試について</li>
<li>学費について</li>
</ul>
</section>
<section>
<h2>学長メッセージ</h2>
<p>自分の個性を認める。好きになる。未来はそこから始まります。大学って何をするための場所だと思いますか？学問を究め、将来の道を考える場所。好きなスポーツに打ち込み、その先の夢を手に入れる場所。答えはさまざまにあると思いますし、しっくりくる理由が見つけられないという人も多いでしょう。大学の門を叩く年齢も幅広くなってきましたが、多くの皆さんはまだ人生の入り口に立ったばかり。大人を唸らせる立派な答えを持っていなくとも大丈夫です。</p>
<p>「とは言っても、夢に向かって突き進んでいる同級生もいるし」「自分は学業もどちらかといえばおろそかだったし、得意なこともないし」そんな焦りもあるかもしれません。でも今の時点で、先を走っているように見える人が、このまま人生の勝者なのでしょうか。心の底から羨ましいと思える幸せな一生を送り続けるのでしょうか。そもそも人生の勝ち負けって何でしょうか。誰が決めるのでしょうか。昔に比べて、社会は多様性を受け入れるようになりました。それは人を測る物差しが増える豊かな社会です。そして幸せの定義を自分自身で決められる社会でもあります。</p>
<p>あなたは、今の自分を、誰かがつくった数少ない物差しで測ろうとしていませんか？そんなことで自分の未来に壁をつくろうとしていませんか？答えを出せる人とはどういう人なのでしょう。それは自分の個性や、好きに正直に生き、打ち込んできた人であり、目の前の課題から逃げずに、何とかしようとする人です。今、世界は予測不可能の時代と言われ、あらゆる分野のリーダーが、これまでのやり方では解決できない課題に直面し、苦悩しています。そして従来型のエリートではなし得ないような、この時代に思い切って答えを出せる人が求められています。</p>
</section>
</body>
</html>