この記事では、分かりやすくWEB全体の仕組みと、WEBサイトを表示させるためのHTMLとCSSの役割を説明していきます。
本格的にHTML学習を始める前に、まずはWEBのしくみがどうなっているのか見ていきましょう。
HTMLやCSSの構文を覚えてしまえばいい、と思う人もいるかもしれません。
ですが、体系的にしくみを理解することで、後々学習スピードにおおきな差が出てきます。
だいじなのは用語などを暗記することではなく、ふだんPCやスマホで見ているサイトがどのようにデータのやり取りしているのかイメージすることです。
なるべく丁寧に、分かりやすく説明していますので、リラックスして読んでみてくださいね。
もくじ
インターネットとWEBのしくみ
いつも何気なく使っているインターネットですが、どのようなしくみでWEBサイトが見れるようになっているのでしょうか？
インターネットとは？
インターネットという言葉ですが、コンピュータ同士のネットワークそのものを指します。
もともとコンピュータというのは、１台単体で全てを処理する役割を担っていました。
しかし１９７０年台になり、データなどを共有する必要性が増し、コンピュータ同士を回線で繋いだのが初めてのネットワークとなりました。
さらに、そのネットワーク同士を繋げる方法がアメリカで開発され、それが今日のインターネットに至っています。
最近では技術の発展で、音楽や動画など、さまざまなデータが高速でやり取りできるようになりましたね。
5Gのサービスがスタートしたこともあり、現在もインターネットのデータ通信は飛躍的に進化しています。
WEBとは？
インターネットの発展に伴い、いろいろな種類のデータが飛び交うようになりました。
WEBとはそんなインターネットのデータのやり取りの１つです。
例えば好きなアーティストのライブの日程をチェックしたり、グーグルで気になる情報を調べてみたり。
そんなとき、パソコンやスマホの裏側では、必ず文書データがやり取りされているのです。
そのデータこそがこれから説明するHTML文書になります！
つまり、WEBとはHTMLを使ってデータを取得、各々の画面に表示させるしくみのことなのです。
サーバとクライアント
サーバとはHTML文書を保管しておくコンピュータのことです。
サーバの役割は文書の保管だけではないのですが、ここではイメージをつかみやすくするため、まずは提供する側と覚えておいてください。
対してそのHTML文書をネットワークでサーバから引っ張ってきて、画面に表示させるコンピュータをクライアントといいます。
パソコンだけでなく、タブレットやスマホなど画面に表示させるデバイスはすべてクライアントです。
そしてその文書を表示させる役割を担っているのが、ブラウザになります。
ブラウザとはGoogle Chromeやsafariなど、普段PCやスマホなどでネットを見るためのアプリですね。
誰でも何気なく毎日使っていると思います。
ふだんユーザであるみなさんは、クライアント側にいるということです。
そしてこれからWEBサイトをつくったり、ブログを書いたりして提供する側になることは、サーバー側に立つということになりますね！
- インターネットはコンピュータ間のネットワークそのもの
- WEBはたくさんあるインターネットを使ったデータのやり取りの１つ
- WEBでのやり取りはかならずHTML文書が使われている
- サーバーとはHTMLを保管しているコンピュータ
- クライアントとはWEBを使うユーザーのこと つまりわたしたち
HTML/ CSSとは
ではいよいよ、WEBページを表示させるために不可欠なHTMLとCSSについて説明していきます。
それぞれが違った働きを持っていて、一緒に協力し合って見やすくて、素敵なサイトを表示させているのです。
HTMLとは？
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、WEBページを構成するいちばん基本的な言語のことです。
WEB上ではかならずHTML文書でのやり取りが行われている、と説明しました。
このHTML文書というのは、その名の通りすべてが文字や記号で埋め込まれていて、ハイパーテキストと呼ばれます。
名称にもあるマークアップというのは’目印をつける’という意味で、ブラウザに’ここはこういう風に表示してね’と指示を出しているのだと考えてください。
HTMLを書くということは、クライアント側で表示させたい情報が入った文書（ハイパーテキスト）を、コンピュータが認識できる形式で書く（マークアップする）、ということになります。
ほとんどのWEBページはこのHTMLでつくられていて、エフェクトばりばりのかっこいいサイトも、すごーくシンプルなサイトも、細かく分解していくと１つ１つの小さなHTMLタグからできているのです。
いつかWEBサイトを作りたいという方は、最初に勉強する言語になると思います。
CSSとは
HTMLとCSSってセットで聞くことが多いですよね？
WEBページをつくる上で、この２つの言語は切っても切り離せない関係にあります。
CSSとは、“Cascading Style Sheets” の頭文字をとったものです。
単にスタイルシートとも呼ばれます。
日常生活でも服をコーディネートしたり、髪型を整えたりすることを’スタイリングする’って言いますよね？
それと一緒で、CSSはHTMLで指定された文書に、装飾や彩りを加える言語になります。
例えば、ここは大事なところだから赤い太字にしよう！とか、おしゃれなフォントにしてモダンなサイトにしよう！などのデザイン面に関わってくるところですね。
CSSだけで簡単なアニメーションなんかも作れますよ。
センスがあればデザイン能力を発揮できる部分なので、とても楽しい言語です。
コードを見てみよう！
では具体的に２つの言語がどのようになっているのかちょっとだけ見てみましょう。
<h4 class="list_title">HTML/ CSSのコードの例</h4>
<ol class="list_example">
<li>これは</li>
<li>リストです</li>
<li>どのように見えていますか？</li>
</ol>h4.list_title {
margin-bottom: 0;
display: inline-block;
background: #58b4ae;
padding: 8px 15px 5px;
color: #fff;
border-radius: 5px 5px 0 0;
}
ol.list_example {
background: #ecfbfc;
margin-top: 0;
padding: 15px;
}
ol.list_example li {
border-bottom: dashed 1px silver;
} なんだかよく分かりませんね。。
実際に表示させると、こんな感じです！
HTML/ CSSのコードの例
- これは
- リストです
- どのように見えていますか？
リストが表示されました！
これはHTMLで基礎となる部分を作ってあげて、CSSで色を付けたり、文字の下に点線を引いたりスタイルを整えているわけです。
そして誰にでも見やすく表示させているのがまたまた登場、ブラウザなのです。
つぎはブラウザの役割について、もうすこし詳しくみていきましょう。
ブラウザの役割
ブラウザはサーバーと、わたしたちがふだん使っている通信機器の橋渡し的な役割を持っています。
サーバーはサイトなどのデータの保管場所で、このブログも月払いで契約しているレンタルサーバーにデータが保管されています。
そしてブラウザ側でリクエストを出すことで、サーバからデータを取得して表示させているのですが、このとき流れているデータの形がさっき見た無機質なHTMLやCSSなどのコードのかたまり（HTML文書）になるのです。
つまり今ディスプレイ越しに見ているサイトのデザインは、ブラウザがHTMLなどの文書を解析して、指示通りに表示させているということですね。
あたかもレイアウトされたデザインのデータがやり取りされているように見えるのですが、実は文章も画像もすべてコードでのやり取りになっているのです。
コード食堂的に、WEBサイトを料理、その料理を食べる（サイトを閲覧する）みなさんに例えてみます。
・HTMLを書く人は料理そのものを調理するコックさん
・CSSは盛り付け担当のアシスタントくん
・サーバーは出来上がった料理を保管しておく冷蔵庫
・ブラウザはクライアントである、みなさんに料理を運んでくれるウェイトレスさん
といった感じですね！
このウェイトレスさんは美味しく食べてもらうために、冷蔵庫から出した料理を温め直して（だれにでも見やすく表示して）くれます。
ここは学習が進んでPHPやRubyなどのサーバーサイドの言語を学ぶときに役に立つ概念です。
現段階ではまーったく難しく考える必要はないので、これからはそれぞれがどんな役割をこなしているのか、イメージしながらブラウジングしてみましょう。
- HTMLとは表示させたいWEBページの構造にまつわる情報が書かれている
- CSSとはHTML文書にデザインなどの視覚的な要素を加える
- ブラウザのおかげでわたしたちが理解できるWEBページが表示されている
まとめ
インターネットにおけるWEBのしくみを見てきました。
普段使っているインターネットは、こんな感じでデータのやり取りがされていたのですね。
ブログをはじめたい人、WEB関係の仕事につきたい人は、ここで読んだ記事をしっかり理解して学習に役立ててください。
次のレッスンはHtml/CSSを書いていくための準備をしていきます。
これから一緒にがんばっていきましょう！！