皆さんは毎日Webサイトを閲覧し、ECで買い物をし、デジタル広告を見ています。普段はこれらのデジタルサービスの裏でどんなことが起きているのか、それを実現する技術がどのようなものなのかを全く意識しないで使っているのではないでしょうか。全くデジタルに関わったことのない皆さんがデジタルを学び直す最も効率的な方法のひとつは、まず周りにあるデジタルサービスの大まかな概要と繋がりを覚えることです。これをイメージできるようになることがきっとデジタル人材に近づく第一歩です。
デジタルサービスの裏にはそれを提供している企業があります。皆さんが今後会社でデジタル化によって業務の効率化を進める時、自社の既存サービスのデジタルトランスフォーメーション（DX）を推進する場合には提供側の視点が必要となるのです。
まずはいつも使っているデジタルサービスについてもう一歩深く勉強してみましょう。
Webサイトへのアクセスとはどういうこと？
私たちがPCやスマホからWebサイトへアクセスする場合、以下のようなルートでインターネットにあるサーバーにやりたいことをリクエストしています。例えば、アマゾンのようなECサイトで商品Aを買いたいというケースでは、Webサーバーにリクエストを投げると、その裏で必要な処理を別のサーバーで実行、その結果をWebサーバーが受け取って、処理結果のHTMLをユーザーのPCやスマホに返すイメージです。ユーザー側ではPCやスマホにブラウザというソフトウェアが入っており、HTHLをわかりやすく表示するというプロセスです。
HTMLの中身を見てみよう。
ここではHTMLとはどのようなものかを実際に見てみましょう。複雑なWebサイトではなく、以下のような簡単な文字をブラウザ上に表示してみました。
このWebサイトを表示するためのHTMLはどうなっているのでしょうか。HTMLといっていますが、実際はウェブページの構成を決める「HTML」とウェブページの色やデザインを決める「CSS」という２つの言語から成り立っています。
上のindex.htmlファイルの7行目に<link>タブというのがありますが、この中でスタイルを決めるCSSファイルがどこにあるかを指定しています。
これはbase.cssという名前のCSSファイルですが、HTMLの10行目にある<h1>タブのスタイルをして指定ます。この場合は色を赤にするという指定です。
ここでは簡単なウェブベージの例をご紹介しましたが、複雑なウェブサイトもこのようにHTMLファイルとCSSファイルが連携しながらウェブページをを作成しているのです。
HTMLとは？
HTMLとはHyper Text Markup Languateの略で、ハイパーテキストを記述するマークアップ言語。ハイパーテキストとはWebページにリンクを設置して別のページに遷移できる仕組みであり、マークアップ言語は文章に意味づけできる言語。例えば、<h1>〇〇〇</h1>というタグで囲んだら「見出し」となる。
HTML文書は以下のような構造でできている。
HTMLファイルでタブを使って構成を指定する。
DOCTYPE宣言
html要素
head要素：メタデータ（データについての情報）
body要素：コンテンツ
<title>〇〇</title>：タイトルタグ（画面タブの表示）
<h1>〇〇</h1>：h1タグ（見出しを表示）
<a>〇〇</a> ：アンガータグ（ハイパーリンク）
CSSファイルでスタイルを指示する要素とスタイル内容を指定する
body｛color:red; ｝ （htmlで記述したbody要素の文字を赤に指定）
Webサービスに関連するキーワードまとめ
- プログラミング言語：コンピュータに命令するための指示書
- HTML：ウェブページの構造を決める言語
- CSS：ウェブページのスタイルを指定する言語
- Javascript：ウェブブラウザ上で動くプログラミング言語
- Ruby、PHP、Python：サーバーサイドで動くプログラミング言語
- Pythonはデータ分析や機械学習でよく使われています。
- SQL：データベースを操作するための言語
HTML/CSSの学びを深めたい方におすすめUdemy3講座
HTML/CSSやJavascriptの学びを深めたい方は以下のUdemy講座がわかりやすくておすすめです。
コメント