【アプリの例もあるよ!】Webページを構成する３つの要素

Webページは大きく分けて３つの要素で構成されています

ここでは、基本的な位置付けや組み合わせを紹介していきます

Webを構築する３要素

HTML（マークアップ言語）

HTMLはHyper Text Markup Languageの略でWebページを作成するために開発された言語です。ハイパーテキストとはハイパーリンクを埋め込むことができる高機能なテキストです。ハイパーリンクとは、Webページで下線のついたテキストなどをクリックすると別ページへ移動するリンクのことです。つまり Webページから別のWebページにリンクを貼ったり、Webページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。

<!DOCTYPE html>

<head>

</head>

<body>

<h1>BMIチェック</h1>

<h2>BMIチェックによって自分の肥満度と標準体重を確認しよう！</h2>

<P>あなたのBMI(Body Mass Index)はいくつ？</p>

<P>身長・体重を入力するだけで、自分のBMIと標準体重がわかります。</p>

</div>

<button id="btn" align="center" onclick="BMI_cal();">計算をする</button>

</div>

<tr>

<th>

<h3>あなたのBMI</h3>

<p id=bmi>ここに結果が表示されます</p>

</div>

<div>身長から見た体重の割合がわかります。<br />標準は22とされています。</div>

</th>

<th>

<h3>BMIから見た標準体重</h3>

<p id="hyoujun">ここに結果が表示されます</p>

</div>

<div>BMIが標準値22の場合の体重です。</div>

</th>

<th>

<h3>現在の体重－標準体重</h3>

<p id="sa">ここに結果が表示されます</p>

</div>

<div>この数値がプラスだったら、<br />体重オーバー気味ということ。</div>

</th>

</tr>

</table>

</div>

</body>

</html>

CSS（スタイルシート言語）

CSSはCascading Style Sheetsの略でWebページのスタイルを指定するための言語です。スタイルシートとは、構造化文書などにおける表示形式を制御する仕組みで、見栄えと構造を分離すると言う目的で提唱されました。

h1{
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}

header{
  background-color: #efefef;
}

body{
  font-size:16px;
  font-family: Arial,sans-serif;
}

/* classのcss */
.container{
  width:1000px;
  margin:10px auto;
  position: relative;
}

.top-area{
    text-align: center;
}

.input-area{
  font-size:120px;
  text-align: center;
  margin-top:20px;
  margin-bottom:70px;
}

.result-area{
  background: #ffffff;
  width:800px;
  text-align: center;
  margin-left: 20px;
  padding:80px;
  height:200px;
  border: solid;
  border-radius: 10px;
  position: absolute;
}

.result{
font-size:18px;
 margin:10;
background-color: #efefef;
border: solid 3px #494848;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

/* idのcss */
#weight,#height{
  background: #f8f8f8;
  font-size:30px;
  text-align: center;
  padding:10px;
  width:140px;
  height:110px;
  margin-right: 20px;
  border:solid;
  border-radius: 10px;
  display: inline-block;
}


#btn{
  margin:20px auto 0;
  width:120px;
  height:120px;
  border-radius: 50%;
  background: #EF454A;
  text-align: center;
  line-height:130px;
  color:#fff;
  font-size:16px;
  font-weight:40px;
  cursor:pointer;
  opacity:0.9;
  box-shadow: 0 10px 0 #D1483E;
  border:3px solid #D1483E;
  user-select:none;
  display: inline-block;
}

#btn:hover{
  opacity:1;
}

#btn.pushed{
  margin-top:16px;
  box-shadow: 0 4px 0 #D1483E;
}

h1{

color: #364e96;/*文字色*/

padding: 0.5em 0;/*上下の余白*/

border-top: solid 3px #364e96;/*上線*/

border-bottom: solid 3px #364e96;/*下線*/

}

header{

background-color: #efefef;

}

body{

font-size:16px;

font-family: Arial,sans-serif;

}

/* classのcss */

.container{

width:1000px;

margin:10px auto;

position: relative;

}

.top-area{

text-align: center;

}

.input-area{

font-size:120px;

text-align: center;

margin-top:20px;

margin-bottom:70px;

}

.result-area{

background: #ffffff;

width:800px;

text-align: center;

margin-left: 20px;

padding:80px;

height:200px;

border: solid;

border-radius: 10px;

position: absolute;

}

.result{

font-size:18px;

margin:10;

background-color: #efefef;

border: solid 3px #494848;/*線色*/

padding: 0.5em;/*文字周りの余白*/

border-radius: 0.5em;/*角丸*/

}

/* idのcss */

#weight,#height{

background: #f8f8f8;

font-size:30px;

text-align: center;

padding:10px;

width:140px;

height:110px;

margin-right: 20px;

border:solid;

border-radius: 10px;

display: inline-block;

}

#btn{

margin:20px auto 0;

width:120px;

height:120px;

border-radius: 50%;

background: #EF454A;

text-align: center;

line-height:130px;

color:#fff;

font-size:16px;

font-weight:40px;

cursor:pointer;

opacity:0.9;

box-shadow: 0 10px 0 #D1483E;

border:3px solid #D1483E;

user-select:none;

display: inline-block;

}

#btn:hover{

opacity:1;

}

#btn.pushed{

margin-top:16px;

box-shadow: 0 4px 0 #D1483E;

}

JavaScript（プログラミング言語）

ユーザー側のWebブラウザと、WebサイトまたはWebサービスの相互間のやりとりを、円滑にするために使われます。

function BMI_cal() {
  var weight = document.getElementById("weight").value;
  var height = document.getElementById("height").value;
  height = height / 100;
  var bmi = weight / (height * height);
  var proper_weieight = (height * height) * Number(22);

  document.getElementById('bmi').innerHTML = bmi;
  document.getElementById('hyoujun').innerHTML = proper_weieight + "kg";
  document.getElementById('sa').innerHTML = weight - proper_weieight + "kg";
}