プログラム入門@TSUKANA

ウェブページを作るには


ウェブページの基本構成

現在は個人から企業などの様々な団体がウェブサイトを持っていて,自らの情報を発信しています。それらのウェブサイトは様々な技術で作られていますが,ウェブブラウザを用いて表示されるページは一般的なものでは以下の技術が利用されています。

  • HTML
  • CSS
  • JavaScript
HTMLとは?

HTML(エイチ・ティー・エム・エル)はHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。 ブラウザに文字や画像を表示するために使われます。HTMLは表示したい内容に合わせた「タグ」と呼ばれるコードで囲って構成されます。例えばブラウザの画面上で

HTMLとは

ハイパーテキストマークアップランゲージの略です。

と表示されていたならば,HTMLのコードでは

<h1>HTMLとは<h1>

<p>ハイパーテキストマークアップランゲージの略です。<p>

というように書かれています。上の表示されたテキストは,HTMLのコードでは<〇〇>~</〇〇>というもので囲まれており,これはHTMLの「タグ」と呼ばれるものです。「h1」や「p」は挟んだテキストがどういった内容なのかを表しています。ここでは「h1」は「見出し」で「p」は「段落」であることを示しています。

CSSとは?

CSS(シー・エス・エス)はCascading Style Sheets(カスケ―ディング・スタイル・シート)の略です。こちらはHTMLで書かれた内容の色や位置など,デザインを設定するのに使用されます。HTMLがCSSのファイルを読みこむことで,CSSに書かれた設定の情報に合わせて表示が変わります。以下はCSSの書き方の例です。

p{
font-size:16px;
color:red;
}

「p」は上のHTMLのタグの「p」を指し,{}で囲った内容は,「p」タグ内の内容をどういった表示にするか設定をしています。上の例では「font-size」は文字の大きさで,「:」の右の内容で大きさの数値を設定しています。「color」は文字の色で,「red」で赤色を設定しています。

JavaScriptとは?

JavaScript(ジャバスクリプト)はウェブページやシステムの開発に使われるプログラム言語です。HTMLがJavaScriptのファイルを読みこむことで,HTMLとCSSだけでは実現できないより複雑な動きや機能を可能にするために使用されます。プログラムであるため,書き方や内容はHTMLやCSSより高度なものになります。
自分のやりたいことを実現するために一からJavaScriptでプログラミングするのは,やりたいことによっては非常に大変です。JavaScriptのプログラムをより簡単にしたり,アニメーションやインターフェースなどの機能が簡単に実現できるようにするため,様々なJavaScriptライブラリが公開されています。ライブラリとは特定の機能を持つプログラムを,他のプログラムから呼び出して利用できるようにまとめたもののことです。jQueryは特に有名なJavaScriptライブラリです。やりたいことに合ったライブラリを探し,試してみましょう。

ウェブページを作るのに大事なこと

上記のCSSとJavaScriptの項目で「〇〇のファイルを読みこむことで」と書いていますが,実はHTMLファイルの中に直接CSSやJavaScriptを直接書きこむことは可能です。しかしそれは普通はしません。なぜなら,そうするとHTMLファイルの中に書かれた内容が膨大になったり,同じ見た目や動きをしたいのにそれぞれの箇所に同じ設定を書きこまないといけなくなったりと,管理や修正が大変になるからです。ですので,HTML,CSS,JavaScriptのそれぞれの役割を理解し,内容に合わせてファイルを分けて必要なものを読みこむようにすることが重要です。

  • HTML → 表示する文章や画像
  • CSS → 表示する内容のデザインやレイアウト
  • JavaScript → より高度な動きや機能

ウェブページを作る時はこのことに注意しましょう。
下記のリンク先にウェブページ作成のための簡単なサンプルファイルを公開しています。
ページを開いて「Code」ボタン→「Download ZIP」を押してサンプルファイルのZIPがダウンロードできます。
https://github.com/info-tsukana/WebPageSample

ZIPを解凍すると「WebPageSample」フォルダの中にHTML,CSS,JavaScriptの極々簡単な内容のファイルが入っています。HTMLファイルをブラウザで開いたり,それぞれのファイルを「メモ帳」などで開き,どんなコードや設定があるか調べて書き換え,どんな変化があるか確かめてみましょう。

タグ:CSS HTML JavaScript

総合管理者|2022年7月5日


カテゴリ一覧

問合せ