# 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>
:::
Sign in with Wallet
Connect another wallet