プログラミング

ゼロから始めるプログラミング生活 #2 HTMLを使ってWebサイトをつくってみよう!

 

ゼロから始めるプログラミング生活 #1 HTMLでWebサイトを作る準備編 さて、HTMLを学ぶにあたって 「とりあえず実際にWebサイトを作ってみよう」 ということで早速制作に入ろうと思うのです。 サ...

前回Webサイトを作る準備が終わりました。

次は<body>内にタグを入れてWebサイトを実際に作ってみます。

見出しを作ろう

まずは「Webサイトのロゴ部分」と「お知らせ欄」を作ってみます。

使うタグは見出しを宣言するタグ「h1」と「h2」です。

まずは前回保存したHTMLデータをAtomで開き<body>内に

「h1」に「おふとんしてたらまたねてた(前回決めたお店の名前です)」

「h2」に「お知らせ」と追記します。

<h1>おふとんしてたらまたねてた</h1>
<h2>お知らせ</h2>

追記して上書き保存後、Webサイトを見てみます。

 

 

Webサイトに文字がでてきました。

見出しは6レベルあり、hの後に1~6まで設定できます。

数字が大きくなるにつれて重要度がさがっていきます。

HTMLドキュメントに見出しが必要な場合は原則として<h1>から始めます。

お知らせにお知らせを載せてみよう

次にお知らせに3件ほど記載してみましょう。

記載するお知らせはコチラ。

4/11 new! 新商品を入荷しました!
4/1 開店記念!10日まで開店記念セールを開催します!
4/1 インテリアショップ「おふとんしてたらまたねてた」開店しました!

この3つの記事をおしらせの下に追加し上書き保存してWebサイトを確認してみます。

テキストエディタで上書き保存して変更したとき

Webサイトに変更が適応されているか確認するのには

更新ボタンかF5ボタンでWebサイトを更新すると確認が楽です。

1行になってしまいました。

ここでテキストエディタと同じように改行するには

段落を指定するタグ<p></p>を使用します。

先程のテキストエディタ上の3行の文章にそれぞれ<p></p>を追記し

上書き保存してWebサイトを確認してみます。

<p>タグで段落をしたことでテキストエディタと同じように

Webサイト上でも3行になりました。

<p>タグ内で<p>タグをもう一度使って段落を作ることはできません。

またこのように<p>タグ内で使えないタグがあります。

<div>

特に意味を持たず、他の要素をまとめてグループ化する

 

<ol>

番号付きリスト

 

<ul>

番号無しリスト

 

<table>

ナビゲーションを作成してリンクを作ろう

ウェブサイト内の主要な他のページへのリンクや、ページ内リンクなどに

簡単に行き来できるようにナビゲーションを設定しておきます。

ナビゲーションは

他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく

主要なナビゲーションとなるセクションのみを示すのに適しています。

この<nav>タグを<h1>タグの下に追記します。

 

次に<nav>タグの中にリンクテキストを作っていきます。

まずはリンクテキスト(Webサイトの名前)を5項目追記していきます。

ホーム
新商品案内 new!
店舗情報
アクセス
お問い合わせ

この5項目をリスト化するために

番号無しリストを宣言する<ul>タグ、箇条書きを宣言する<li>タグを追記します。

追記する際、追記した場所がわかりやすいようにスペースを使います。
その際にtabキーを使うことでスペースを作るのが簡単になります。

追記したら上書き保存してWebサイトを確認してみましょう。

<ul>
<li>ホーム</li>
<li>新商品案内 new!</li>
<li>店舗情報</li>
<li>アクセス</li>
<li>お問い合わせ</li>
</ul>

 

次にリンクテキスト5つと大見出し(<h1>内)に

それぞれのページに移動できるようにリンクを設定していきます。

下の4つのページはまだ作ってはいませんが後で作ります。

まずはリンクテキストで移動するページのHTMLファイル名を決めます。

おふとんしてたらまたねてた(大見出し) →index.html
ホーム     →index.html
新商品案内new! →new.html
店舗情報    →about.html
アクセス    →access.html
お問い合わせ  →contact.html

次にそれぞれのリンクテキストにリンクを設定していきます。

リンク設定に使うのは<a>タグです。

<a href=”リンク先のパスまたはURL”>リンクテキスト</a>のように設定します。

おふとんしてたらまたねてた(大見出し)
        →<a href=”index.html”>おふとんしてたらまたねてた</a>
ホーム     →<a href=”index.html”>ホーム</a>
新商品案内new! →<a href=”new.html”>新商品案内new!</a>
店舗情報    →<a href=”about.html”>店舗情報</a>
アクセス    →<a href=”access.html”>アクセス</a>
お問い合わせ  →<a href=”contact.html”>お問い合わせ</a>

※重要※
上部のテキストをそのままコピー&ペーストしても
リンクがうまく機能しないことがあります。
Webサイト上での「”」がAtom上だと別のものと認識されている可能性があるためです。
うまくいかない場合「”」を消して手動で入力しなおしてみてください。
 
 

画像を挿入してみよう

次にWebサイトに画像を入れてみましょう。

今回使う画像はフリー写真素材サイト「Pixabay」から選びます。

Pixabayのサイトへ

紹介したサイト以外にもフリー素材を扱っているサイトを紹介しています。
無料ですぐに使える画像(写真・イラスト)サイトをあつめてみた! 今回は会員登録が必要なく無料で画像が使用できる お勧めのサイトを紹介していきたいと思います。 「Pix...
加工、編集する際はライセンスを確認しましょう。

今回使う画像は大見出しで使う画像とサイト中央で使う画像の2種類です。

大見出しの画像

サイト中央で使う画像

この2種類を使います。

まずwebsiteフォルダ内に新規フォルダ「images」を作ります。

その中に上の画像を「top.jpg」、下の画像を「center.jpg」と名付けて保存します。

Webサイトに画像を表示するには<img>タグを使います。

それでは画像を入れて確認してみましょう。

おふとんしてたらまたねてた → <img src=”images/top.jpg” alt=”mataneteta”></nav>タグの下 → <img src=”images/center.jpg” alt=””>
imgタグを使い画像を挿入する場合の記入方法です。

img(画像の) src(情報源)=”ファイル名”/画像”  alt(画像の代替となるテキスト情報)=”(ない場合無記入)”

 
 
 

画像が大きすぎましたね・・・

画像の大きさを変更してみましょう。

imgタグ内に「width=”幅” height=”高さ”」をピクセル数または%で追記します。

今回は50%に指定してみます。

画像が縮小されました。

フッターを作ろう

Webサイトの一番下に©Copyright mataneteta. All rights reservedを

お知らせの後に追記します。

色んなサイトでよく見る「©Copyright~」というヤツですね。

<p>&copy;Copyright mataneteta. All rights reserved<p>
©はHTML内に文字実体参照「&copy;」を入れることによって表示できます。
Atomでは文字実体参照を使わなくても©を表現することができます。

CSS適応のためにHTMLを整理しよう

次にindex.htmlの、HTML内の部分ごとに要素をまとめていきます。

まとめ方は

  • 大見出しとナビゲーション部分を「<header class=”○○”>」で囲む
  • 大見出し<h1>にclass属性を追記する → <h1 class=”○○”>
  • ナビゲーション<nav>にclass属性を追加する → <nav class=”○〇”>
  • キービジュアルを「<div class=”○○”>」で囲む
  • おしらせとおしらせ記事を「<main>」で囲む
  • フッターを「<footer class=”○○”>」で囲む
  • 全体をまとめるため<body>内全部を「<div class=”○○”>」で囲む

を追記していき、後にCSSを追記するとき適応させるために設定します。

class(分類する)=”○○(分類名)”
class属性はCSSをでスタイルを適用するために設定するものなので
CSSを適用させたい場所が出てきたら設定しましょう。

 
 
これでCSSを適用させる準備ができました。

今回のまとめ

HTMLを使った基本的なサイト構築は一旦ここで終了です。

今回作ったWebサイトがこちら。

]

 

次回は今回作ったindex.html(メインページ)をさらにそれっぽいサイトにするために

CSSでWebサイトをデザインしていこうと思います。

ゼロから始めるプログラミング生活 #3 CSSを使ってリンクテキストのデザインを変えよう! https://mataneteta.com/programmingzero2/ 前回メインページ(index.html)をHTM...