• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第1回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

プログラミング学習コラム1回目の勉強内容です。

はじめまして。今回コラムを担当させていただくことになりました岩井優介(いわいゆうすけ)です。

タイトル通り、WEBサイト制作初心者の筆者がこれからWEBサイト制作をはじめようと考えていらっしゃる方のために、初心者目線で制作方法について解説するコラムです。読者のみなさんと共に成長することができれば、と思います。

まず、

そもそもホームページってどんな風につくられているの?

と多くの方が疑問に思われるでしょう。そこでホームページの裏側をのぞいてみましょう。

ブラウザがSafariの方はSafariメニューをクリックして、環境設定(Windows版の場合は編集→設定)を開いてください。そして詳細の中の一番下にある「メニューバーに“開発“メニューを表示」のチェックボックスにチェックをいれてください。

これで準備は完了です。あとは好きなホームページに飛んでメニューバーから 開発→ページのソースを表示 と進んでみましょう。

例えばエンジニアインターンのホームページの場合は、

このようになっています。

このようにホームページはプログラミング言語と呼ばれる文字や記号で記述されています。多くの種類がありますが、このコラムではその中でもHTMLとCSSと呼ばれるものを扱いたいと思います。

ではHTMLとはいったい何でしょう?

HTMLとは、WEB上の文書を記述するための文書の構造や見栄えに関する指定を文書とともにテキストファイルに保存するコンピュータ言語です。例えば文の配置やフォント、写真を追加・変更して記述できるわけです。HTMLは基本的に<br>エンジニアインターン</br>のように開始タグ(<br>)と終了タグ(</br>)を合わせて一つの要素としています。

※<br>とは、Wordソフトで言う改行のようなものです。

このときに気をつけていただきたいのが、タグを半角で記述するということです。ここを間違えるとうまく作動しないということになりかねません。Shiftキーを押しながら、「ね」と「る」を押すことでそれぞれ< >が記述できます。

また、一部のタグでは開始タグの中に属性と呼ばれるオプションが必要になるものがあります。それは、

<タグ名 属性=”値”>~</タグ名>

という形式になっています。例えば、ホームページ上に四角い枠を作りたいときに、ただ単にタグ名を入れるだけではどれくらいの大きさの枠を作ればよいのかわかりません。その際に自分で値を入れて、縦横の長さをこの値にして四角い枠を作ります、と命令をしているのです。

次に、HTMLの基本構造に移りますが、

<html>
<head>
</head>
<body>
</body>
</html>

このような構造になっています。

<html>はHTMLの開始を表すタグです。<head>~</head>の~部分にはその文書の情報を表すものを書き込みます。この部分はブラウザには表示されません。一方<body>~</body>の~部分にはその文書の本文となる情報を書き込みます。これはブラウザに表示されます。最後にHTMLの終了を表す</html>のタグを書きます。

HTMLでは開始タグと終了タグの間の~部分にいくつものタグを記述することができ、これを入れ子構造と呼びます。HTMLには多くのタグがあります。慣れないうちはHTMLリファレンスなどのサイトを参考にするのがよいでしょう。

それでは早速書いてみましょう。テキストエディットと呼ばれるアプリケーションを開いてください。まずは標準的なHTMLで文書を作成するという宣言をします。

<!DOCTYPE html>

と書いてください。次に文字コードを指定します。<head>タグのなかに、

<!DOCTYPE html>
<html>
<head>
</head>
<meta charset="UTF-8">
</head>
</html>

というように<meta>タグを挿入してください。次に、<head>タグ内にサイトのタイトルを<title>タグで書いてください。 

<!DOCTYPE html>
<html>
<head>
<title>笑論法</title>
<meta charset="UTF-8">
</head>
</html>

あとは本文を書きましょう。まずは<body>タグを記述します。次に<h>タグで見出しを作ります。それから<ul>タグを書きます。このタグは序列のない箇条書きを表すタグです。<ul>タグ内の内容は<li>タグで箇条書きにして表します。

<!DOCTYPE html>
<html>
<head>
<title>笑論法</title>
<meta charset="UTF-8">
</head>
<body>
<h1>サークル概要</h1>
<ul>
<li>新進気鋭のお笑いサークルです</li>
<li>毎週火曜日に練習を行っています</li>
<li>定期的に漫才やコントライブも開催しています</li>
</body>
</html>

この作業を行った結果、テキストエディットはこのようになりました。これをホームページに実際に反映させてみましょう。作成したこのファイルを保存して複製します。そしてそのコピーしたものを一度クリックしてenterキーを押せば名称が変更できます。末尾に「.html」と入力してください。すると、

となりました。これでWEBサイトが作成できたことになります。

HTMLではリンクを貼ったり写真を挿入したりすることもできるのですが、それは次回解説しますのでお楽しみに。

 

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top