vol.1アルパカこんにちは、エンジニアブロガーのアルパカ(@engineeraru)ですまず簡単に自己紹介しておくと、ITコンサル企業でエンジニアとして5年働いた後に独立してフリーランスになりました。趣味で始めたエンタメ系ブログ「アルパカタログ」はブログ開設から9ヶ月目で月間100万PVを達成し、今は主にブログ収入&受託仕事で生活しています。連載初回のこの記事では、そもそもWebサイトとは何か?Webページが表示されるまでの流れWebサイト制作に必要な道具など基本的な事柄をお伝えします。まとめ:Webサイト制作仕事の基本情報そもそもWebサイトって何?そもそもWebサイトとは何か?簡単に言うと「Webページ」が集まったものです。Webページとは今見ているこのページGoogleの検索ページAmazonの商品ページなど、普段ネットサーフィンをしていて見る画面のことです。東京フリーランスのWebサイトは、各記事(Webページ)が集まって作られています。この「Webページ」はHTMLファイルCSSファイルという2つのテキストファイルから構成されています。アルパカWebサイトを作るために「Webページ」について学んでいきましょう!Webページを構成するHTMLファイルとCSSファイルの説明Webページを構成するのはHTMLファイルとCSSファイル。それぞれ、書かれている中身や目的が異なります。HTMLファイルとは?HTMLファイルに書かれている内容は「Webページの文章と構造」です。現在見ているこの記事の文章も、HTMLファイルに書かれています。このHTMLファイルの目的は2つあります。ページを読んだ人に「文章」を伝えるWebブラウザに「ページの構造」を伝える簡単に言うと、Webページの骨組み(骨格)みたいなものだと考えればOKです。アルパカこのHTMLファイルがなきゃWebページは成り立ちません!CSSファイルとは?CSSファイルに書かれている内容は「Webページの見た目を変える情報」です。文字を大きくしたり、文字色を変えたりする時に使われます。CSSファイルを使うことでWebページのデザインを設定することができます。「人に見やすいWebページ」を作るためには必須です。まとめると、Webページの文章を書く「HTMLファイル」Webページの見た目を設定する「CSSファイル」という2つのファイルが一緒になって、Webページが作られています。Webページが表示されるまでの流れ次に、Webページが表示されるまでの流れを説明します。Webページを表示するためには「Webブラウザ」を使って「サーバ」から「データ」を持ってくる必要があります。WebブラウザとはWebページを見るためのソフトウェアです。Explorerなどが使われることが多いです。Webページを見たい人(ユーザ)は、WebブラウザにWebページの「URL」(ネット上の住所)を入力します。すると、Webブラウザは「サーバ」と呼ばれる他の人のコンピュータに情報を取りに行きます。サーバは、指定されたURLのデータ(HTMLファイルやCSSファイルの中身)をWebブラウザに渡します。このデータはWebブラウザ用です。人間が見ても、どんな見た目になるのかわかりません。そこでWebブラウザは、サーバからもらったデータを元に、人間に見える形(Webページの形)に変換して、画面に表示します。以上のようにWebページが表示されるまでにはWebブラウザは、サーバにデータを依頼するサーバは、Webページを表示するためのデータをWebブラウザに渡すWebブラウザは、もらったデータを人間に見えるように変換するという処理が裏側では行われています。Webサイト制作に必要な道具は2つWebサイト(Webページ)を作るのに最低限必要な道具は2つだけです。テキストエディタWebブラウザ両方“無料”なので、初期費用0円でWebページを作り始めることが出来ます。アルパカそれぞれどんな道具か簡単に解説しますテキストエディタとは?テキストエディタはWebページを「作る」のに使う道具です。Editor、Atomなどのテキストエディタを使うことが多いです。アルパカ30DAYSトライアル1stでは、VSCodeを使うことをオススメしていますね!Webブラウザとは?WebブラウザはWebページを「見る」のに使う道具です。以下のような特徴を持っていますWebページを表示するHTMLやCSS等のデータを裏側で処理して人間に見える状態に変換するWebページの修正を手助けする機能がある(一部のブラウザ)主に、テキストエディタで作ったHTMLファイルやCSSファイルが「意図通りに表示されているか?」を確認するために使います。Explorer、Firefoxなどがあります。Chrome」がよく使われています。Webページ作成の流れWebページ作成の流れは以下の通りです。テキストエディタを使ってコーディングするWebブラウザでWebページを表示する確認して修正するまず、VSCodeなどのテキストエディタを使って、HTMLファイルとCSSファイルを編集します。※ファイルを編集して、ソースコードを書くことを「コーディング」と言いますWebページの内容(文字)を書くためにHTMLファイルを編集し、見た目(デザイン)を作り込むためにCSSファイルを編集します。次に、作成したHTMLファイルとCSSファイルを、Webブラウザを使ってパソコンの画面に表示します。この時行うことは、Webページが意図通りに表示されているかの確認です。Webブラウザで確認した後は、テキストエディタを使い、意図と異なる部分の修正を行います。...」という流れを繰り返し、修正するところがなくなったらWebページが完成です。まとめ:Webサイト制作仕事の基本情報Webサイト制作仕事の基本的な情報についてお伝えしました。ポイントは以下の通りですWebサイトは複数のWebページが集まってできているWebページはHTMLファイルとCSSファイルで構成されているWebページを作るのに必要な道具はテキストエディタとWebブラウザアルパカ次回は、もう少し技術的なことを図解していきます。いう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。投稿一覧エンジニア兼ブロガー。IT企業で5年働いた後に独立しフリーランスになる。趣味のエンタメ系ブログ「アルパカタログ」は9ヶ月目で月間100万PVを達成。初心者や未経験者向けの分かりやすい解説が得意。2019.04.17この数年、ますますたくさんの人がプログラミングを学ぶようになりました。2019.03.31こんにちは、フリーランスエンジニア兼テックライターのしろ(@siro3460)です。USイメージキャラクター『Freena』フリーランスの羅針盤となるメディアサイト『東京フリーランス』。フリーランスの皆さんに役立つコンテンツを配信しています。