ブラウザとは?HTMLとは?非エンジニアでもできるWebプログラミングの第一歩

ブラウザとは?HTMLとは?非エンジニアでもできるWebプログラミングの第一歩

木下雄策

木下雄策

はじめまして、「teratail」というエンジニア特化型Q&AサイトのDevRelを担当している、外部ライターの木下です。エンジニア向けのサービスの運営をしていますが、僕自身はエンジニアではありません。趣味でプログラミングをやっている、週末エンジニアです。大学時代は刈り上げ・ヒゲ・アフロで路上で踊ってました。

本題に入ります。

この連載では、「エンジニアではないけど、Webプログラミングやってみたい!」「何かつくってみたい! でも……なんか難しそうだし、何やってるかよく分かんないな……」なんて思っている方が、「ちょっとだけコードが書けて何か作れるようになったよ!」ってなることを目標に書いています。この連載を通じて、一人でもプログラミングする人が増えればうれしいです。

なお、この記事を書いている木下はプロのエンジニアではないので、技術について雰囲気や感覚で理解しているところも多々あります。ですので技術に関する説明が一部ニュアンスが違ったり、厳密には表現や解釈が正しくなかったりするかもしれません。

その代わり非エンジニアの視点からでも理解できるよう丁寧に細かく書いていこうと思いますので、お付き合いいただけると幸いです。また、体系的に学ぶことよりも「作ること」に重点を置いています。もし体系的にWebプログラミングの知識を身につけたいなら、下記記事に紹介されているサイトが参考になると思います。

今回のゴール

0-6111

今回は、本当にWebプログラミングのはじめの、はじめの、はじめの一歩です。

まずは上にある画像のように、ブラウザに日本語を表示させるってところをやってみて、「ブラウザって何やってるんだろう?」というところを理解する、「HTMLのはじめのはじめの一歩」を体験していただければと思います。

ブラウザって何をしているの??

ブラウザといえば、Google ChromeやSafari、 Firefox、InternetExplorerなどいろいろありますが、そもそも「ブラウザ」って何なんでしょうね? 何ができるんでしょう?

検索ができる?

ん〜なんか違います……。分かるようでよく分からないので、ひとまず手を動かしてその感覚つかんでみましょう。

ブラウザの役割を探っていこう:ブラウザに文字を表示させてみる

まず、Windowsの人は「メモ帳」を、Macの人はアプリケーションフォルダにある「テキストエディット」から作業ができます。ただ、本当はメモ帳よりも、テキストエディタ「Sublime Text」がオススメです。下記ページよりダウンロードができます。

http://www.sublimetext.com/

Sublime Textについての詳細はこちらにあります。

 

メモ帳やSublime Textを開いたら、下記のようにアルファベットで「Who am I !?」と書いてみましょう。

Who am I !?

そして、ファイル名を「profile.html」にして保存しましょう。保存先はどこでも問題ないので、今回はひとまずデスクトップに保存します。

0-1DandD-

そしてブラウザを開き、今つくった「profile.html」をドラッグ&ドロップしてみてください。

 

0-111

すると、上のようにブラウザに「Who am I !?」と表示されたはずです。

このようにブラウザは 「『●●.html』というファイルに書いてある文字を読んで、画面に表示する」というのがもっとも基本的な役割なのです。こう考えるとなんかブラウザの印象変わってきますよね?

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

エンジニア特化型Q&Aサイトteratail(https://teratail.com/)のDevRel担当。元アフロの0.5エンジニア。福岡生まれの福岡育ちで、好きなものはJavaScriptとスノーボード。モットーは「人生楽しく」

このメンバーの記事をもっと読む
0エンジニアから0.5エンジニアへ | 8 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL