日本経済大学 情報系講座 資料集

Webサイト作成A（第10回）

—

by

idia-admin
in

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>

img

画像を表示する

src=”画像のURL”

alt=”画像の説明”

終了タグは不要

<img src="https://idia.jp/cat.jpg" alt="ねこの画像">

クラスとID

要素（タグ）に名前をつける2つの方法

クラス

ページ内で何度も使える

class=”クラス名”

ID

ページ内で一度しか使えない

id=”ID名”

<section id="my_id">
	<ul>
		<li class="my_class">ねこ</li>
		<li class="my_class">いぬ</li>
		<li class="my_class">とり</li>
	</ul>
</section>

CSS

基本

セレクタ（どれに対して）、プロパティ（何を）、値（どうする）、を指定する

セレクタ {
	プロパティ: 値;
}

文字に関するCSS

font-size: 値;
color: 値;

背景に関するCSS

background: 値;

大きさや余白に関するCSS

width: 値;
padding: 値;
margin: 値;

本日の提出課題例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学籍番号</title>
    <style>
    /* ここにCSSを書きます */
    #section-1 {
        background: #aaaaaa;
        padding: 20px;
    }

    h1 {
        font-size: 50px;
        background: #000000;
        color: #ffffff;
        padding: 10px;
        margin: 0;
    }

    h2 {
        font-size: 25px;
        color: #ff0000;
        background: #eeeeee;
        padding: 10px;
        margin: 10px;
    }

    .box-li {
        background: #66aa66;
        color: #ffffff;
        padding: 20px;
        margin: 10px;
    }
    /* ここにCSSを書きます */
    </style>
</head>
<body>

<section id="section-1">
    <h1>犬と猫、どっちがかわいい？</h1>
</section>

<section id="section-2">
    <h2>犬のほうがかわいい！</h2>
    <div class="box-ul">
        <ul>
            <li class="box-li">人に懐く</li>
            <li class="box-li">一緒に散歩できる</li>
            <li class="box-li">頼りになる</li>
        </ul>
    </div>
</section>

<section id="section-3">
    <h2>猫のほうがかわいい！</h2>
    <div class="box-ul">
        <ul>
            <li class="box-li">時々甘えてくれる</li>
            <li class="box-li">やわらかい</li>
            <li class="box-li">孤高の存在</li>
        </ul>
    </div>
</section>
    
</body>
</html>
error: Content is protected !!