HTML入門⑨リストを作る

リストはこんな感じ

おいしい食べ物

  • いちご
  • りんご
  • ぶどう
  • みかん
  • もも

フルーツポンチの作り方

  1. フルーツを用意します。
  2. フルーツを一口サイズにカットします。
  3. サイダーをたっぷりとかけます。
  4. 完成

 

リストは<ul><ol><li>というタグを使って記述します。コードは次のとおりです。

・番号なしリスト

 

・番号ありリスト

 

それぞれ、ブラウザで見てみると以下のようにリスト表示されます。

各部の説明

<li></li>タグで囲ったものがリストのデータになります。

それをさらに<ul></ul>タグ、<ol></ol>タグで囲むとリストの完成です。

<ul>タグで囲むと番号なし、<ol>タグで囲むと番号ありのリストになります。

HTML入門⑧表を作る

表はよく使う

表はこのようなものです。

 

あなたの使っているブラウザは?

GoogleChrome InternetExplorer Firefox
男性 35人 28人 19人
女性 26人 43人 21人

アンケート結果は捏造しましたすみません…

表はさまざまな場面で使いますよね。データの表示や旅行プランの値段表、料理のレシピを表示させることもできますね。

HTMLの世界では表のことを「テーブル」と呼びます。テーブルの表示には<table>タグを使います。

このコードをブラウザで確認すると、以下のような表になっているかと思います。

各部の説明

<table></table>で囲んだ部分が表になります。この中に縦列や横列の内容を記述していきます。
<tr></tr>は行を意味します。この中に横一列のデータを記述します。
<td></td>で囲まれたデータが横に並ぶ個々のデータになります。データが含まれる1マス1マスを「セル」と呼びます。

例の場合、

一行目に「(空白)」と「GoogleChrome」と「InternetExplorer」と「Firefox」というデータを並べ、

二行目に「男性」と「35人」と「28人」と「19人」を並べ、

三行目に「女性」と「26人」と「43人」と「21人」を並べています。

セルの結合

セルを結合することも可能です。

縦のセルを結合するにはrowspan=””
横のセルを結合するにはcolspan=””という属性を追加します。

 

””の中に結合したい数を記述します。そうすると縦と横それぞれの方向に指定した数だけ結合され、ひとつのセルとして表示されます。

HTML入門⑦リンクを貼る

リンク?

リンクはwebページ間で移動を行うためのものです。現在のページから別のページに移動させたい場合に使用します。

現在のページに移動先のページのURLを結びつける(リンクさせる)ことで機能させます。

多くの場合、リンクが指定されている文字をクリックすることでリンク先のページにジャンプします。

リンクの指定には<a>タグを使います。<a>タグで囲んだ文字がリンク文字になります。

 

このコードをブラウザで確認してみると、以下のように文字にyahooのホームページがリンクされています。もちろんクリックするとyahooのページに遷移します。

Yahooへのリンク

各部の説明

各部といっても属性は一つしかありませんが…

href=”https://www.yahoo.co.jp/”

href属性でリンク先を指定します。

また、外部サイトではなく自分のサイト内の別のhtmlファイルにリンクさせたい場合は、画像を貼った時と同じ要領で現在のファイルからの相対パスを指定してあげればよいです。

HTML入門⑥画像を貼る

画像を貼りたい

まずは前に作ったフォルダの中に、画像を格納するためのフォルダを作成し、その中に適当な画像を格納してください。

私の場合、以下のようなファイル構造になりました。

ここまでできたら、コードを書いていきます。

ページに画像を貼るには<img>タグを使います。<img>タグは本講座で初めて属性を使用します。

imgタグは終了タグが不要ですので覚えておいてください。

 

これをブラウザで確認してみるときちんと画像が表示されると思います。

各部の説明

src=”img/hogehoge.jpg”

これはsrc属性です。画像ファイルがある場所を指定するためのものです。現在のhtmlからの相対パスを指定するのが一般的です。imgタグには必須の属性となっています。

この例ですと、同じ階層のimgというフォルダの中にあるhogehoge.jpgを指定しています。

width=”500″

これはwidth属性です。表示する画像の横幅を指定できます。単位はピクセルです。

単位に値を「50%」にするとブラウザの幅の50%の横幅になるのでそれも試してみてください。

また、高さを指定するheight属性もあります。

横幅のみを指定し、高さを指定しなかった場合、画像の縦横比を保ちながら横幅に合わせて高さが自動で調整されます。

横幅も高さも指定しなかった場合は元の画像の大きさで表示されます。

alt=”hogehoge”

alt属性は何らかの理由で画像が取得できなかった場合、代わりに表示する文章を指定します。

夕焼けの空、混雑した祭り会場など、その画像の説明となる文字を指定します。

画像が取得できなかった場合、下のように指定した文字が表示されます。

画像を取得できませんでした!

HTML入門⑤文章を書く

改行する

文章を書くときにもいろいろなタグが使えます。

まずは以下のようなHTMLを書いて、ブラウザで見てみましょう。

すると、なにか変です。

HTMLでは改行しているはずなのにブラウザで見ると改行されていません。

 

実はHTMLでどれだけ改行してもブラウザではまったく改行されません。HTML内での改行は無効化されるわけです。

文章を改行させるには<br>タグを使用します。

このように開業したい箇所に<br>タグを記述します。

<br>タグは終了タグが必要ないので覚えておきましょう。

そうするとブラウザでもうまく改行されます。

 

段落を定義する

文字を<p>タグで囲むとそれは段落(文章)として定義されます。

使い方は、ひとまとまりの文章を<p>タグで囲むだけです。

 

HTMLはページの構造を記述していくためのものですから、<p>タグを使わなくても表示されるからと言って省略しないようにしましょう。

また、<p>タグの終了タグの後ろの文章は次の行に表示されることも覚えておきましょう。

 

文字を強調する

見出しほどではないですが文字を強調したいときがあります。

文字を強調するには<strong>タグを使用します。

そうすると<strong>タグで囲んだ部分が太字になって強調されます。

 

文字のサイズ、色を変える

文字のサイズや色を変える時はCSSを使います。

CSSは別の機会にご紹介しますので今はサイズ、色は変更せずに進めていきましょう。

HTML入門④本文に見出しを付ける

見出しは大事

作ったページが見やすいように各コンテンツの見出しをつけましょう。

見出しはページを快適に見てもらうためには欠かせないものです。例えば次のような文があったとします。

ごく普通のサイト紹介ですね。

しかしこのままでは少し見づらいので、文章の見出しとなる部分を強調します。

見出しを強調するには、<h>タグを使用します。

今回からは<body>タグ内のみサンプルとして紹介しますので自身でindex.htmlを書き換えてください。

 

このように見出しとなる部分を<h>タグで囲むと、以下のように、見出しが強調されます。

<h>タグは<h1>~<h6>、まで用意されていて、h1が大見出し、h2が小見出し、そのあともすべて小見出しとなっています。

デフォルトでは<h1>の文字サイズが最も大きく、数字が小さくなるにつれて文字が小さくなっていきます。

 

注意点

<h1>タグはページの最も重要な見出しを意味しますので、ページ内に一つしか記述できません。2つ以上記述しても問題なく表示されますが、ルール違反です。

<h>タグで囲むと文字のサイズが変わりますが、文字のサイズを変更する目的での使用はしてはいけません。文字のサイズを変えたいときは、後述するCSSで指定します。

HTML入門③ページにタイトルを付ける

タイトル?

タイトルはGoogleの検索結果に表示されたり、ブラウザのタブに表示される部分です。

一目でそのサイトに何が書いてあるかわかるタイトルにすると効果的です。

 

タイトルを指定するには<title>タグを使用します。

タイトルは本文の要素ではなくページの情報なので、ページの情報を記述する<head>~</head>の間に記述します。

前回作ったindex.htmlに下記のコードを追記して上書き保存してください。

 

そしてブラウザで確認するとタブの部分に「HTML入門」と表示されていますね!

 

注意点

タイトルは検索結果に表示されたりタブに表示されたりと重要な役割を担っているので必ず指定するようにしましょう。

また、あまり長すぎるタイトルも良くありません。どれだけ長くでも28文字までに収めましょう。

HTML入門②さっそく書いてみる

書いてみる

HTMLを覚えるには実際に書いてみることが大切です。紹介しているコードは実際に書いてみてください。

それではHTMLの書き方です。HTMLを保存するフォルダを任意の場所に作っておいてください。

まずはテキストエディタを起動します。新規作成で真っ白なテキストエディタを開いてください。

ここにHTMLのコードを書いていきます。

まずは

 

と書いてみましょう。書き終わったらさきほど作ったフォルダに「index.html」という名前をつけて文字コードUTF-8で保存します。拡張子を.htmlにするのを忘れないでください。

保存したhtmlファイルをお使いのブラウザにドラッグアンドドロップしてみてください。

するとブラウザ上に「こんにちは!」と表示されますね!

各部の説明

<!DOCTYPE HTML>
この部分はHTMLのバージョンを指定する記述です。例の場合ですと、HTML5というバージョンを指定しています。テンプレートなのでしっかり覚えておいてください。

<html> <head> <body>
これは前回紹介したので割愛します。忘れてしまった方はもう一度確認しておいてください。

<meta charset=”utf-8″>
これは文字コードを指定する記述です。例の場合ですとUTF-8を指定しています。ホームページで日本語を使う際に必要なものなのでこれもしっかり覚えておいてください。

最後に

今回紹介したコードが、webページを作る際のHTMLコードの基本テンプレートになります。

このコードにwebページの内容や構成を付け足してホームページを作っていきますのでいつでも書けるようになっておいてください。

HTML5入門①HTMLとは

HTMLとは

HTMLは、Hyper Text Markup Languageの略で、webページを作成するために作られた言語で、文章の構造を指定する言語です。

「ここに文字を配置してその下に画像を配置。画像をクリックすると別のページに飛んで…」という風にページの構造をHTMLで記述していくだけで誰でも簡単にwebページ(ホームページ)が作れてしまいます。

HTMLをブラウザ(InternetExplorerやChrome、Safariなど)が認識し、解読を行うことによって内容を表示します。そのため文法を間違わず正確に記述しないと、表示が崩れたり見づらくなったりします。

とはいってもゲームを開発するようなプログラミング言語とはまったく違い、大して複雑な文法ではないので簡単に覚えられますよ!

 

 

HTMLの構成

HTMLは、「要素」を組み合わせて記述します。

要素はwebページを構成する部品(文字や画像など)です。

 

要素の名前を<と>で囲んだものが「タグ」です。

画像の例ですと、<a></a>がタグです。開始タグ終了タグで囲んだものが要素になります。要素によっては終了タグが必要ないものもありますので注意が必要です。

 

要素名の後ろにスペースを空けて続けて記述しているものが「属性」と呼ばれるものです。

属性は要素の詳細情報を指定する部分です。画像の例の場合、 a要素(リンクを貼る役割を担う要素) に対してリンク先を「http://bytejp.com/」にするよう指定しています。

属性は要素によって様々なものが用意されています。

HTMLの基本文法

HTMLコードは、基本的には次のような構造で記述されます。

<html>タグは、ここから先はHTMLですよ~ということを示す要素です。タグに囲まれている範囲がHTMLの文書として定義されます。

<head>タグは、ページに関する情報を記述する要素です。ページのタイトルの指定や外部ファイルの読み込みなどを行う部分です。

<body>タグは、ページの本文を記述する要素です。タグに囲まれている範囲がページで表示される部分になります。

 

小難しい説明はこのくらいにしておいて、次回からさっそくHTMLを書いてみましょう!

HTMLを書くにはテキストエディタが必要です。なんでも結構ですのでインストールしておいてください。