HTML-CSS講座

HTML5とCSS3の基本講座 1回|HTMLの概要

HTML CSS

HTML5とCSS3の基本講座を行います。この講座は、プログラムを全く知らない人にも、HTMLとCSSの大枠の理解を目指しています。1回/週程度の頻度で、10回程度で完結する予定です。2〜3ヶ月後には、HTMLとCSSの基本は身につくでしょう。気軽な気持ちでお付き合い下さい。

はじめに

HTML5とCSS3の基本講座を行います。「簡素な窓」サイトの中で、週に1回程度の予定で進める予定です。

プログラムの習得は、覚えることが多くて大変だと考えてしまうでしょうが、プログラム言語の習得は、勉強のための勉強ではありません。

例えば、英語圏にいる5歳児なら簡単な単語でも会話はできます。それと同じです。HTML5とCSS3の基本さえマスターすれば、応用するのは自分自身の努力でいくらでも伸ばせます。

このHTML5とCSS3の基本講座では、どうしても必要な事だけに絞って、PC初心者にも判るように解説します。必要最低限のことさえ判るようになれば、細かいことは覚えなくても、その都度、辞書などを参照しながら実際にプログラミングすることで、自然と知識は身につきます。

できれば、無料ブログなどで、学習したことを試しながら進めると、特別覚えようとしなくても、自然に身についてしまうでしょう。

プログラムなど、全くやったことが無い人や、年配の人などにも判るように解説することを心がけます。HTMLやCSSを通じて、プログラムとはこういう世界だということを知りたい人にも、読み物としても役立つでしょう。

この講座は、10回程度で完結する予定のため、2〜3ヶ月後には、HTMLとCSSの基本は身につきます。気軽な気持ちでお付き合い下さい。

HTMLって何だろう

それでは、始めましょう。

インターネットで公開されているウェブページは、HTML という言語で記述されています。

HTMLは、エイチティーエムエルと呼び、Hyper Text Markup Language(ハイパーテキスト・マークアップランゲージ)の頭文字をとったものです。

ハイパーテキスト

ハイパーテキストというのは、超越したテキストという意味で、複数のドキュメントを相互に参照し合う仕組みのことです。

マークアップランゲージ

マークアップランゲージとは、タグと呼ばれる目印(マーク)を文章に付けることで、文章の構造を現わしています。

タグとは?

HTML言語HTML言語

 

タグというのは、例えば「見出し」の場合は、<h1> HTML5とCSS3の基本マスター講座 1回|HTMLの概要</h1>、「大きな表題」の場合は、<h2>はじめに</h2>、のように文字や文章を、タグ(<h1>・・</h1>、<h2>・・</h2>)という目印で囲むことで、どんな構造なのかをわかるようにしたもののことです。

構造とは?

いきなり構造という言葉が出て来てすみません。以下のように解釈して下さい。

実は、タグというのは、辞書にするほど沢山あって、それぞれ定義されています。上の例の<h1></h1>は、見出しタグで、<h2></h2>は表題タグです。<p></p>は段落を現わすタグ、<em></em>タグは、囲んだ文字を強調します。

つまり、文章を所定のタグで囲むことで、HTMLを読める人や、コンピュータには、タグに挟まれた文章をどのようにすれば良いのかわかるようになっています。

文章の構造とは、上の例のように、「見出し」、「表題」、「段落」、「強調」などのように、文章がどんなものなのかを示したもののことです。文章をタグで囲むことを構造化と言います。

インターネットの閲覧

インターネットを使う時には、グーグルクロムやIE(インターネットエクスプローラー)などのブラウザ(ソフト)に住所の働きをするURLを入力して、見たいウェブページへのリクエストをします。このリクエスによって、ウェブページ(ホームページなど)からは、必要なデータが送られてきます。

この時、送られてくるのはHTMLやCSS言語で書かれたデータですが、ブラウザは、人が読める文章や画像にしてウェブサイトとして表示しています。

ブラウザがサイト閲覧の時に行っていること

ウェブサイトは、多くのウェブページを集めて作られています。

それぞれのウェブページは、HTML言語で記述されたドキュメントです。ブラウザはHTMLやCSS言語を読み取ってウェブページ同士を結び付け(リンクさせて)データを参照し合うことや、画像を表示させるなどして、人にも読み取れる一つのまとまったウェブサイトとして表示してくれます。

CSS とは?

CSSという言葉が出てきたため、少しだけ紹介します。

CSS(シーエスエス)とは、Cascading Style Sheetの略です。ウェブページの見た目を指定する言語で、装飾やデザインを指定する言語です。HTMLと組み合わせて文字の色や大きさ、レイアウトなどを指定する時にも使用します。CSSについては後の章で詳しく紹介します。

ポイントのまとめ

ウェブページは、HTML言語で記述されたドキュメントです。

HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップランゲージ)の頭文字をとったものです。ここで、ハイパーテキストは、超越したテキストという意味で、複数のドキュメントを相互に参照し合う仕組みのことです。

ブラウザは、HTMLやCSS言語を読み取ってウェブページ同士をリンクさせ、人にも読める言語にした上で、ウェブサイトとして表示してくれます。

CSSは、Cascading Style Sheetの略で、ウェブページの見た目を指定する言語です。装飾やデザインを指定するため、ウェブサイトの見栄えに関係します。

HTML言語は、所定のタグ(目印)で文章を囲むことで、文章構造を現わしています。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。