2020年10月20日

コーディング勉強 初心者むけ【 webサイトの仕組み】

こんにちは。これからコーディングを始める方や、始めたばかりの方にお役に立てる内容を掲載していきたいと思います。

実際にわたしもHTMLとCSSを勉強し始めて困ったことや分からなかったことは、ネットで検索して理解を深めながら進めています。

本記事がコーディング初心者の方のお役にたてば嬉しいです。

そこで第1回目の今回は、本格的にコーディングを勉強する前に知っておきたい基礎知識について書きました。

まずはWEBサイトの仕組みをしろう

インターネット上にある「サーバー」へWEBサイトのデータをアップロードすることでWEBサイトが公開できます。

サーバーのある場所、つまり「URL」をWEBブラウザに入力することで、世界中の人が24時間いつでも公開したサイトを閲覧することが可能になります。

おもなWEBサイトを構成するファイル

◎HTML

「HyperText Markup Language」の略称で、見た目を構成するマークアップ言語の1つです。

簡単に言うと、WEBサイトを作るための文章です。

<HTML一例>

ごちゃごちゃしていてわけがわからないですね。。

<ブラウザが読み込むと…。>

見慣れたサイトになりました!

私たちには読みにくいHTMLですが、WEBブラウザや検索エンジンはこのHTML文章からWEBサイトを読み解いていきます。

◎CSS

WEBページの装飾を指定するためのファイルですね。HTML単体では文字が並んでいるだけになりますが、CSSによって文字の大きさや色、スタイルなどさまざまな指定ができます。

そのほか、JavaScriptやPHPなどもありますがここでは詳しく説明はしません。

<※超重要>検索エンジンとは

コーディングを進める前にもう一つ理解しておきたいことがあります。

わたしたちは日々ネットを使って情報を集めるとき、検索しますよね。

あなたが今このサイトにたどり着いたのも、初めからURLを入力してたどり着いた人は少ないのではないでしょうか。

あなたが検索窓に入力した「キーワード」に対して表示されたサイトは、たまたま出てきたわけではありません。

「検索エンジン」は日々WEBサイトを巡回し、何を掲載しているサイトなのか、どんな言語で書かれているなど情報を集め蓄積しています。

その蓄積されたWEBサイトのなかから、わたしたちが検索したキーワードに対して最適なサイトを表示してくれているのです。 つまり、より多くの人にWEBサイトを閲覧してもらうためには、人間だけではなくWEBブラウザや検索エンジンにも理解しやすいものを作る必要があるということですね。

まとめ

さて、今回はコーディングに入る前に、WEBサイトの仕組みとコーディングについて簡単に説明をさせていただきました。

コンピューターが理解しやすいコーディングを心がけることもWEBデザインをするうえで大切になってきます。

WEBサイトのしくみを意識して、コードやタグの勉強をしていくことをお勧めいたします。