HTML基本講座 - システム・スタルヒン合同会社

| HTMLって何？
| Webブラウザってすごい！
| HTMLの歴史
| HTMLは３つのソフトで構成される
HTML
CSS
Java Script
まとめ
1. 関連

| HTMLって何？

Yahooを表示して[右クリック]し[ページのソースを表示]をクリックしてみよう

これ文字の羅列じゃん。

実はこれがHTMLなのです

こんなん覚えるの無理と思われるかもしれないですが、構文を覚えれば決してむつかしくはないのです。

| Webブラウザってすごい！

Webサイトを閲覧するためのアプリケーションです。単にブラウザと呼ばれたりします。HTML規格に沿ってHTML文字を人間が見える形に置き換えてくれるすぐれものなのです。

有名なWebブラウザを挙げると

Internet Explorer
Google Chrome
Safari
Firefox

などになります。

どのWebブラウザも同じく同一レイアウトで閲覧可能なことが最も重要な機能となっています。しかしそれだけでは同じアプリになってしまうので、各Webブラウザは、より高速なWebページ表示や、独自機能などを開発することで、俺っていいぜとアピールしているのです。ちなみに筆者は複数同時に見れて高速なVivaldi　をご贔屓（ひいき）にしております。

| HTMLの歴史

HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップ言語）の略で、Web上の文書を記述するためのマークアップ言語です。スイス・ジュネーブにあるCERN(欧州原子核研究機構：欧州12か国が共同研究機関）で1989年にここでHTMLは開発されました。お互いの研究状況の確認、論文などの資料を探すことが困難だったために考えられました。

HTMLの考案者：ティム・バーナーズ・リー

イギリスの計算機科学者は、『ロバート・カイリューとともに、World Wide Web（WWW）を考案し、ハイパーテキストシステムを実装・開発した人物です。URL、HTTP、HTML の最初の設計は彼によるもの』 – Wikipediaより

| HTMLは３つのソフトで構成される

これまでHTMLをはじめようと思われて、HTML/CSS/JavaScriptなどという名前を聞いただけで敬遠してしまった。というかたが多くおられることでしょう。しかし安心してください。ここのブログではHTML未経験の方が簡単に理解を行っていただくことを目標としています。

苦手意識を取り除くために以下の順番で説明を行っていきます
（１）HTMLとは、私達が普段使っている文章に、コンピュータが理解できるような文章の構造をつくるタグをつけていくだけの簡単な言語だよ。
（２）そしてCSSを使って、HTMLでタグ付けされた文章にデザインを加えカッコ良くしていきます。
（３）ちなみにJavaScriptは、Webページに複雑なことを加えられるプログラミング言語です。また、JavaScriptをより便利に使えるライブラリである「jQuery」が使われています。jQueryを使用することで、簡単にスライドショーやプルダウンメニューなど、リッチな動きを表現することができます。

HTML

ブラウザがわかる文書構造を作成する。

HTMLタグというものを使用します。下記のコーディングですね

<html>
  <meta>
     <title>Gyao-</title>
  </meta>
  <body>
    <p>これは恐竜の<strong>トリケラトプス</strong>です</p>
      <div>
        <button onclick="func1()">切替</button><br>
        <div id="parent">
          <img src="https://menta.sutaruhin.com/wp-content/uploads/2020/04/014.jpg" id="image1">
          <img src="https://menta.sutaruhin.com/wp-content/uploads/2020/04/06.jpg" id="image2">
          <img src="https://menta.sutaruhin.com/wp-content/uploads/2020/04/01-2.jpg" id="image3">
        </div>
        <a>全長約9メートル、体重約6 - 12トン。四足歩行。現在の北米にあたる地域に生息した大型で、最も後期に登場した角竜である。首の筋肉が発達していたと考えられており、闘争の際にはこの角を用いたと推測される（角や四肢の構造上サイのような突進は出来なかったという説もある。頭骨の半分を占める、後頭部から首の上にまで伸びたフリルも特徴のひとつ。口先は鳥のくちばしのように尖っており、草や木の葉を掴み取って食べていたと考えられる。</a>
      </div>
  </body>
</html>

HTMLだけの表示です

CSS

HTMLに見た目のデザインを加える。下記がHTMLとは別のCSSコーディングです。

body {
  background-color:green;
}
h1 {
  color:red
}
p {
  font-size:36px;
  color:yellow;
}

div {
  width:1000px;
}

img {
  float:left;
  width:500px;
}
a {
  float:right;
  width:490px;
  color:white;
  margin:5px;
}
 #parent {
      position: relative;
    }
    #parent img {
      transition: all 500ms 0s ease;
      position: absolute; top: 0; left: 0;
    }
    .on {
      opacity: 1;
    }
    .off {
      opacity: 0;
    }

するとこのように奇麗に表示できます

Java Script

HTMLにいろいろな動作を付け加えることができます

今回はボタンを押すと恐竜の種類がかわるものをサンプルで作成してみました

時計みたいに時刻を表示や、HTML内のタグをへしたり増やしたりが自由に行えます。下記はJavaScriptのサンプルコーディングです

<script>
    let idx = 1;
    func1();
    function func1() {
      for(let i=1; i<=3; i++) {
        if(i==idx){
          document.getElementById(`image${i}`).classList.remove('off');
          document.getElementById(`image${i}`).classList.add('on');
        } else {
          document.getElementById(`image${i}`).classList.add('off');
          document.getElementById(`image${i}`).classList.remove('on');
        }
      }
      idx = idx == 3 ? 1 : idx+1;
    }
</script>

まとめ

HTMLは画面を構成するHTMLタグを使って骨組みを構成し、CSSその骨組みに色や背景色など装飾するため行うものでした。またJavaScriptはHTMLタグやCSSを自由に増減や移動・変更が行なえる言語です。３つとも重要な言語なのです。下記のCodePenサイトに作成しておりますので動作確認やコーディング確認を是非行ってみてください

See the Pen qBOrBMr by sutaruhin (@sutaruhin) on CodePen.