私たちが日々閲覧しているWEBページはどういう仕組みでできているのでしょうか？
この記事では、WEB構成の基礎知識をご紹介します。

1.WEBページってどう表示されているの？

WEBページは、PhotoshopやXD等で作成したデザインを元に、HTML(HyperText Markup Language)という言語で制作されています。HTMLで文章に意味づけをして、CSS（Cascading Style Sheets）やJavaScriptといった言語でレイアウトや装飾、動きを調整します。

HTML

HTMLは打ち込んだ文章に意味を付けて実際にHP（ホームページ）として動くようにするための言語です。
画像であれば<img>、見出しであれば<h1>、段落であれば<p>のようにそれぞれに単語を割り振り、割り振られた単語に画像などが表示されます。

他にも、テキストにリンクを貼ったり、画像、動画、音声などを埋め込むことができます。

HTML内の要素を制御する言語

レイアウトや装飾などをできるようになる言語の中でも、それぞれにできることとできないことがあります。また、言語によっては習得するまでの難易度が変わってきます。
使用される言語は複数ありますが、今回はCSSとJavaScriptのご紹介をします。

ブラウザについて

WEBブラウザとは、WEBサイトを閲覧する際に使用するソフトウェアのことを指します。ブラウザにも種類があります。日本の場合現在主に使われているブラウザは下記の通りです。

※ブラウザごとに癖があるため、色々なブラウザで動作確認をしてみましょう

さて、誰がつかえるタグの基準を決めているのでしょうか？
それは、World Wide Web ConsortiumことW3Cです。

W3C(ダブリュースリーシー)とは「World Wide Web Consortium」の略称で、Web技術の国際的な標準規格化を推進する標準化団体の名称です。
World Wide Web Consortium6様々なWeb技術に関する仕様・指針・要件をまとめた国際的な技術文書（Technical Report）を作成・公開しています。

簡単に言うと、「WEB標準」を決めてくれている人たち！です！

JavaScriptとjQueryの違い

共通して言えるのは、JavaScriptとjQueryは、Webサイトに動きをつけるために使われています。

JavaScriptでは10行のコードを書かなくてはならなくても、jQueryなら1〜2行で済んでしまいます！

上記二つは用途こそ同じですが、構文としては全くの別モノになっています！

2.SEOってなに？

ユーザーとして検索をしたときに検索ヒット欄の上部に出てくるWEBページがあります。

あのように、検索に引っ掛かりやすいWEBページを作成するにはどうしたらいいのでしょうか？

検索エンジン最適化　Search Engine Optimization

検索エンジンからサイトに訪れる人を増やすことで、Webサイトの成果を向上させる施策のことです。
SEOは大きく2つのステップと3つの要因で構成されます。

ステップ1：キーワードの選定と評価

（ページに応じたキーワードの選定とキーワードを実際に検索する人の数がどれくらいあるのか）

ステップ2：SEO施策の実施

◆要因1：ページ要因
どんなコンテンツのページを作るか、ページのHTMLをどう構成するか、ページのタイトルやmetaタグにどんな内容を入れるかなど。

◆要因2：サイト内要因
どんなドメイン名でサイトを運営するか・サイト全体のテーマ性をどう設定するか・サイトのクロール性をどう確保するかなど。

◆要因3：サイト外要因
他サイトからリンクを張ってもらうことを中心とした最適化。

まとめ

サイトの構造を理解することで、ホームページのデザインをするときに役立てられることも多いのではないでしょうか？
ぜひ、この機会にもっと深く掘り下げて、より魅力的なウェブサイト制作に繋げていきましょう！