初めてのHTML-(5)-よく使うタグの紹介と使い方(完)

初めてのHTML//

記事の紹介

この記事ではよく使うタグの紹介と使い方に対して扱います。

ソースの実行方法

基本枠コードは前の章で配ったindex.htmlを使ってください。そのhtmlのファイルで「Hello World!」いう文章を消して今日、紹介するコードを入力すると結果が見れます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   Hello World!<-この部分を消してください！
  </body>
</html>

一応実行結果ファイルもアップロードしますが、出来れば自分の手で入力してみてくださいね！

見出し「<h1>~<h6>」

見出し要素は文書中の見出し、小見出しを指定することが出来ます。<h1>から<h6>の６段階の見出しが用意されていて、通常の書籍での主題、章題、副題などを表すために使います。

Example

<h1>見出し 1</h1>
<h2>見出し 2</h2>
<h3>見出し 3</h3>
<h4>見出し 4</h4>
<h5>見出し 5</h5>
<h6>見出し 6</h6>

完成ソース(「右クリック」-「ダウンロード」してください)

段落「<p>」

<p>要素は段落を示しています。通常の文章を書く時にはこの要素を頻繁に使います。

Example

<p>
この文章は
たくさんの改行を
含めていますが、
ブラウザはこれを無視します。 
</p>

<p>
この文章は
たくさんの      空間を
含めて     いますが、
ブラウザは    これを無視します。
</p>

<p>
段落タグはブラウザのサイズに依存しています。あなたがブラウザのサイズを再調整すると段落も合わせて変わります。
</p>

完成ソース(「右クリック」-「ダウンロード」してください)

グループ化「<div>」

<div>要素は、HTMLドキュメントの部門またはセクションを定義します。主に、他のHTML要素のコンテナとしてよく使用され、CSSでスタイルを設定したり、JavaScriptで特定のタスクを実行したりします。

Example

<div style="background-color:lightblue">
　　<h3>こちらは背景の色が空色の見出しです。</h3>
　　<p>こちらは背景の色が空色の段落です</p>
</div>
<div style="color:lightblue;">
　　<h3>こちらは文字の色が空色の見出しです。</h3>
　　<p>ちらは文字の色が空色の段落です</p>
</div>
<div style="font-size:300%;">
　　<h3>こちらは文字のサイズが300%になった見出しです。</h3>
　　<p>こちらは文字のサイズが300%になった段落です。</p>
</div>

完成ソース(「右クリック」-「ダウンロード」してください)

テキストの一部「<span>」

<span>タグは、ドキュメント内のインライン要素をグループ化するために使用されます。それ自体では視覚的な変更を提供しませんが、テキストまたは文書の一部の部分にフックを追加することが出来ます。

Example

<p>母の目は <span style="color:blue">青い</span>です。</p>
<p>そして、父の目は<span style="color:darkolivegreen;font-weight:bold">濃い緑色</span>です.</p>

完成ソース(「右クリック」-「ダウンロード」してください)

リストタグ「<ul>, <li>, <ol>」

<ul>タグは、順序付けられていない（箇条書き）リストを定義します。 <ul>タグと<li>タグを使用して、順序付けられていないリストを作成します。
その<ul>とは違って、<ol>タグは、順序付きリストを定義します。順序付けられたリストは、数値またはアルファベット順にできます。 <li>タグを使用して、リストアイテムを定義します。

Example

<ul>
  <li>こちらulタグは</li>
  <li>順序が付いてない</li>
  <li>リストを作りますが</li>
</ul>
<ol>
  <li>こちらolタグは</li>
  <li>順序が付いてる</li>
  <li>リストを作ります。</li>
</ol>

完成ソース(「右クリック」-「ダウンロード」してください)

画像「<img>」

<img>タグは、HTMLページの画像を定義します。<img>タグはイメージを貼るには「src」と言ってイメージの位置を表す属性さえあれば良いんですが、以下のような理由で画像を見られない人に向けて文字で説明をするalt (alternative) 属性も指定しています。

  1. 目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像の alt 属性の内容を読み上げます。
  2. 何らかの理由で画像の表示に失敗した場合。例えば、 src 属性に指定したパスが間違っていたときなどです。ページを保存したり再読み込みしたりするとこのような本来画像があるべき場所に下記のような何かが表示されるでしょう。

それ以外にも、画像の縦の長さを指定する<height>属性や横の長さを指定する<width>属性もあります。

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   <img src="sample.jpg" alt="My test image" height="420" width="600">
  </body>
</html>

完成ソース(クリックしてダウンロードしてください)

リンク「<a>」

<a>タグは、あるページから別のページへのリンクに使用されるハイパーリンクを定義します。「href」という属性を使用してリンクの宛先を示します。

Example

<a href="https://dripcoke.com/">ホームページに移動</a>

完成ソース(「右クリック」-「ダウンロード」してください)

まとめ

以上のソースで以下のようなページを作りました！
皆さんもブ●リーさんの素晴らしいサイトを見てください！

Example

ようやく！俺様みたいなパワフールなサイトが出来上がったぜ！

ブロリー

一緒にカカロットを倒さないか？

カカロット倒しに行く会！

こいつら倒す！

  • カカロット
  • ベジータ
  • 親父

この順番で倒す！

  1. カカロット
  2. ベジータ
  3. 親父

このホームページのダウンロードはこちらになります！(クリックしてダウンロードしてください)

皆さんも頑張ってありがとうございます！次のコースのCSSが解禁されました！これからも自分のホームページのため頑張って行きましょう！

Web開発-初めてのシリーズ

プログラミングメイン

プログラミング
このサイトを運営しながら勉強したものです。どなたでもいいですので役に立ってたら幸いです。Web開発 プログラミング初心者にもおすすめできるWeb開発の講座です。 初めてのWeb開発の基本初めてのHTML初めてのCSS初めてのJavaScriptJSP入門JSPWebゲーム開発canvasの...