---
# System prepended metadata

title: HTML 自習用

---

# HTML 自習用

## CHAPTER2(P24~P82)
### SECTION01 P24~
* タグで指示**h1**
### SECTION02 p29~
* 段落を表す**p**・・・==段落==を表す。
* 入力フォームを表す**input**
    * 空要素・・・開始タグや終了タグで挟む内容がないものをいう
:::success
空要素の種類
|area|｢イメージマップ｣を作るときに使う|
| ---| --
|base|WebサイトのベースとなるURLを指定する(headの要素内で利用する)
|br|改行を表す
|col|表組みの際のセルの設定を行う
|embed|埋め込みコンテンツを読み込む
|hr|区切りを入れる
|img|画像を挿入する
| input>|フォームの入力コントロール
| link|スタイルシートなどの<font color = "red">**外部ファイル**</font>を読み込む
| meta|headの要素内で<font color = "red">**定義**</font>などを記述する
| param|objectの要素内で<font color = "red">**設定**</font>などを記述する
| source|video要素内などで、<font color = "red">**リソースの場所**</font>を指定する
| track|vudeo要素内などで、<font color = "red">**字幕など**</font>を設定する
| wbr|改行が可能な位置を示す
:::

* 要素に追加情報を示す・・・**属性**
    * 属性・・・タグ名のあとに何かを記述するもの
        * type属性・・・==その入力フォームの形状や入力される内容==を指定する。
        * name属性・・・その入力フォームに==名前==を付ける
        * value属性・・・入力フォームに==表示される内容==を示す
* ボタンを設置する**button**
    * submit・・・送信ボタン
    * reset・・・リセットボタン
    * button・・・JavaScriptと組み合わせて利用するときに使う

#### HTMLの｢決まり文句｣
:::success

* <font color = "red">**!DOCTYPE html**</font>
* <font color = "red">**html**</font>
* <font color = "red">**head**</font>
    * <font color = "red">**meta charset="UTF-8"**</font>  
    * <font color = "red">**meta name="viewport" content="width=device-width"**</font>
    * <font color = "red">**title**,.,.,.,**/title**</font>
* <font color = "red">**/head**</font>
* <font color = "red">**body**</font>
* <font color = "red">**/body**</font>
* <font color = "red">**html**</font>
:::

* HTMLのバージョンを示すー**DOCTYPE**
* HTML文書であることを表すー**html**
* Webブラウザーに表示される内容を示すー**body**
* 表示されない内容を指定するー**head**
    * 文字コードを指定するー**meta(charset)**
    * ビューポートを指定するー**meta(viewport)**
    * Webページのタイトルを指定するー**title**

### SECTION03 P43~
**グローバル属性**

1. よく利用されるグローバル属性

| id | id(P63参照)を指定する |
| -------- | -------- |
| class | class(P63参照)を指定する|
| hidden | 要素を隠す |
| title | リンク要素などでツールチップに表示する内容を指定する |
| style | スタイルシートを記述する |

**CSSで利用できる単位**

1. 絶対単位(指定した数字がそのままの大きさとして反映される単位)


| px | 表示しているスクリーンの｢画素｣を基準とした単位 | 
| -------- | -------- |
| mm,cm,in     | ミリ、センチ、インチ。印刷で利用されることが多い     |
|pt | 1ポイント。1インチの1/72|
|pc | １パイカ。12pt|



2. 相対単位(親要素などの設定を基準に、相対的に決められる単位)


| em |  親要素の文字サイズを1emとした、相対的な大きさ | 
| -------- | -------- |
| rem     | ｢ルート要素｣の文字サイズを1renとした相対的な大きさ | 
| ex | 小文字の｢x｣の高さ。 |
| ch | ｢0｣の幅を基準とした大きさ |
| vh | ビューポートの高さの1/100 |
| vw | ビューポートの幅の1/100 |
| vmin | ビューポートの高さまたは幅で小さい方の1/100 |
| vmax | ビューポートの高さまたは幅で大きい方の1/100 |



**CSSを記述する場所**
* **インライン**
* **内部参照**・・・headの要素内に記述する方法
* **外部参照**・・・link要素で、外部のファイルを参照するために記述すること
    * rel属性・・・種類を指定
    * href属性・・・ファイルパスを作成
    * type属性・・・XHTML的な指定の方法だが、省略するのが一般的

### SECTION04 P56~

**sanitize.css**
https://csstools.github.io/sanitize.css/

**CSSからCSSを参照するー@import**

CSSは後から==読み込んだファイルのほうが優先度が高い==のでsanitize.cssはHTMLファイルで読み込まず、==CSSファイルから読み込む==ということもできる。

レイアウトを調整するー**divタグ**
**divタグ**・・・複数の要素をまとめるためのタグ

:::warning
id属性とclass属性の使い分け
* id属性・・・「id=Identify」と名の通り、==「唯一の値」==　という意味があり、1ページ内で1回しか使うことができない。
* class属性・・・何度もつくことができる・
:::

**背景色の変更**ー**background-color**

1. カラーネームで指定【background-color: black;】
2. rgbで指定【background-color: rgb(red, green, blue);】 
3. 16進数記法での指定【background-color:　#ff0033;】
4. rgbaでの半透明を使った指定【background-color:　rgba(0, 0, 0, .5);】
5. hsl及びhslaでの指定【background-color:　hsl(0, 100%, 50%);】

幅を指定するー**width**
**width**・・・ブロックの幅を決めるプロパティ

**ブロックを中央に揃える**

**ショートハンドプロパティ**

| margin-top | 要素の上の余白| 
| -------- | -------- | 
| margin-left  | 要素の左の余白 |
| margin-bottom | 要素の下の余白 |
| margin-right | 要素の右の余白 |
※左右の「margin」を｢auto｣とするとCSSで自動的に幅が取得されて、真ん中に来るように調整される。

枠線を引くー**border**

**ショートハンドプロパティ**
|  | | 
| -------- | -------- | 
| border-widht  | 枠線の幅 |
| border-style | 枠線の種類 |
| border-color | 枠線の色 |

上下左右のプロパティ
| border-top | 上部の枠線 | 
| -------- | -------- | 
| border-right  | 右側の枠線 |
| border-bottom | 下部の枠線 |
| border-left | 左側の枠線 |

上下左右に幅、種類、色を加えたプロパティ
|  | | 
| -------- | -------- | 
| border-top-widht  | 枠線の幅 |
| border-top-style | 枠線の種類 |
| border-top-color | 枠線の色 |

right、bottom、leftも同様

文字の色を変更するー**color**
bg-color同様の方法で、色の指定ができる

要素を角丸にするー**border-radius**
ボタンの角を少し丸めることができる

ドロップシャドウをかけるー**box-shadow**
ブロックに影を付ける。

フォームのラベルを指定するー**label**
input要素などのフォームパーツと共に利用される。
各フォームパーツの｢==ラベル==｣を設定するためのもので、｢==for==｣という特別な属性の指定ができる。
**for属性**・・・そのラベルの対象となるフォームパーツのid属性を指定できる。



２もらいます

# <u>****進研ゼミだってやったら勉強できるし、彼女もできるし、部活でも活躍できるようになるじゃろ？あれと一緒****</u>


わからな過ぎて1,2,5しかやってないの草


 例題１
:::spoiler
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>問1</title>
</head>
<body>
</body>
<script>
var name = prompt("名前を入力してください。");
    document.write("<p>"+name+"さん、こんにちわ<p>");
</script>
</html>
:::
例題２　おしょうゆ

:::spoiler

html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <met a name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="Toi2.css">
        <title>Document</title>

</head>

<body>
    <h1>カップラーメンの作り方</h1>
    <ol>
        <li>十分な量の熱湯を沸かす</li>
        <li>フタを点線まで開け、かやくとスープのもと、あとのせ油を取り出す</li>
        <li>かやくとスープのもとを麺の上に開け、内側の線まで熱湯を注ぐ</li>
        <li>フタをしめ3分まつ</li>
        <li>かき混ぜた後、あとのせ油を載せて完成</li>
    </ol>
</body>

</html>
css
@charset "utf-8";

h1 {
     padding: 0px;              
    text-align:  center;        
    height: 10px;              
    color: #FF00FF;
}
body{
    background: #5F9EA0	;
}
ol{
    background: #7FFFD4;
}
li{
    margin-top: 30px;
}
:::
例題3
:::spoiler

html１
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <met a name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="Toi3.css">
        <title>Document</title>

</head>

<body>
    <a href="Toi3sub.html">サブページへ移動</a>
    <p><a href="Toi3sub.html" target="_blank">新規タブでサブページを開く</a>
</p>

</body>
</html>
ｈｔｍｌ２
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <met a name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="Toi3.css">
        <title>Document</title>

</head>

<body>
    <a href="Toi3.html">メインページへ移動</a>

</body>
</html>
:::
例題４
:::spoiler

:::
例題5
:::spoiler

:::
例題6
:::spoiler


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <h1>最終課題問07　動物の画像</h1>
    <h2>猫</h2>
    <img src="../../neko.png" alt="猫" width="200" height="200">
    <h2>ペンギン</h2>
    <img src="../sub/img/penguin.png" alt="ペンギン" width="200" height="200">
    <h2>豚</h2>
    <img src="buta.png" alt="豚" width="200" height="200">
    <h2>コアラ</h2>
    <img src="../sub/koala.png" alt="コアラ" width="200" height="200">
    <h2>ゾウ</h2>
    <img src="../main/bottom/img/zou.png" alt="ゾウ" width="200" height="200">
    <h2>馬</h2>
    <img src="../main/bottom/uma.png" alt="馬" width="200" height="200">
    <h2>うさぎ</h2>
    <img src="../usagi.png" alt="うさぎ" width="200" height="200">
</body>
</html>

:::

:::spoiler
例題7 さっとん

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>問7</title>
    <link rel="stylesheet" href="toi7.css">
</head>
<body>
    <h2>画像の利用</h2>
    <div class="dish">
        <img src="food01.png">
        <p>チャーハン</p>
    </div>
    <div class="dish">
        <img src="food02.png">
        <p>カレー</p>
    </div>
    <div class="dish">
        <img src="food03.png">
        <p>スパゲッティ</p>
    </div>

</body>
</html>

img {
    width: 400px;
    background-color: black;
}

.dish{
    border: black solid;
    text-align: center;
    margin: 50px ;
    padding: 20px 20px 60px 20px;
}
:::


:::spoiler
例題8　　おしょうゆ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>問題８</title>
</head>
<body>
    <link href="https://fonts.googleapis.com/css?family=Kosugi|Seymour+One&display=swap" rel="stylesheet">
    <p>MENU</p>
    <table border="1">
        <tr div class="a3">
            <th colspan="2">品名</th>
            <th>価格</th>
        </tr div>
    
        <tr>
            <th rowspan="6" div class="a1">ケーキ</th>
            <td>いちごのショートケーキ</td>
            <td div class="a2">380円</td>
        </tr>
        <tr>
            <td>モンブラン</td>
            <td div class="a2">400円</td>
        </tr>
        <tr>
            <td>レアチーズケーキ</td>
            <td div class="a2">350円</td>
        </tr>
        <tr>
            <td>ベイクドチーズケーキ</td>
            <td div class="a2">350円</td>
        </tr>
        <tr>
            <td>チョコレートケーキ</td>
            <td div class="a2">340円</td>
        </tr>
        <tr>
            <td>ミルクレープ</td>
            <td div class="a2">340円</td>
        </tr>
        <tr>
        <th rowspan="2" div class="a1">ホールケーキ</th>
            <td>いちごのショート(12cm)</td>
            <td div class="a2">1800円</td>
        </tr>
        <tr>
            <td>いちごのショート(18cm)</td>
            <td div class="a2">2800円</td>
        </tr>
        <th rowspan="6" div class="a1">タルト</th>
            <td>レモンクリームタルト</td>
            <td div class="a2">340円</td>
        </tr>
        <tr>

            <td>チョコバナナタルト</td>
            <td div class="a2">340円</td>
        </tr>
        <tr>
            <td>キャラメルナッツタルト</td>
            <td div class="a2">350円</td>
        </tr>
        <tr>
            <td>りんごタルト</td>
            <td div class="a2">400円</td>
        </tr>
        <tr>
            <td>いちごタルト</td>
            <td div class="a2">420円</td>
        </tr>
        <tr>
            <td>フルーツタルト</td>
            <td div class="a2">450円</td>
        </tr>
        <tr>
            <td colspan="2">ほかに季節限定のケーキ・タルトが登場します</td>
            <td>税抜き価格</td>
        </tr>
    </table>
</body>
</html>


ＣＳＳ↓
@charset "utf-8";

.a1{
    text-align: center;
}

.a2{
    text-align: right;
}

table{
    background-color: lightpink;
    margin: auto;
}

.a3{
    background-color: salmon;
}

p{
    text-align: center;
    padding: 5px;
    font-family: 'Kosugi', sans-serif;
    font-size: 40px;
}

:::


:::spoiler
例題9　さっとん
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="toi9.css">
    <title>問9</title>
</head>
<body>
    <h2>RWDを実装したレイアウト</h2>
    <div class="midashi">
        <h3 class="title">見出し１</h3>
            <p>記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1記事1</p>
        </div>
        
        <div class="midashi">
            <h3 class="title">見出し2</h3>
            <p>記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2記事2</p>
        </div>
        
        <div class="midashi">
            <h3 class="title">見出し3</h3>
            <p>記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3記事3</p>
        </div>
        <div class="midashi">
            <h3 class="title">見出し4</h3>
            <p>記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4記事4</p>
        </div>



</body>
</html>


.title{
    background-color: lightgray;
    border-radius: 15px;
    text-align: center;
    padding:25px;
}

.midashi{
    background-color: gray;
    border-radius: 10px;
    padding: 2.5px;
    margin: 50px;
}

@media only screen and (max-width:768px){
    .midashi{
        float: left;
        width: 40%;
        margin: 2.5% ;
    }
}
:::

:::spoiler
例題10
:::



java問１
:::spoiler

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, intitial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>ダイアログ</h1>
        <p id="ans"></p>
        <script>
        var username =prompt("名前を入れてください");
        document.write('<p>' + username + 'さんこんにちは</p>');
        </script>
    </body>
    </html>

:::

java2
:::spoiler
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>問2</title>
</head>
<body>
    <h1>計算</h1>
</body>
</html>
<script>
a = 15;
b = 6

k = a + b;
g = a - b;
j = a * b;
z = a / b;
y = a % b;

document.write('<p>加算結果：'+k+'</p>')
document.write('<p>減算結果：'+g+'</p>')
document.write('<p>乗算結果：'+j+'</p>')
document.write('<p>除算結果：'+z+'</p>')
document.write('<p>余剰結果：'+y+'</p>')
</script>
:::


java5
:::spoiler
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>計算</h1>
</body>
</html>
<script>
    var r1 = Math.floor(Math.random()*100);
    var r2 = Math.floor(Math.random()*100);
    document.write("<p>"+r1+"</p>");
    document.write("<p>"+r2+"</p>");

    if(r1>=r2) {
        document.write("大きい値は"+r1+"です。");
    }else{
        document.write("大きい値は"+r2+"です。");
    }
</script>
:::


