CSS

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

  /

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

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

目次
  1. Webを構築する３要素
  2. プログラムを実際に動かしてみる
  3. それぞれの構成要素の位置付け

Webを構築する３要素

HTML（マークアップ言語）

<!--HTML文書であることを宣言-->
<!DOCTYPE html>
<html lang="ja">
<head>
    <!--文字コード-->
    <meta charset="utf-8">
    <!--タブのタイトル-->
    <title>BMI 計算機</title>
    <!--css読み込み-->
    <link rel="stylesheet" href="css/style.css">
    <!--Webページの説明　Googleなどの検索結果ページに表示される-->
    <meta nema="description" content="あなたのBMIを計算します。">
    <!--favicon.icoはブラウザに表示されるアイコン-->
    <link rel="icon" href="image/favicon.ico">
</head>
<body>
    <div class="container">
        <div class="top-area" align="center">
            <h1>BMIチェック</h1>
            <img src="image/diet_before_man.png" alt="title" title="BMI計算機" width="220" height="220">
            <img src="image/diet_after_man.png" alt="title" title="BMI計算機" width="220" height="220">
            <h2>BMIチェックによって自分の肥満度と標準体重を確認しよう！</h2>
            <P>あなたのBMI(Body Mass Index)はいくつ？</p>
            <P>身長・体重を入力するだけで、自分のBMIと標準体重がわかります。</p>
        </div>
        <div class="input-area" align="center">
            <input type="number" id="weight" placeholder="体重 (kg)">
            <input type="number" id="height" placeholder="身長 (cm)">
            <button id="btn" align="center" onclick="BMI_cal();">計算をする</button>
        </div>
        <div class="result-area" align="center">
            <table class="bmi_result">
                <tr>
                    <th>
                        <h3>あなたのBMI</h3>
                        <div class="result">
                            <p id=bmi>ここに結果が表示されます</p>
                        </div>
                        <div>身長から見た体重の割合がわかります。<br />標準は22とされています。</div>
                    </th>
                    <th>
                        <h3>BMIから見た標準体重</h3>
                        <div class="result">
                            <p id="hyoujun">ここに結果が表示されます</p>
                        </div>
                        <div>BMIが標準値22の場合の体重です。</div>
                    </th>
                    <th>
                        <h3>現在の体重－標準体重</h3>
                        <div class="result">
                            <p id="sa">ここに結果が表示されます</p>
                        </div>
                        <div>この数値がプラスだったら、<br />体重オーバー気味ということ。</div>
                    </th>
                </tr>
            </table>
        </div>
    </div>
    <!--javascript を読み込む-->
    <script src="js/main.js"></script>
</body>
</html>

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



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;
}



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";
}



プログラムを実際に動かしてみる

こちらをご覧ください（BMIを計算するWebアプリです）

他のWebアプリなどのコードは、こちらにあります。

それぞれの構成要素の位置付け

HTMLは構造化を決定する

文章を解析し『ここは見出し、ここは本文、そしてここに写真を貼り付け』といった構造化をするのがHTMLの役割です。

CSSは装飾を担当する

HTML（生原稿）を見て、内容を読み取りやすいものにしていこうかと考えるのがCSSの仕事です。HTMLが刺身だといった素材でCSSが醤油といいた調味料みたいなもので、生で刺身を食べることができることだが醤油をつけた方が美味しい、しかし醤油単体で飲む人はいないですから、CSSでは単独では成立しません

JavaScriptは一度出来上がったページを変化させる

HTMLの上で動くプログラム環境だったりブラウザから飛び出したWindowsの上で直接動いたりします。塗り絵で考えてみるとHTMLというのは買ってきたばかりの塗り絵帳で、何かのアニメのキャラクターが線だけで描かれています。ここに色を塗ってくのがCSSによる指定です。髪の毛を黄色で塗り、服を赤く塗って、主人公のロボットを青と赤と白で塗るわけです。JavaScriptは、一度黄色く塗った髪の毛を黒く塗り直したり、場合によっては、味方のロボットを消して、敵のロボットを描き出したりする。その敵ロボットを色鉛筆を先でつつくと派手な音を出して爆発するかもしれません

HTMLとCSSとJavaScriptの組み合わせ

HTML

生のHTMLは、何の装飾もないただ構造だけ決定したものになる

HTML＋CSS

デザインされたWebページで世界に存在する半分以上のWebページがこの状態になる

HTML＋JavaScript

HTMLの内容を操作の対象として動作します

HTML＋CSS＋JavaScrip

JacaScriptはCSSを操作の対象として動作します。例えば、一般紙向けに見出しは大きな文字で黒文字に白抜き文字と指定してきたものmp、スポーツ新聞に青バックに巨大な文字、しかも赤枠のついた黄色のフォントに帰るといったことができます。ページの背景の色を変える、フォントのサイズを帰るといったCSSで指定捨要素を動的に変化させることができます

JavaScript

実際には、HTMLに埋め込まれていてブラウザ上で動作しているが、HTMLの要素にも、CSSの要素にも触れないで動作する部分を示している

関連記事