コンピュータ基礎実習

ユーザ用ツール

サイト用ツール

現在位置: コンピュータ基礎実習 » コンピュータ基礎実習 (上級) » 第2回 HTML文章の作成
jyokyu:j02

目次

第2回 HTML文章の作成

戻る

j02_17.jpgここではさっそく、ウェブページ(ホームページ)の元となる「HTMLファイル」を作るための基礎知識を解説します。
そして簡単な自己紹介ページを作成し、moodleに提出してもらいます。

難しそう？ 手順を踏めばＯＫなので、そうでもないと思いますよ。きっと。

今回の内容には、今後の作業の基本となる知識が多く含まれます。もし後で基本操作が分からなくなったら今回の内容を見返してください。

ウェブページを作るには

ウェブページは「HTML (Hyper Text Markup Language/ハイパーテキスト マークアップ ランゲージ)」という規則にのっとって記述します。HTMLはマークアップ言語と呼ばれるものの一種です。

なお「マークアップ」とは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる目印を書き込み、意味付けを行っていくという意味です。

ウェブページとして正しい表示を行うには、この「HTML」形式で書かれたHTMLファイルを作成する必要があります。

ページを作る作業の流れ

まずウェブページを作るための基本的な操作の流れを解説します。

今後の授業では、ページを編集するために、以下のような操作を繰り返し行うことになるでしょう。

とりあえずページを作ってみる

まずはウェブページを用意する必要があります。

正式なウェブページを作るには、どれほどシンプルなものでも、最低限書かなければいけないことがあります。
具体的には以下ような内容を書く必要があります。

index.html
<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>私のページ</title>
</head>
 
<body>
<h1>私のページ</h1>
<p>これは、初めてのウェブページです。</p>
<p>内容を書き換えて自由に使いましょう。</p>
</body>
 
</html>

とても簡単なウェブページの例

ファイルをダウンロードする

実際に作業を行うために、上記ファイルをパソコン上に作成しましょう。

上の内容をすべて選択し、コピー（Ctrl+C）して、テキストエディタに貼り付け（Ctrl+V）すれば、新しいHTMLページが作れます。「ファイル」 → 「名前を付けて保存」などで「デスクトップ」や「ドキュメント」など、好きな場所に保存しましょう。ファイルの名前は index.html としておきます。ファイルの名前は、半角英数文字で書いてください。詳しくは後述します。

あるいは、上の index.html と書かれている部分をクリックすれば、全体をファイルとしてダウンロードもできます。自分で作る手間を省けて便利です。

この資料では、上の図のような部分があれば
クリックしてファイルを保存できます

やはり「名前を付けて保存」を使って「デスクトップ」や「ドキュメント」など、作業用の場所に保存しましょう。ファイルの名前は自動的に index.html となるはずです。

作成後の状態。上の図では
ドキュメント内の「作業用」フォルダに保存しています。

なお index.html というファイル名は特別な名前で、ウェブサーバーを利用する際には、最初に表示されるページとなります。要するにトップページとなるファイルだということです。
詳しくは来週、説明をします。

とりあえず表示してみる

テキストエディタで作るなり、ダウンロードするなりして、HTMLファイルをゲットしたら、保存した index.html をダブルクリックしましょう。

ブラウザ（ウェブページを見るためのアプリ）が自動的に開いて、どんなページになるか分かります。たぶん「これは、初めてのウェブページです。」と書いてある、シンプルなページが開くと思います。

ブラウザで見た結果
とってもシンプルなウェブページです……
地味でごめんなさい

これが実際にウェブページを閲覧している状態に近いです。

書き換える

ページに書かれている文章を書き換えてみましょう。index.html を「VSCode」などのテキストエディタにドラッグ1)して放り込むと、中身を編集できます。
もしも上の作業ですでにHTMLファイルを読み込んだ状態になっているなら、改めてやり直さなくてもそのままでＯＫです。

「これは、初めてのウェブページです。」などと書いてある部分がページの内容なので、好きな文章に書き換えてみましょう。

もし何か失敗したら「元に戻す（Ctrl+Z）」を使えば、直前の操作を取り消せして無かったことにできるので安心です。
最悪どうしようも無くなったら、またダウンロードし直せば良いでしょう。

書き換えたら、「ファイル」→「上書き保存（Ctrl+S）」で忘れずに保存をしてください。

テキストエディタで自由に書き換えてみましょう

編集方法について

HTMLファイルの内容を書き換えるには、エディタにHTMLファイルを読み込んで編集します。

あるいはエディタを起動し、白紙の状態から直接書き始めることも一応できます。
ただし上のような内容を１から全て入力して作るのは大変かと思うので、ダウンロードするなどして手っ取り早く作るのがおすすめです。

ファイルをエディタで開くのは簡単で、多くの場合ファイルをエディタのアイコンにドラッグするか、エディタがすでに開いている場合は、そのウィンドウにファイルを直接ドラッグすると読み込まれ、編集作業に入ることができます。この操作はほとんどのアプリで共通です。

エディタのウインドウに
ファイルをドラッグして開けます

その他「ファイル」メニュー→「開く」などで読み込ませたいファイルを選ぶ方法もあります。好みの方法で読み込めます。

あとは文字を消したり書いたりして、自由に書き換えられるというわけです。

保存する

書き込みが終わったら、「ファイル(F)」メニューで「名前をつけて保存」や「上書き保存」を選択し、編集内容を保存（セーブ）します。

とりあえずセーブしないとデータは消えてしまいます。書き換えたらセーブしましょう。
RPGゲームとかでもセーブってありますよね？ アレです。

どのアプリを使っていても、だいたい共通の操作で保存できます。「ファイル」→「名前をつけて保存」で保存できます。

j02_15.jpg

ショートカットキーを使って素早く保存
保存（セーブ）は頻繁に行いますので、保存するためのショートカットキー Ctrl+Sを覚えてくと効率的です。セーブのSです。（Macの場合は ⌘Command+S）

キーボードの Ctrl キーを押しっぱなしのまま S キーを押すと、その時の状態を瞬時に保存できます。とても素早く保存できるのでおすすめです。 画面上ではほとんど変化が無いので心配ですが大丈夫。最近のパソコンなら0.1秒もあれば保存されます。

ファイルの名前について

保存する時のファイル名の決め方には、一定のルールがあります。

よくあるHTMLファイル

  • 拡張子（.html）
    ファイル名は xyz.html のように、末尾に .html (または .htm) という拡張子を付けてください。
拡張子とは？

拡張子は、ファイル名の最後にドット . に続けて記入する文字で、コンピュータがファイルの種類を識別するために使われます。たとえばWORDのファイル 提出書類.docx なら .docx の部分が拡張子です。

拡張子が見えない場合

Windowsの初期設定では、拡張子が表示されない設定になっています。例えば持ち込みパソコンをそのまま使うと拡張子は画面に表示されないことでしょう。（xyz.html → xyz）
その場合は 拡張子を表示する設定 を行って、拡張子が見えるようにする設定を一度行っておきましょう。
この授業では、拡張子を含めて正確に入力しないといけない事が多いので、ぜひ拡張子が見える設定しておいてください。

  • 半角英数字のみ使う
    ファイル名に日本語の文字などは使えません。必ず半角英数字を使用して下さい。画像など、ウェブページで使用する関連ファイルについても同様です。
    ファイル名およびフォルダ名に使用できる文字は以下のようなものです。
種別 文字
半角記号 ドット .、ハイフン -、アンダースコア _
半角数字 0 ～ 9
半角英字（小文字推奨） a ～ z

良いファイル名と悪いファイル名

要するにファイル名は以下のような感じが良いです。

○ 良いファイル名
ファイル名 解説
index.html 問題なし。
mypage.html
page02.html 数字を使ってもＯＫです。
my-map_01.html ハイフン - や、アンダースコア _ は使用できます。
picture001.jpg ページに掲載する画像ファイルなども同じルールで名前をつけます。
× 良くないファイル名
マイページ.html 全角文字は使用できません。
日記.html
myｐａｇｅ.html 全角文字は使用できません（全角のアルファベットが混じっています）。
help.hrml 拡張子が間違っています（正しくは .html）。
john's page.html 記号やスペースは使用できません。
rock&roll.html
mypage 02.html
index .html index の後ろに半角スペースが混じっています。
（分かりにくいですが、余分なスペースなどの記号は取り除くようにしましょう）

よくあるウェブ用フォルダの中身の例
ファイルやフォルダの名前は半角英数字だけが使われています。

半角に変換する方法

上記のようにウェブ関連の作業では、半角英数字で書かなければならない事が多いです。

しかしもしうっかり日本語ＯＮの状態で入力してしまった場合、全角で入力されてしまいます。
その場合は、キーボードの F10 キーを押すと強制的に半角英数に変換できます。
ぼdy → F10キーを押す → body
ちとぇ → F10キーを押す → title

リロード（再読み込み）

保存が完了したとします。ところがブラウザに表示されているページの内容は、すぐに書き換わるわけではありません。

そんなときは、ブラウザ画面上で一度クリックし、ブラウザがアクティブになっている状態2)で、リロード「」ボタンを押してください。
画面が更新され、書き換えた内容が反映されるはずです。

ブラウザで「リロード」をすると、
ページが書き換わりました。

このように画面を書き換えることを「リロード」や「更新」、「再読み込み」といいます。最新の情報を改めて読み込んで書き直すわけですね。

なおリロードは、キーボードの上の方にある F5 キーを押してもできます。 この授業ではリロードをしょっちゅう使うので、覚えておくと便利でしょう。

まとめ

このようにして、ページの編集作業を行うわけですね！
作業の手順は分かりましたでしょうか？

  1. HTMLファイルをテキストエディタに放り込んで開き、書き換える。
    • HTMLファイルは資料からダウンロードしたり、一度作ったものをコピーして使い回すと良いでしょう。
  2. 書き換えたら、上書き保存（Ctrl+S）する。
    ファイルの名前を変える場合は page.html のように半角英数字で決める。
  3. ブラウザの画面をリロード（ または F5）して、更新する。

作業の流れ

編集作業は、この手順１～３の繰り返しになります。
同じファイルを何度も書き換えるなら、１で何度も開き直す必要が無いので、２～３の繰り返しとなるでしょう。

それでは、HTMLについてもう少し詳しく見ていきましょう。

HTMLの書き方

ウェブページはHTML形式にのっとって記述する必要があります。単に文章をつらつらと書き綴るだけでは正しく表示できません。

まずはHTMLの基本ルールを知りましょう。

上にも掲載した、単純なページのHTMLをもう一度掲載します。
どんな簡単なページでも、少なくとも以下のような記述が必要になるでしょう。 

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>私のページ</title>
</head>
 
<body>
<h1>私のページ</h1>
<p>これは、初めてのウェブページです。</p>
<p>内容を書き換えて自由に使いましょう。</p>
</body>
 
</html>

簡単なHTMLページの例（再掲載）

タグ

まずパッと見て、<body> <title> のように < > で囲まれたものがいっぱいあることに気づくでしょう。
このようなもののことを「タグ（tag）」と呼びます。

「タグ」はアルファベットを < と > で囲ったもので、<xyz> のように書きます。様々な種類があります。
< 記号は日本語キーボードなら Shift+ね のキー、> 記号は Shift+る のキーで入力できます。 

<html> <body> </body> <p> <ul> </li> ……
いろいろなタグ

そして「タグ」は <なんとか> と </なんとか> が２つ一組でセットになっていることが分かります。
この場合、初めのものを「開始タグ」、終わりのものを「終了タグ」と呼びます。終了タグにはスラッシュ / をつけるのがポイントです。 

 <h1>私のページ</h1>
開始タグと終了タグが使われている例

なお例外的に、タグ１つで単体動作するタグもあります。

入力時の注意

  • タグは必ず半角英数字で書きましょう。
    タグに全角文字を使うことはできません。もし全角で入力すると、タグとして認識されずにそのまま画面に表示されてしまうことでしょう。

× 良くないタグの例

タグ 解説
<ｂｏｄｙ> 全角文字は正しく動作しません。半角で書きましょう。
＜body＞ < や > ももちろん半角で書きましょう。
  • 終了タグのつけ忘れに注意しましょう。例えば <title> を入力したら、先に </title> も入力してからその中身を書いたほうが良いかもしれません。

要素

HTMLでは、この 開始タグ と 終了タグ で囲まれた範囲に、なにか特殊な効果がかかるのが基本です。
開始タグと終了タグを含む全体のことを「要素 (element)」と呼びます。

なお 開始タグ と 終了タグ に囲まれた中身のことを「コンテンツ（content）」と呼ぶ場合もあります。

HTMLの編集作業は「開始タグ」と「終了タグ」で囲った「要素」を作って、文章にさまざまな効果を追加していく作業になるでしょう。

具体例

上の例にも書かれていますが、HTMLには<h1>というタグがあり、<h1>と</h1>で囲まれた範囲を「見出し」にする効果があります。

「見出し」は大きく太い文字で描かれ、章の区切りなどに使われます。
この<h1>タグを使用する場合、以下のように書きます。 

<h1>ごあいさつ</h1>
はじめましてこんにちは！ どうぞよろしくお願いします！

エディタで上記のように記入してセーブし、ブラウザで表示させると、以下のようになるでしょう。

実行結果
ごあいさつ
はじめましてこんにちは！ どうぞよろしくお願いします！

「見出し」の効果により、「ごあいさつ」の文字が大きく太く表示されました。

このように「開始タグ」と「終了タグ」で囲んで「要素」を作り、その範囲にいろいろな効果を発生させるのがHTMLの基本です。

要素の入れ子

要素の中に他の要素を入れることもできます。これをネスト（nest）または「入れ子」と言います。

たとえばあなたの猫に「名前はまだない」ことを強調したいなら、「名前はまだない」という文章を <strong> 要素に入れて、強調を表すことができます。 

<p>吾輩は猫である。<strong>名前はまだない。</strong></p>

実行結果

吾輩は猫である。名前はまだない。

要素は正しい順番で並べて入れ子にする必要があります。上の例では、まず始めに <p> 要素が開始され、その次に <strong> 要素が開始されています。その場合は、必ず </strong>、 </p> の順で終了しなければなりません。

以下の例は間違いです。終了タグの順番が正しくないせいで、構造が壊れています。このような場合は期待通りの表示にならないことでしょう。 

<p>吾輩は猫である。<strong>名前はまだない。</p></strong>
良くない例
終了タグの順番が逆になってしまっています

属性

「開始タグ」には「属性（attribute）」がつけられる場合があります。
属性とは、実際の画面には表示させたくない、要素に関する追加情報が含まれます。これでタグの動作をさまざまに調整します。

属性はタグ名の後ろに半角スペースを一つ以上開けて記入します。属性の種類はタグによって異なります。

「属性」に指定する具体的な設定値のことを「値」と言います。「属性」と「値」を１つのセットとして、複数付けられます。
値を記入する場合には、引用符で囲う必要があります。引用符はダブルクォーテーション "、シングルクォーテーション ' のどちらでもかまいません。 

<p class属性="note"値>なんとか かんとか</p>

上の例では p タグに class という属性がついており、その値が note です。

一部の属性は値を必要としないものもあります。たとえば checked には値がありません。

複数の属性

属性が複数つく場合は、<要素名 属性="値" 属性="値" ... > のように書きます。要素名と属性の間には、半角スペースを１つ以上入れてください。となりの属性との間も同様に、半角スペースを１つ以上入れてください3)。

全角スペースは誤動作の元となるので、使用しないでください。

以下は、属性が複数ついている例です。 

<a href属性="http:///www.google.co.jp"値 target属性="_blank"値>これはリンクです</a>

<a> というタグに href 属性と、target 属性がついている状態です。

このように必要に応じて、属性と値が複数付く場合があります。

空要素

コンテンツを持たない要素もあります。つまり開始タグと終了タグが無く、タグ単体で動作するものです。<xxx> １つで即効果を発揮するわけですね。

そのような要素を「空要素（void element）」と呼びます。

例えば画像を表示する <img> 要素を例に見ていきましょう。 

<img src="mypicture.jpg" alt="私の画像" />

この img 要素は 2 つの属性 src と alt を持っていますが、終了タグ </img> がありませんし、内部にコンテンツもありません。

これは画像要素は、その機能を果たすために何らかのコンテンツを囲む必要がないからです。画像要素の目的は、画像をHTMLページの表示させたいところに埋め込むだけだからです。（どの画像を埋め込むかは、src 属性で指定しています）

なお > の直前にあるスラッシュ / は省略できるので、以下のように書くこともできます4)。この資料ではこちらの形式を主に採用しています。 

<img src="mypicture.jpg" alt="私の画像">

以上がHTMLの基本であるタグの書き方でした。

HTMLの全体構造

簡単なHTMLページの例をもう一度掲載します。

上で説明したタグの書き方などを踏まえて、もう一度HTMLの内容をよく見てみましょう。 

<!DOCTYPE html>
<html lang="ja">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>私のページ</title>
</head>
 
<body>
  <h1>私のページ</h1>
  <p>これは、初めてのウェブページです。</p>
  <p>内容を書き換えて自由に使いましょう。</p>
</body>
 
</html>

簡単なHTMLページ（再掲載）

最初からすでにいろんなタグが使われていますが、そもそもこれはどういう意味で並べられているのでしょうか？

上の例は最も基本となるHTMLページで、新しい「HTML5」と呼ばれる規格に準規したものです。
この規格に従っていないと、ページは正しく表示できない可能性があります。
なので最低限、上記の内容を記入しましょう。

開始タグと終了タグに注目すると、全体は大きく <html>～</html> で囲われた html要素 になっており、その中にさらに別の要素が入った「入れ子」になっていると分かります。それぞれの要素は次のような位置関係にあります。

HTMLの「入れ子」構造

より単純に表現すると、html要素 <html>～</html> の中に、head要素 <head>～</head> と、body要素 <body>～</body> が入った「入れ子」になっています。

より単純にしたHTMLの入れ子構造

この中で主に編集で使うのは、head の中に入っている <title>～</title> と、<body>～</body> です。

title要素

<title>要素は、<head>～</head> の範囲内に書かれています。
<title>～</title> の範囲内に、ページのタイトル名を記入しましょう。 

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>私のページ</title>
</head>

<body>
  <h1>私のページ</h1>
  <p>これは、初めてのウェブページです。</p>
  <p>内容を書き換えて自由に使いましょう。</p>
</body>

</html>
<title>～</title> の範囲内にページのタイトルを記入しましょう

<title>私の趣味のページ</title> のように、好きなタイトルを設定できます。

ページのタイトルは、ブラウザ画面の上部に表示されるほか、ページ閲覧者があなたのページを ダウンロードしたり「お気に入り」 に保存したりした時の名前になります。

ブラウザの上部にページタイトルが表示されている例

お気に入り（ブックマーク）登録時の名前に
ページタイトルが表示されている例

またページを正式にインターネットに公開した際は、Googleなどで検索を行った場合にも、ページタイトルは名前として採用されます。

検索結果にページタイトルが表示されている例

このようにページタイトルは、閲覧者があなたのページを見分けるために重要なものです。
ページの内容が分かりやすいタイトルを記入するようにしましょう。

body要素

<body>～</body> は、ページの本文です。
ページに表示したい文章や画像などは、<body>～</body> で囲われた範囲内に、全て記入しましょう。
作例では「初めてのページ～」などと書かれている部分です。 

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>私のページ</title>
</head>

<body>

  <h1>私のページ</h1>
  <p>これは、初めてのウェブページです。</p>
  <p>内容を書き換えて自由に使いましょう。</p>
</body>

</html>
ページの内容は全て <body>～</body> の範囲内に書きましょう！
（上の図では青枠の範囲内）

つまりページの編集作業のほとんどは、この <body>～</body> の範囲内で行われるということです。

なお他にもいろいろタグが使われていますが、それらについてもっと詳しく知りたい方は下記を参考にしてください。

要素名 タグ 内容
DOCTYPEタグ <!DOCTYPE … > HTML文章のバージョンなどを示します。このタグは単体で使います。
先頭に書く決まりになっています。
html要素 <html>～</html> HTML全体を囲います。
日本語のページの場合は <html lang="ja"> として、日本語で書かれていることを示します。
head要素 <head>～</head> ページに関する各種情報をこのhead要素内に記入します。
この内容は画面には直接表示されません。
meta要素 <meta ～> ページに関する情報の詳細を記入します。
例えば metaタグ <meta charset="UTF-8"> は、日本語の文字化けを防ぐためのおまじないです。
<meta name="viewport" content="width=device-width"> は、このページをスマホなどモバイル端末で見たときに、ページの横幅が画面からはみ出さないようにするためのおまじないです。
title要素 <title>～</title> ページのタイトルを記入します。head要素の中に書きます。
body要素 <body>～</body> ページに実際に表示する内容は、全てこのbody要素の中に書きます。

まとめ

それぞれのタグの位置関係は、下のようになっている必要があります。
こうなっていないと、ページが正しく表示できません。

最低限、以下の２つを設定しましょう。

  1. <title>～</title> の範囲内にページの内容がよく分かるタイトルを記入しましょう。
  2. ページに表示させたい内容は全て <body>～</body> の範囲内に記入しましょう。

新しいHTMLファイルの作り方

新たなウェブページを作りたい場合は、上記のようなHTMLの基本セットが書き込まれたファイルを用意する必要があります。

このHTML基本セットは、基礎実習（上級）ページの「補足資料」コーナーにある「新規HTMLページ」の記事にも掲載されています。新しいHTMLページを作る際に活用すると良いでしょう。

あるいは上記のような基本となるHTMLファイルをあらかじめ保存しておき、新しいページを作る時は元ファイルをコピー（Ctrl+C）、貼り付け（Ctrl+V）で複製して使い回すなど、手間を減らす工夫をするのも良いでしょう。

要するに、新しいHTMLページを作りたい場合は、上の例をベースに作れば良い、ということです。
コピーして使い回すのが手軽ですね。

全部覚えなくてもＯＫ

複雑な記述がいっぱいですが、上記のHTML基本セットをすべて記憶する必要はありません5)。

細かいHTMLの記述については記憶しなくても、本やネットで調べたり、別のファイルをコピーして使いまわしたりして、新しいページを作れるようであればＯＫです。

さまざまなHTMLタグ

もっと具体的な例を用意しました。ここでは実際にHTMLを書き込んでページにいろいろな編集を施してみましょう。

以下のようなサンプルページ recipe.html を用意しました。さっきのページとは別のページです。同様にコピーするかダウンロードしてパソコン上に保存して使ってください。

recipe.html
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ゴブリン・シチューのクイックレシピ</title>
</head>
 
<body>
ゴブリン・シチューのクイックレシピ
 
このレシピで手早くおいしいゴブリン肉を使ったシチューを作ることができます。このレシピは、私が長年の冒険を通じて編み出したレシピをアレンジしたものです。
 
ゴブリン・シチューは冒険者の間でよく振る舞われる、とろみのあるおいしいシチューです。サラダやピタパンと一緒に食べるととてもおいしいです。
 
材料
 
ゴブリン肉 300g（骨を取り除いたもの）
スライムの粘液 大さじ2
マンドラゴラのスライス 5枚
野菜ブイヨン 500ml
玉ねぎ 1個（みじん切り）
にんにく 2片（みじん切り）
にんじん 2本（スライス）
セロリ 1本（スライス）
塩 小さじ1
黒こしょう 少々
ローリエの葉 1枚
オリーブオイル 大さじ1
 
作り方
 
オリーブオイルを鍋に熱し、玉ねぎとにんにくを炒める。
ゴブリン肉を加え、中火で表面が焼けるまで炒める。
にんじん、セロリ、マンドラゴラのスライスを加えて炒め合わせる。
スライムの粘液と野菜ブイヨンを加え、塩、黒こしょうで味を調える。
蓋をして弱火で30分煮込む。
器に盛り付けてローリエの葉で彩りを加えたら完成。
 
風味を変えたい場合は、レモンとコリアンダー、唐辛子、ライムとチポトレ、ミント、ほうれん草とチェダーチーズなどを少量混ぜてみるのも良いでしょう。自分に合うものを試してみてください。
 
マンドラゴラは、味のアクセントになるので、なければ省いても大丈夫です。
 
保存方法
 
出来上がったゴブリン・シチューは、作ってから３日間ほどは使えるはずです。泡が出始めたら、必ず捨てること。保存する場合は密閉できる容器に入れて冷凍魔法で保存しましょう。
 
ゴブリン・シチューは冷凍保存に適していますが、2～3ヶ月以内に解凍して使うようにしましょう。
 
</body>
 
</html>

HTMLでは基本的に、<body>～</body> の範囲内に文字を記入していけば、そのまま画面に表示されるということでした。
なので、試しに保存した上記の recipe.html を、そのままダブルクリックしてブラウザに表示してみましょう！

上のHTMLをそのままダブルクリックで実行した結果
全部つながってしまいます。
大変読みにくい！

たしかに入力されている文字は表示されますが、全部１行につながっていて、何がなんだか良くわかりませんね……。😫

これは「見出し」や「段落」といった「構造」が全く作られていないためです。前回の資料で説明したような構造化されたテキストになっていないためですね。

というわけで、見出しや段落を、HTMLを使って作っていきましょう。

以下で紹介される例を参考にエディタを使って実際にページを編集し、動作する様子を確認してみましょう。

やっぱり全部覚えなくてＯＫ

下でタグがたくさん紹介されていますが、全てを記憶する必要はありません。必要に応じて資料を見たりネット検索したりして目的のタグを探すことができれば問題ありません。使用頻度の高いタグは作業しているうちに自然に記憶していくことでしょう。

見出し h1 ～ h6 タグ

見出しを表すタグとして <h1>～</h1>、 <h2>～</h2>、 <h3>～</h3> …… <h6>～</h6> という６種類のタグがあります。

このタグで囲った範囲は「見出し」 (Heading・ヘッディング) と認識され、大きく太い文字で表示されます。
主に長文をブロック単位で区切るために使われます。この資料自体もちょうどそんな風になっていますね！

HTML
<h1>第一章</h1>
<p>本レポートの概要を説明します。</p>
<h2>はじめに</h2>
<p>本年度より近郊の水質検査について・・・
実行結果

第一章
本レポートの概要を説明します。
はじめに
本年度より近郊の水質検査について・・・
h1タグやh2タグで見出しを作る例

見出しにしたい文字を <h1>～</h1> や <h2>～</h2> などで囲いましょう。

<h1> が最も大きな大見出しで、以降 <h2>が中見出し、<h3>が小見出し……というふうに、数字が大きいほど小さな文字の見出しになります。
h の後に付く数字は、見出しの大きさを表していることに注意してください。第1章、第2章のような順番を意味しているのではありません。

見出しの大きさに応じてh1～h3を使い分ける例

さっそく上記のゴブリン・シチューのレシピにも、見出しを設定してみましょう。
「ゴブリン・シチューのクイックレシピ」が <h1> の大見出し、「材料」「作り方」「保存方法」がそれぞれ <h2> の中見出し、という感じでしょうか。 

<h1>ゴブリン・シチューのクイックレシピ</h1>
　： 省略
<h2>材料</h2>
　： 省略
<h2>作り方</h2>
　： 省略
<h2>保存方法</h2>
　： 省略

とりあえず見出しを作るだけでもだいぶ見やすくなりました

見出しの作り方（復習）

見出しの作り方については、おおむね以下のようなルールを心がけると良いのではないでしょうか。
（先週の資料に掲載した内容と同じです）

  • できれば、１ページに１つの <h1> を使用するのが望ましいでしょう。これは最上位の見出しで、他の見出しはすべてこれより下の階層に配置します。
  • 見出しは正しく使い分けましょう。第一章のような大きな見出しは <h2>、章の中の小さな見出しは <h3> を使うという具合です。<h3> で小見出しを表した後でさらに同じレベルの小見出しを表すために <h2> 要素を使用するような使い方はしないでください。文章の意味合いがおかしなことになります。
  • 利用できる６つの見出しレベル h1～h6 のうち、必要と思われる場合を除き、１ページにつき使用するのは３つまでにすることを目標としましょう。多すぎる階層レベル（例えば、深い見出し階層）がある文書は読みにくく、編集しにくくなります。そのような場合は、可能であれば複数のページに内容を分散させることをお勧めします。

段落 p タグ

HTMLでは<p>～</p>で囲った要素は段落（Paragraph・パラグラフ）という認識になり、上下に１行分の余白が作られます。

HTML
<p>あめんぼあかいな あいうえお</p>
<p>うきもにこえびも</p>
<p>およいでる</p>
実行結果
あめんぼあかいな あいうえお

うきもにこえびも

およいでる

pタグで段落を作る例

あめんぼあかいな あいうえお

うきもにこえびも
およいでる
pタグにより上下に余白が確保されている様子
黄色い部分が余白です。

ウェブ文章では読みやすさも兼ねて、ひとかたまりの文章を <p>～</p> 要素にまとめて段落にしておくのが良いとされています。

このページの文章も、ときどき空行で区切られていますよね？ この空行で区切られたカタマリが段落で、HTMLを見ると<p>～</p>で囲ってある、そんな感じです。全部ズラズラつながって区切りがないと読みにくいですし！

長文を書くときには、こんなふうに文章を段落で区切って記入するようにしましょう。

さっそく上記のゴブリン・シチューのレシピにも、文章を <p>～</p> で囲って段落を設定してみましょう。例えばこんな感じ。 

<h1>ゴブリン・シチューのクイックレシピ</h1>
 
<p>このレシピで手早くおいしいゴブリン肉を使ったシチューを作ることができます。このレシピは、私が長年の冒険を通じて編み出したレシピをアレンジしたものです。</p>
 
<p>ゴブリン・シチューは冒険者の間でよく振る舞われる、とろみのあるおいしいシチューです。サラダやピタパンと一緒に食べるととてもおいしいです。</p>
　: 以下省略

段落を作ると、文章どうしが空行で区切られます。
読みやすくなりました

同じようなタグをたくさん入力することになるので、コピー（Ctrl+C）・貼り付け（Ctrl+V）をうまく活用すると、入力が楽になるでしょう。

改行 br タグ

段落内などであえて改行を行いたい場合は、<br>（line BReak）タグを使います。
<br> を設置した場所で、１行ぶん改行されます。逆に言うと、 <br> を書かなければ、画面端に到達するまで一切改行されることはありません（最初にゴブリン・シチューのレシピが全部１行につながって見えていた原因です）。

必要に応じて <br> を設置し、改行を行いましょう。

<br>タグは終了タグを必要とせず、単体で動作する空要素です。6)

HTML
改行してみた<br>うまくいったかな
実行結果
改行してみた
うまくいったかな

brタグで改行する例

基本は <p> によって段落を作りますが、単に１行ぶん改行したい場合は <br> を使いましょう。

たくさん入力を行う場合は、やはりコピー（Ctrl+C）・貼り付け（Ctrl+V）をうまく活用すると、入力が楽になるでしょう。

コメント

<!--と-->で囲んだ範囲は「コメント」とみなされ、画面には表示されなくなります。またタグの様々な機能が無効化されます。要するに、無かったことになります。

HTML
<p>昨日の件について、以下のような報告がありました。</p>
<!-- ここの内容は明日書き換えよう！ -->
<p>第三管区において、注目していた動向が見られました。直ちに調査隊を派遣し現地調査を行います。</p>
実行結果

昨日の件について、以下のような報告がありました。

第三管区において、注目していた動向が見られました。直ちに調査隊を派遣し現地調査を行います。
コメントを使用した例
コメント部分は画面上に表示されません。

<!--と-->で囲まれた文字列が、画面に表示されていない様子が分かります。

コメントは、ページ製作者としてのメモや解説を書いておくといった使い方ができます。その他「とりあえず今、画面には表示したくない。けれどまた後で使うかも知れないので削除もしたくない」ようなことを一時的に見せないようにする用途にも使えます。

ページ閲覧者は、ブラウザの「ページのソースを表示させる機能」を使えばコメントの内容を見ることができます。
つまりコメントの内容は完全に秘密にできるわけではありません。

よって「パスワード」や「個人情報」のように公開してはいけない・漏れたら困るものをコメントに記入しないようにしましょう。

中央揃え center タグ

文字を中央揃えにする方法として、<center>～</center> で囲うという方法があります。
下の例では h1 要素の大見出しを center で囲うことで、大見出しの中央揃えを行っています。

HTML
<center><h1>宇宙最強</h1></center>
実行結果

宇宙最強
center タグで h1 大見出しを中央揃えにする例

太字 b タグ

<b>～</b>タグで囲まれた要素は、太字（Bold・ボールド）になります。

HTML
この内容は<b>重要</b>です。
実行結果

この内容は重要です。
b タグで太字にする例

強調したい部分を<b>～</b>で囲うと良いでしょう。ちょうどこんな感じです。

なお実は最近のHTML仕様では <strong>～</strong> を使用して強調する意味付けを行うのが推奨されています。実行結果は <b> と同様です。しかし過去の互換性を考慮して <b>～</b> も利用できます。ここでは簡単さを優先して <b> を紹介しています。strong を入力するのは面倒ですし……。

引用 blockquote タグ

<blockquote>～</blockquote>（ブロック・クオート）タグで囲まれた要素は、引用・転載文であることを示します。比較的長いテキストを段落ごと引用する際に使用されます。（短いテキストの場合は変わりに<q>～</q>タグを使用して引用を行えます）

HTML
<p>サンプルテキストサンプルテキスト</p>
<blockquote>
<p>サンプルテキストサンプルテキストサンプルテキスト</p>
</blockquote>
<p>サンプルテキストサンプルテキスト</p>
実行結果

サンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキスト
blockquote タグの例

画面上では上下左右に余白が作られ、右方向にずれて描画されます。 本来の意味合いとは異なりますが、インデント（字下げ）の代わりに使用されることがあります。

この文章のように、ちょっと字下げをして、他の文章と違う扱いで書きたいときに使えます。引用文や、補足事項、過去の回想シーンなどを書くのに便利かもしれません。これが blockquote タグの効果です。

箇条書き ulタグ + liタグ

項目を列挙する際などに便利な箇条書き（Unordered List 順序のないリスト）です。
<ul>～</ul> で囲った範囲の中に <li>～</li> 要素を作ると箇条書きとなります。なお li は List Item の略です。
買い物リストのような、順序のないリストを作るために使用します。
なお、各項目は <li>～</li> 要素によって自動的に改行されるので、<br> を使って手動で改行する必要はありません。

HTML

<ul>
<li>あんなこと</li>
<li>そんなこと</li>
<li>まとめ</li>
</ul>

実行結果

  • あんなこと
  • そんなこと
  • まとめ
ul タグで箇条書きの例

箇条書きにすることで一つ一つの項目がはっきり区別されて見やすくなる効果が期待できます。

<ul>～</ul>の中に<li>～</li>が入る二重構造なのでやや複雑です。終了タグの書き忘れなどに注意しましょう。

<ul>～</ul>の中に<li>～</li>で囲われていない要素を入れると正しく表示されないので注意してください（かならず<li>～</li>で囲いましょう）。

以下の例は間違いです。<li>～</li> の範囲外に「そんなこと」という文字がかかれており、おかしな結果になる場合があります。 

<ul>
<li>あんなこと</li>
そんなこと
<li>まとめ</li>
</ul>
誤った箇条書き
<li>～</li> の範囲外に文字が書かれています。
正しく表示されない原因になります。

ゴブリン・シチューのレシピに活用するなら、以下のような感じでしょうか。 

<h2>材料</h2>
 
<ul>
<li>ゴブリン肉 300g（骨を取り除いたもの）</li>
<li>スライムの粘液 大さじ2</li>
<li>マンドラゴラのスライス 5枚</li>
<li>野菜ブイヨン 500ml</li>
<li>玉ねぎ 1個（みじん切り）</li>
<li>にんにく 2片（みじん切り）</li>
<li>にんじん 2本（スライス）</li>
<li>セロリ 1本（スライス）</li>
<li>塩 小さじ1</li>
<li>黒こしょう 少々</li>
<li>ローリエの葉 1枚</li>
<li>オリーブオイル 大さじ1</li>
</ul>

材料を列挙する際などに <ul> を使ったリストが向いています

数字付き箇条書き olタグ + liタグ

行頭に数字が振られるタイプの箇条書き（Ordered List 順序のあるリスト）です。
<ol>～</ol> で囲った範囲の中に <li>要素を作ると箇条書きとなります。数字は自動的に連番が振られます。
順序のある番号付きリストを作るために使用します。

HTML

<ol>
<li>序章</li>
<li>本題</li>
<li>まとめ</li>
</ol>

実行結果

  1. 序章
  2. 本題
  3. まとめ
ol タグで箇条書きの例（数字付き）

上の箇条書きとほぼ同じ構造で、<ul> を <ol> に変えるだけです。
注意点なども上と同様です。

ゴブリン・シチューのレシピに活用するなら、以下のような感じでしょうか。 

<h2>作り方</h2>
 
<ol>
<li>オリーブオイルを鍋に熱し、玉ねぎとにんにくを炒める。</li>
<li>ゴブリン肉を加え、中火で表面が焼けるまで炒める。</li>
<li>にんじん、セロリ、マンドラゴラのスライスを加えて炒め合わせる。</li>
<li>スライムの粘液と野菜ブイヨンを加え、塩、黒こしょうで味を調える。</li>
<li>蓋をして弱火で30分煮込む。</li>
<li>器に盛り付けてローリエの葉で彩りを加えたら完成。</li>
</ol>

手順を説明するときなどは <ol> を使ったリストが向いています

リンク a タグ

リンクは、クリックすると別のページに繋がるものです。 ウェブページ上によく こんな感じで表示されているヤツ のことです。

リンクは <a>～</a>を使って表現します。
a の語源は、錨（Anchor・アンカー・いかり・⚓）が元になっています。さしづめ他のページに錨を打ち込んでつなげるイメージでしょうか。

基本的な書き方は次のようなものです。 

<a href="リンク先" >画面に表示する内容</a>
リンクするための基本構造

href の由来は「hypertext reference（ハイパーテキスト リファレンス）」から来ているそうです。「HTMLを参照する」的な意味合いでしょうか。

少しわかりにくいので、具体例を示します。

HTML
<a href="http://www.google.co.jp/">Googleにつながるよ</a><br>
実行結果

Googleにつながるよ
Googleへのリンク例

上の青い文字をクリックすると、実際にGoogleのサイトに繋がります。これがリンクです。
ネットを見ているとよく見かけるヤツですね！

  • このように href の後の「リンク先」に http://www.google.co.jp/ のような別のページのURL（ホームページアドレス）を書くことで、クリックした時にそのページにつながります。
  • また、<a> と </a> の間に書いたものが、画面上に表示されます。上の例では「Googleにつながるよ」という文字です。
  • もし <a> と </a> の間に何も書かないと、リンクが画面に表示されないので、無効なリンクとなってしまいます。
    例えば下のようなリンクは間違いです。画面上で全く見えず機能しません。必ず <a> と </a> の間に、リンク先を示す文字などを書くようにしましょう。
    <a href="http://www.google.co.jp/"></a>
    無効なリンク
    <a> と </a> の間に何も書かれていません

リンクは別のページを紹介したりするのに便利でしょう。

もう一つのリンクの使い方：２ページ目につなげる

リンクは Google のように他のページに接続するほか、あなたが２つめのページを作った場合に、そのページにつなげるためにも使えます。

たとえば、ゴブリン・シチューのレシピページから、最初に作ったページ index.html につながるリンクを作るには、ページの下の方に以下のように書き足すとよいでしょう。 

<p>ゴブリン・シチューは冷凍保存に適していますが、2～3ヶ月以内に解凍して使うようにしましょう。</p>

<p><a href="index.html">indexに戻る</a></p>

実行例

ゴブリン・シチューは冷凍保存に適していますが、2～3ヶ月以内に解凍して使うようにしましょう。

indexに戻る　　

「indexに戻る」の部分をクリックして、index.html が表示されたら成功です。

このように「リンク先」をファイル名にすると、手持ちの別のHTMLファイルにアクセスすることもできるのです。 

<a href="ファイル名" >画面に表示する内容</a>
別ページにリンクするための基本構造

インターネット上のどこかのサイトにつなげるのも、自分の作った別のページにつなげるのも、リンク先が違うだけで、やり方は同じというわけですね！

ページが増えてきたらページ同士をお互いリンクでつなげることで、１クリックでそれぞれのページにアクセスできるようになって、便利でしょう。

リンクでつなげて、複数のページ間を移動できるようにしましょう

リンクについては、もう少し後の回でさまざまな使い方を詳しく紹介しますので、ここでは基本的な説明にとどめておきます。

その他のタグ

代表的なHTMLタグは上記で紹介しましたが、他にも様々な種類ががあります。

ネット検索するなどして、色々なタグの使い方を試してみましょう。

うまくいかない場合

もしかするとどこかで書き間違いをしてしまうかもしれません。

そのような場合のフォローについてはこちらを参考にしてください。

まとめ

今日の総まとめです。

  • HTMLという書き方でウェブページを作りましょう。
  • ウェブページが成り立つためには最低限、以下のようなHTMLが必要です。
    <!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ページのタイトル</title>
</head>

<body>

    ページの内容
    </body>

</html>
    • <title>～</title> にページタイトルを記入しましょう。
    • <body>～</body> の範囲にページに表示したい文章などを全て書きましょう。
  • テキストエディタで HTMLファイルを編集したらセーブ Ctrl+S し、ブラウザを リロード しましょう。
  • HTMLファイルの名前は、半角英数字のみ使うようにしましょう。たとえば index.html や yotei12.html のように。
  • さまざまな HTMLタグ を使ってページを編集しましょう。

課題

先週作成した自己紹介文を、HTMLを使って作り替えたファイルを作成し、moodleに提出してください。

自己紹介文は、新たなHTMLページ jikosyokai.html に作るものとします。

  • jikosyokai.html は、さっき作った index.html や、ゴブリン・シチューのレシピをコピーして使い回すか、とりあえずページを作ってみるに掲載された基本ファイルを使って新たに作成すると良いでしょう。
    • ファイルのコピー（複製）は、エクスプローラー上でファイルを選択し、Ctrl+C（コピー）→ Ctrl+V（貼り付け）をすれば簡単に作れます。
    • Mac の場合は Finder 上でファイルを選択し Command+D（Duplicate）で簡単にファイルの複製が作れます。
  • ファイル名は半角英数文字のみを使用して jikosyokai.html としてください。
    • 先に述べたように、全角文字を使ったファイル名はＮＧです。たとえば 自己紹介.html などはサーバーが正常にアクセスできない場合があるので避けましょう。
  • 文面は、前回WORDで作成した自己紹介の文章を「コピー」、「貼り付け」して使ってかまいません。
  • 文面を書き込む場所は、jikosyokai.html ファイルの <body>～</body> 範囲内です。お間違いがないように。

先週の自己紹介文章の例
自己紹介の文例

今回は文章に対して以下のような加工を行うと良いでしょう。

  1. ページタイトルを記入する
    <title>～</title> の範囲にページタイトルを記入しましょう。
    <title>自己紹介</title>
  2. 見出しを作る
    大見出しの部分を <h1>～<h1> などで囲みましょう。
    <h1>自己紹介</h1>

    <h2>～<h2> で囲うと少し小さな中見出しになります。 

    <h2>● 趣味または得意なこと ●</h2>
  3. 段落を整える
    段落を <p>～</p> で囲んで整えましょう。段落の上下には自動的に空行が入ります。その他、改行したいところでは<br>を使いましょう。
    <p>インターネットは普段良く見ていますが、ページを作ったことはありません。</p>
 
<p>今度サークルのページをつくろうかと思っています。<br>
トップページとリンク集と、簡単な掲示板があれば良いかなと思っています。どこまでできるかわかりませんが……以下略</p>
  4. その他の装飾
    強調したい文字があれば <b> で太字にするなど、思いついた事があれば自由に改造しましょう。

完成例

jikosyokai.html をブラウザで表示させると以下のようになるでしょう。

完成例

HTML例

以下のようなHTMLをテキストエディタに入力すれば、上のようなページができあがります。
この例を参考に各自で自由にアレンジして作ってみましょう。 

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>自己紹介</title>
</head>

<body>
<!-- 本文ここから -->

コンピュータ基礎実習 上級 ○曜○限<br>
学生番号 １２３４５６<br>
学部     外国語<br>
学年     1<br>
氏名     ○○○○<br>

<h1>自己紹介</h1>

<p>こんにちは、○○です。 コンピュータ基礎実習を受けることになりました！●●にある実家から通っています。<br>
ウェブページは普段見るだけですが、この講義はページを作成する授業と聞いてどんなものか興味があります。</p>

<h2>● 趣味または得意なこと ●</h2>

<p>友人と月に何度かカラオケに行きます。安い店を知っているので行く回数は多めです。気分転換にいいですね。
あと最近はAmazonのKindleで電子書籍を読むのがマイブームです。読み終わった本がかさばらず、値段がちょっとだけ安い事が多いので助かります。最近面白いと思った作品は「●●」です。流行の作品なので読んでみましたが、意外と面白かったです。キャラクターの目的がはっきりしているのが良いと思いました。先生にもお勧めします、未読ならいかがですか？</p>

<h2>● ウェブページ作成について ●</h2>

<p>インターネットは普段良く見ていますが、ページを作ったことはありません。今度サークルのページをつくろうかと思っています。トップページとリンク集と、簡単な掲示板があれば良いかなと思っています。どこまでできるかわかりませんががんばります。</p>

<h2>● 先生に一言 ●</h2>

<p>がんばって受講しますのでお手柔らかにお願いします。</p>

<!-- 本文ここまで -->
</body>
</html>
jikosyokai.html の例

<h1>～</h1> や <h2>～</h2> を使って見出しが、<p>～</p> を使って段落が設定されている様子が分かると思います。
その他、改行したいところでは <br> が使われています。

提出

作成したHTML書類 jikosyokai.html を保存したら、moodle にアクセスし提出してください。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

すでにいくつかのファイルを作っているので、提出するファイルを間違えないようにしてください。
今回提出するのは jikosyokai.html のみでＯＫです。

moodleへの課題提出方法が分からない場合は、こちらを参照してください。
moodleに課題をアップロードする方法

提出期限は次回の授業日いっぱいとします。(詳細は moodle を確認してください)

次回の授業に向けて

  • 今回作成した自己紹介のHTMLページ jikosyokai.html は、次回以降に説明する様々な加工を施しながら何度も提出することになりますので、今回作成したファイルは捨てずに残しておいてください。
    • jikosyokai.html がどこにいったか分からなくならないよう、場所をしっかり把握しておいてください。デスクトップ か ドキュメント か、それとも専用の作業用フォルダか、保存場所をしっかり覚えておきましょう。
  • 次回、ホームページを公開するための「サーバー」を設置する作業を行いますが、その際に「USBメモリ」を利用します（Macを利用されている方は、必須ではありません）。Windowsパソコンで作業をする方は次回までにUSBメモリを準備しておいてください。
    • すでにUSBメモリやSDカードなどを持っている場合、そちらを利用する事もできます（使いまわしてもＯＫ）。もし持っていない場合は、一つ用意しておくのがおすすめです。この課題で消費する容量は数メガバイト程度なので、小容量のものでも十分です。授業で使い終わった後はデータの保管用途などに自由に利用してもらって構いません。

以上で今回の作業は終了です。おつかれさまでした。

おまけ

余裕があればトップページ index.html から jikosyokai.html にアクセスできるように、リンクを設定しておくと良いでしょう。

index.html をエディタで開き、<body>～</body>範囲内の好きな場所に、例えば以下のように書くと jikosyokai.html にアクセスできます。 

<p><a href="jikosyokai.html">自己紹介ページはこちら</a></p>

各ファイルをリンクしておくと、
アクセスがスムーズになります

最初のページ index.html に書かれた「自己紹介ページはこちら」リンクをクリックするだけで、自己紹介ページ jikosyokai.html が参照できるので便利でしょう。

index.html を作るとしたら、以下のような感じでしょうか？
良く使う便利そうなリンクなどをお好みで追加しておくのも良いかもしれません。
細かい部分は各自で自由にアレンジしてもらってＯＫです。 

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>基礎実習の課題ページ</title>
</head>

<body>
<!-- 本文ここから -->

<h1>コンピュータ基礎実習（上級）課題のページ</h1>

<p>ここにはコンピュータ基礎実習で作成した課題を掲載しておきます。</p>

<h2>課題</h2>

<p><a href="jikosyokai.html" target="_blank">自己紹介ページはこちら</a></p>
<p><a href="recipe.html" target="_blank">ゴブリン・シチューのレシピ</a></p>

<h2>リンク集</h2>

<p><a href="https://www.cc.kyoto-su.ac.jp/~shimizu/" target="_blank">基礎実習のページ</a> <a href="https://cclms.kyoto-su.ac.jp/" target="_blank">moodle</a></p>

<p><a href="https://www.kyoto-su.ac.jp/entrance/index-ksu.html" target="_blank">学内TOP</a></p>

<!-- 本文ここまで -->
</body>
</html>
index.html の例
このページが最初に表示されるページとなります。

index.html を好きにデザインして、各ページにアクセスしやすいようにしましょう。
参考にしてください。

戻る

1)
「ドラッグ」とはマウスの左ボタンを押しっぱなしで引きずることです。
2)
ブラウザのウインドウが一番手前に表示されている状態が「アクティブ」です。Windows では、アクティブなアプリだけが操作を受け付けるのが基本です。
3)
日本語入力がＯＮの場合に全角スペースが入力されることが多いですが、その場合は F10 キーで半角に変換すると良いでしょう。
4)
新しいHTMLの仕様では前者が正式な書き方だとされていますが、過去のHTMLの仕様ではスラッシュが省略でき、現在もその仕様は有効です。よってこの資料では話を簡単にするために、後者のスラッシュ省略スタイルを採用することにしました。
5)
HTMLの仕様は少しずつ変化して、書き方も変わってゆくので、その都度完全に記憶するのは大変です。なのでネットの情報などを見ながら書き写せるのであれば問題ありません。ウェブページの仕事をするのにネット環境が無いというのも、なかなか考えにくい状況ですし。
6)
最近のHTML仕様では、終了タグが存在しない単体タグについては <br /> のようにタグの最後を「/>」で閉じるというものになっています。 しかし、従来の書き方である <br> の使用も許されています。ここでは簡単さを重視して、<br> のような従来仕様を採用するものとします。
jyokyu/j02.txt · 最終更新: 2025/04/13 11:41 by 127.0.0.1

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki