Webページは大きく分けて3つの要素で構成されています
ここでは、基本的な位置付けや組み合わせを紹介していきます
Webを構築する3要素
HTML(マークアップ言語)
HTMLはHyper Text Markup Languageの略でWebページを作成するために開発された言語です。ハイパーテキストとはハイパーリンクを埋め込むことができる高機能なテキストです。ハイパーリンクとは、Webページで下線のついたテキストなどをクリックすると別ページへ移動するリンクのことです。つまり Webページから別のWebページにリンクを貼ったり、Webページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!--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> |
CSS(スタイルシート言語)
CSSはCascading Style Sheetsの略でWebページのスタイルを指定するための言語です。スタイルシートとは、構造化文書などにおける表示形式を制御する仕組みで、見栄えと構造を分離すると言う目的で提唱されました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
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サービスの相互間のやりとりを、円滑にするために使われます。
1 2 3 4 5 6 7 8 9 10 11 |
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アプリなどのコードは、こちらにあります。
1 2