本ページには広告が含まれています。

Webページの基礎知識

Webページの基礎知識
画像はCanva「Text to Image」で生成しました
2023.08.21

さあ勉強開始です。

まずはWebページの基礎知識についてザックリと勉強します。

スポンサーリンク

WebページとWebサイト

簡単に言うとWebページの集まりがWebサイトですね。
今ご覧になっているこのページが「Webページ」で kurumico.com が「Webサイト」です。

Webページとは

Webページとは、インターネット上で公開される1つの文書（ブログなら記事）のことです。Webサイトの中の1ページです。

Webページは、HTMLという言語で書かれていて、HTTPというプロトコルでやり取りされます。

Webページは、ウェブサーバーというコンピューターに保存されていて、ウェブブラウザというソフトウェア（Google Chrome や Microsoft Edge など）で閲覧できるようになっています。

Webサイトとは

Webサイトとは、Webページのホームページと呼ばれるトップページを含めて、複数のWebページをひとかたまりに構成したものです。

Webサイトには、目的や対象に応じて様々な種類があります。例えば、各種のポートフォリオサイト、ネットショップサイト、ビジネスサイト、飲食店サイト、そしてブログサイトなどたくさんあります。

そして、Webサイトの見た目や使いやすさを設計し制作することがWebデザインです。Webデザインには、HTMLやCSSなどの技術や、UI/UXなどの知識が必要です。

UI/UXとは

ユーザーがソフトウェアやデータなどのプロダクトやサービスを利用する際に感じる体験や感情をデザインすることです。

UI（User Interface）とは、ユーザーが見たり触れたりして操作する部分のことです。例えば、ボタンやメニュー、フォームなどの外観や配置などの見た目や使い勝手が UI の部分です。

UX（User Experience）とは、ユーザーが得られる経験や感じる印象や感想、満足度などのことです。例えば、使いやすさや楽しさ、信頼感などの感情や評価が UX にあたります。

UIとUXは密接に関係しています。UIはUXを作り出す要素のひとつであり、UXはUIを含めた他の要因（コンテンツ、機能、価値など）にも影響されます。

UI/UXデザインのポイントには、以下のようなものがあります。

  • 色やフォントなどの視覚的な要素への配慮する
  • 統一感や一貫性のあるデザインを心がける
  • シンプルで直感的な操作性を目指す
  • プロトタイプやテストを繰り返し、検証する
  • ユーザーのニーズや課題を理解し、解決策を提供する
  • ユーザーの行動やフィードバックを分析し、改善点を見つける

HTML/CSS/JavaScriptの役割

Webページのファイル構成は次のとおりです。
・内容が書いてあるファイル（HTML）
・見た目が書いてあるファイル（CSS）
・絵が描いてあるファイル（画像ファイル）
・動作が書いてあるファイル（JavaScript）

Webページ作成は、HTMLで基本構造を、CSSでデザインを行います。そしてJavaScriptを利用することでインタラクテイプなページを作ることができるということです。

WordPressを使うと、そのしくみを意識しなくても簡単にWebページを作成できますが、実際には、WordPressによってHTMLやCSSが記述・構成されています。

HTMLとは

HTMLは「Hyper Text Markup Language」マークアップ言語の略称です。マークアップとは「目印を付けることで中身の構造を表現する書き方ルール」です。

HTMLとは、Webページの文書構造やページに表示される文字情報を記述する言語です。例えば、見出しや段落、リストや画像などの要素を定義します。

HTMLは、記述次第で非常にデサイン性の高いページを作ることができます。しかし、これはページの構造と文字情報の記述というHTML本来の目的から逸脱するため、W3C（world Wide web consortium）というHTML、CSSに関する標準化を行う組織は、デザインなど見た目に関わることはCSSに記述することを勧告（2019年 CSS Writing Modes Level 3 勧告）しています。

CSSとは

CSSは「Cascading style Sheets」の略称です。

CSSとは、Webページの見た目やレイアウトを定義・調整する言語です。例えば、色やフォント、サイズ、余白や背景などの装飾デザインを指定します。

かつては、HTMLで「構造の定義」と「見た目を整える」両方を行っていましたが、「見た目を整える」部分を分離するためにCSSが生まれました。

JavaScriptとは

JavaScriptとは、Webページに動きやインタラクションを付けるプログラミング言語です。例えば、ボタンをクリックしたら画像が変わったり、メニューが開閉したり、急に画面が動き出したりなどいろいろなことができます。

インタラクテイプなWebページを作るには、CGIやFlash、Silverlight、AIRなどいくつかの技術が挙げられます。その中のひとつが「JavaScript」です。

JavaScriptは、記述に特別なソフトウェアを必要としません。HTML内に記述が可能という特長があり、アイディア次第で利用法が無限に広がります。このことから、インタラクテイプなWebページの作成には欠かせません。

近年は、JavaScriptの非同期通信を利用した Ajax（エージャックス）が人気を集めています。「Ajax」は「Asynchronous JavaScript ＋ XML」の略です。（Asynchronous の意味は「非同期」）
「Ajax」は「JavaScriptを使ってXMLをWebサーバと非同期通信する」というです。

URLとパス

URLは「Uniform Resource Locator」の略で、インターネット上に存在するデータやサービスなどの位置を記述する標準的な記法の一つです。

URLとは

URLは、ある特定のデータを指し示す住所と名前のようなもので、ブラウザがサーバーに欲しいデータを要求する時に使われます。例えば、このサイトのURLは https://www.kurumico.com です。

次のようなURL例の構成要素については次のとおりです。
《 https://www.kurumico.com/excel-vba-sample-download/#139 》

  • スキーム名：「https://」の部分
    　データにアクセスするための方法です。例えば、http や https、ftp などです。
  • ホスト名、サブドメイン名（省略可能な場合もある）：「www」の部分
    　1台のコンピュータを識別するための名前です。例えば、www や mail などです。
  • ドメイン名：「kurumico.com」の部分
    　IPアドレスに割り当てたわかりやすい名前のことです。
    　ホスト名とドメイン名を組み合わせてたものが FQDN（完全修飾ドメイン名）です。
    　ここでは、www.kurumico.com が FQDNです。（FQDN ＝ コンピュータ名）
  • ポート番号：サーバーがデータを提供するために開いている番号（ここでは省略されている）
    　省略されることもあります。例えば、:80 のように記述します。
  • パス：サーバー内でデータが保存されている場所「/excel-vba-sample-download/」の部分
    　例えば、ルート直下の場合は /index.html などと直/ファイル名 となります。
  • クエリ：データに対する追加的な情報や条件を表します。?で始まり、&で区切られます。
    　例えば、?q=URL や ?lang=ja&sort=date などがあります。
  • フラグメント：データ内の特定の部分を表す（#で始まります）「#139」の部分
    　例えば、#top や #toc4 などがあります。

絶対パスと相対パス

Webページの中で他のファイルやページへのリンクを指定する方法には、絶対パスと相対パスの2種類あります。

「絶対パス」とは、目的のファイルやページがある場所を固定の位置からURLで指示する方法です。
例えば、https://www.kurumico.com/wp-content/uploads/2023/06/class16_sample.zip というURLは、class16_sample.zipというファイルを www.kurumico.comというサーバーのルートディレクトリ（一番上）からはじまる「絶対パス」で指定しています。

「相対パス」とは、目的のファイルやページまでのルートを現在地からファイル名で指示する方法です。先ほどの例をルート相対パスで表現すると、ドメイン部分「https://www.kurumico.com」を省略して「./wp-content/uploads/2023/06/class16_sample.zip」と表記します。ルートディレクトリを基準にして class16_sample.zip というファイルの場所を指定しています。

最初の「.」が基準を意味しています。ルートディレクトリを基準にして、フォルダ/wp-content/の中にあるフォルダ/uploads/の中にあるフォルダ/2023/の中にあるフォルダ/06/の中にあるファイルclass16_sample.zip という意味の表記です。「.」は省略可能です。

この「.」が「../」のように「..」の場合は一つ上の階層を意味します。例えば現在のファイルの一つ上の階層の別のディレクトリにあるファイルの指定は「../ディレクトリ名/ファイル名」となります。

絶対パスと相対パスは、次のような基準で使い分けます。

絶対パス相対パス
・指定ファイルの場所が外部サイトの場合
・相対パスでは外部サイトにアクセスできない		・指定ファイルが同一サーバー内の場合
・簡潔で移動しやすい

単位について

HTML/CSS/JavaScriptで使うサイズの単位には、絶対的な長さの単位と相対的な長さの単位があります。

絶対的な長さの単位

絶対的な長さの単位とは、画面のサイズや解像度に関係なく固定された値を表す単位です。

単位読み方説明
pxピクセル画面上の最小の点の大きさ　1px=約0.026cm
mmミリメートル法の単位　1mm=0.1cm
cmセンチメートル法の単位　1cm=10mm
inインチヤード・ポンド法の単位　1in=2.54cm
ptポイント文字のサイズ指定に使用　72pt=1in
pcパイカ文字のサイズ指定に使用　1pc=12pt

レイアウトやデザインを固定したいときには、ブラウザーやデバイスに依存しない絶対的な長さの単位を使います。

相対的な長さの単位

相対的な長さの単位とは、他の要素や親要素、ブラウザー、デバイスなどに依存して変化する値を表す単位です。

単位読み方説明
%パーセント対象に対してのサイズを割合で指定
例えば、width:50%=親要素の幅の半分
emエム現在使用しているフォントの高さを1としたサイズ指定
例えば、font-size:2em=使用フォント高の2倍の高さ
remレムroot（HTML要素）のフォントサイズを1としたサイズ指定
例えば、font-size:1.5rem＝rootのフォントサイズの1.5倍
vwビューポート幅ビューポート（画面やウィンドウ）の幅に対する割合(%)
例えば、width:10vw=ビューポートの幅の10%
vhビューポート高ビューポート（画面やウィンドウ）の高さに対する割合(%)
例えば、height:10vh=ビューポートの高さの10%

レスポンシブデザインを考慮するときは相対的な長さの単位を使い、画面やフォントサイズの変化に柔軟に対応できるようにします。

まとめ（おわりに）

Webページの基礎知識についてザックリと勉強しました(^^;
今後は、それぞれにの項目についてもう少し詳しく勉強をすすめていきます。

スポンサーリンク
エックスサーバーバナー広告
スポンサーリンク

当サイト内で使用したサンプルはDLできます

ダウンロードページへトップリンクは下のカードクリックでジャンプできます。
よろしければご利用ください！

【Excel VBA】サンプルファイル_ダウンロードのページ
【Excel VBA】の記事内で使ったサンプルファイルを（Zipファイルで）ダウンロードできるようにしました。記事内では細かい部分の解説が不十分ですが、実際にファイルをダウンロードして実行することで使えるのかどうか見ていただけたら幸いです。
www.kurumico.com