fbpx
    ウェブクリエイター
    ウェブクリエイター
    Web

    “シリーズHTMLを学ぶ”第一回

    by |Published


    Contents
    1. HTMLとは
      1. HTML Living Standardとは
    2. HTMLの基本的な構造
    3. HTMLをパワーアップする
      1. CSS(Cascading Style Sheets)
      2. JavaScript
      3. jQuery
      4. Bootstrap
    4. まとめ

    HTMLとは

    HTMLはHyperText Markup Languageの略で、ハイパーテキストというリンクでつながったテキストと、マークアップというタグで装飾したテキストを組み合わせた言語です。

    HTMLは1990年代初頭にティム・バーナーズ＝リーによって開発されました。当初は研究者たちが文書を共有するためのものでしたが、やがてウェブブラウザやウェブサーバーとともにインターネットの発展に大きく貢献しました。

    弊社がウェブサイト構築を始めたのが、2000年代です。HTML 4.01 Transitionalで学び始め、W3Cの仕様が変遷する中、必死でHTML4.01 StrictやXHTMLでコーディングできるようにしていきました。

    新しく仕様が変わり統一されることにより、レスポンシブウェブサイトが実現でき、様々なデバイスでウェブサイトを閲覧できるようになりました。そんな初心者の頃のことを思い出し、HTMLを学び始めている方々のために有用な情報を連載していければと考えました。

    HTML Living Standardとは

    HTMLは標準化団体であるW3Cによって規格化されてきましたが、HTML5.2で廃止されました。WHATWG(Web Hypertext Application Technology Working Group)が標準化団体になり、HTML Living Standardが新しい仕様となりました。マイナーチェンジを続けていくので、その時点の最新情報を学んでいく必要があります。”シリーズHTMLを学ぶ”では、”HTML Living Standard”の基礎を学習していきます。

    HTMLの基本的な構造

    HTMLはウェブサイトの構造を決めるための言語です。家で例える骨組みのようなものです。それでどんなウェブサイトを作ろうかなと考える時に、HTMLで表現するとどうなるかをイメージできるくらいになると良いと思います。土台や骨組みがしっかりしていないと建てる時が大変です。同様に、HTML部分は、しっかりと設計してから作り始めることが大切です。

    そのためにも、まずは、しっかりとHTMLの基本を学んでおくと、ウェブサイトの再構築や装飾の追加がしやすくなります。HTMLでは、タグと呼ばれる特殊な記号を使って、テキストに意味や役割を与えます。例えば、見出しや段落、リストや画像などの要素を定義します。HTMLの基本的な構造は以下のようになります。

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLの基本</title>
</head>
<body>
<!-- ここにコンテンツを書く -->
</body>
</html>

    <!DOCTYPE html>は文書の種類を宣言するもので、最初に書きます。
    <html>と</html>はHTML文書の始まりと終わりを表します。
    <head>と</head>は文書の情報や設定を書く場所です。
    <meta charset=”UTF-8″>は文書の文字コードを指定するものです。UTF-8は日本語など多言語に対応した文字コードです。
    <title>と</title>は文書のタイトルを書く場所です。ブラウザのタブに表示されます。
    <body>と</body>は文書のコンテンツを書く場所です。見出しや段落、リストや画像などを入れます。

    このように、HTMLではタグで囲まれた部分が要素と呼ばれます。要素には属性という追加情報を与えることができます。

    <img src="https://example.com/image.jpg" alt="サンプル画像">

    画像要素<img>にはsrc属性で画像のURLを指定します。

    また、要素は入れ子にすることができます。

    <p>詳しくは<a href="https://example.com">こちら</a>をご覧ください。</p>

    段落要素<p>の中にリンク要素<a>を入れることができます。

    このように、HTMLではタグや属性を使ってウェブサイトの構造やコンテンツを定義します。HTMLはウェブ開発の基礎であり、多くの人々に情報やサービスを提供するための強力なツールです。HTMLの基本を学ぶことで、ウェブサイト作成の第一歩を踏み出すことができます。

    HTMLをパワーアップする

    HTMLは、ウェブページの構造や内容を記述するマークアップ言語です。HTMLだけでは、ウェブページの見た目や動きを制御することはできません。そこで、HTMLに接続し、パワーアップできるCSSやJavaScriptというものがあります。

    これらは、HTMLとは別の言語であり、それぞれに役割があります。CSSとJavaScriptの概要と使い方の基本を説明します。概要を軽く理解していただくために、HTMLに接続してパワーアップできるいくつかの技術やツールを以下に挙げます。

    CSS(Cascading Style Sheets)

    CSSはHTML文書のスタイルやレイアウトを指定するためのスタイルシート言語です。HTML要素の見た目を制御し、フォント、色、余白、位置などを指定することができます。CSSは<style>要素内に直接記述するか、外部のCSSファイルとして参照することができます。

    <!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
      }
  </style>
</head>
<body>
  <p>This is a blue paragraph with a font size of 18 pixels.<!/p>
</body>
</html>

    JavaScript

    JavaScriptはウェブページにインタラクティブな要素や動的な機能を追加するためのスクリプト言語です。HTML内に<script>要素を使用して直接JavaScriptコードを埋め込むことができます。JavaScriptはユーザーのアクションに応答したり、DOM(Document Object Model)を操作したり、データのバリデーションやAPI通信などを行ったりすることができます。

    <!DOCTYPE html>
<html>
<body>
  <button onclick="alert('Hello, World!')">Click Me<!/button>
  <script>
    function showMessage() {
      alert('Button clicked!');
    }
  </script>
</body>
</html>

    jQuery

    jQueryはJavaScriptのライブラリであり、DOM操作やイベント処理、アニメーション、AJAXなどを簡潔かつクロスブラウザに行うための便利な機能を提供します。jQueryを使用すると、JavaScriptのコーディングを簡略化し、クロスブラウザの互換性を向上させることができます。

    <!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"><!/script>
  <script>
    $(document).ready(function() {
      $('button').click(function() {
        alert('Button clicked!');
      });
    });
  </script>
</head>
<body>
  <button>Click Me<!/button>
</body>
</html>

    Bootstrap

    Bootstrapは、HTML、CSS、JavaScriptベースのフロントエンドフレームワークであり、レスポンシブなウェブページやウェブアプリケーションの構築を助けます。Bootstrapには、グリッドシステム、スタイル付きのコンポーネント、ナビゲーションバー、ボタン、フォームなど、多くの予め定義されたスタイルとコンポーネントが用意されています。

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to My Website<!/h1>
    <button class="btn btn-primary">Click Me<!/button>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"><!/script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"><!/script>
</body>
</html>

    まとめ

    HTMLはウェブページの構造や内容を記述する言語であり、CSSはウェブページのスタイルを指定する言語であり、JavaScriptやjQuery、Bootstrapはウェブページの動作を制御する言語です。

    これらは、HTMLに接続し、パワーアップできるものです。つまりHTMLをより魅力的で動的なウェブ体験にするためのさまざまな機能やスタイルを提供します。

    それぞれに役割があり、使い方の基本を理解することが重要です。使い方や詳細な機能については、公式のドキュメントやチュートリアルを参照することをお勧めします。

    HTML Living Standardに、廃止されたHTML5のほとんどは、引き継がれていますが、今後も進化していきますから、最新の情報を学んでいく必要があります。“シリーズHTMLを学ぶ”第二回では、”HTML Living Standard”の勉強の仕方として、テンプレートを準備しながら学習する方法を説明いたします。

    You may also like