生物情報リテラシー中部大学2025年春期

ウェブページの作成2

前回の講義で作成したHTMLファイルをここからダウンロードしてください。リンクの上で右クリックして、「対象をファイルに保存(または:名前をつけてリンク先を保存)」を実行するとよいでしょう。

日本語が文字化けする場合は以下を先頭に追加してください。


<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
</head>

画像の挿入

自分のコンピュータに画像がある場合

以下の画像をHTMLに埋め込む方法を学ぶ。

サンプル画像 (13_tube.jpg)

手順

画像の上で右クリックして「名前を付けて画像を保存」を実行する。本体のHTMLファイルと同じフォルダに13_tube.jpgという名前で保存する。
HTMLファイルの画像を入れたい場所に以下のタグを入力する。入力後HTMLファイルを保存し、ブラウザーを更新する。
```
<img src="13_tube.jpg">
```
画面いっぱいに表示されるので以下のタグに修正し、画像の大きさを調整する。
```
<img src="13_tube.jpg" width=300>
```

Excelのグラフを挿入する

Excelで作成したグラフは直接画像ファイルに変換することができないので、いったんPowerPointに貼り付けてから画像ファイルとして保存する。

手順

Excelを起動し以下のようなグラフを作成する。
Excelで作成したグラフをクリックし、コピーする(Ctrl + c)。続いてPowerPointを起動し、貼り付ける(Ctrl + v)。
PowerPoint上のグラフを右クリックして、出てくるメニューの「図として保存(S)...」をクリックする。本体のHTMLファイルと同じフォルダに適当な名前(アルファベットと数字だけのほうがよい)を付けて保存する。
HTMLファイルの画像を入れたい場所に以下のタグを入力する。大きさを整えたいときには width=x を追加する(xは図の横幅を示す数値)。
```
<img src="graph.png">
```

ウェブ上に画像がある場合

ウェブにある画像をHTMLの中に表示したい場合、画像を保存することなくいれることができる。 imgタグのsrcプロパティに画像のURLを指定する。

手順

Googleで「オルトフェナントロリン」をキーワードにして検索をする。 Wikipediaのフェナントロリンのページを開く(Ctrlキーを押しながらクリックすると新しいタブに表示される)。
Wikipediaのページの右上にフェナントロリンの構造式があるので、これをクリックする。
順に図をクリックしていき、画像だけが表示されるようにする。このときアドレスには.svgで終わるURLが表示されていることを確認する。
URLをコピーしてHTMLファイルの図を表示させたい場所にコピーする。
```
https://upload.wikimedia.org/wikipedia/commons/b/b7/1%2C10-phenanthroline.svg
```
URLを編集してimgタグのsrcプロパティとする。大きさを整えるときにはwidthプロパティを追加し、幅を調節する。
```
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/1%2C10-phenanthroline.svg">
```

ここまでで作成したHTMLファイルをブラウザーで表示すると以下のようになる。

リンクをはる

HTMLファイルの有用な点は関連するファイルへリンクを貼ることで、様々な情報をつなぐことができることである。リンクはaタグを用いて作成することができる。

<p><a href='http://fooddb.mext.go.jp/'>食品成分データベース</a>によると乾燥ひじき100gには鉄が58.2mg含まれているとされている。</p>

食品成分データベースによると乾燥ひじき100gには鉄が58.2mg含まれているとされている。

テキストの装飾

CSS (Cascading Style Sheet)の書き方

HTMLのタグだけでは自由に表現することはできないので、様々な書式を設定するためにCSSというしくみが使われている。 CSSの記述のしかたには様々なものがあるが、今回はヘッダー部分に書く方法を学ぶ。

<html>の後、<body>の前に以下のコードを追加する。


<html> <--これはすでにある

<head>
<style type='text/css'><!--

/*   以後CSSのコードはここに書く	*/

--></style>
</head>

<body> <-- これもすでにある

文字を大きく、太字にしてみる

CSSのコードとして以下を追加する。

h1 {
	font-size: 12pt;
	font-weight: bold;
}

h1タグの文字の大きさ(font-size)を12ptに、フォントの太さ(font-weight)を太くして描画されている。

color: red; をさらに追加してみる。

表に罫線をいれる

罫線はborderプロパティで指定できます。下の例はtableタグの部分を1pxの硬い(solid)黒線で囲いなさいという意味です。

table {
	border: 1px black solid;
}

表中の数字を右寄せにする。

td {
	text-align: right;
}

上記のコードを追加すると表の見出しの文字も右寄せになってしまう。そこで見出しの部分だけタグをtdからthに変更する。 thタグは表の見出しに使われ、多くの場合文字は中央寄せになり強調表示される。

<tr><th>標準溶液(µg)</th><th>吸光度 (A510)</th></tr>

変更前

標準溶液(µg)	吸光度 (A510)
0	0.005
50	0.079
100	0.146
150	0.223

変更後

標準溶液(µg)	吸光度 (A510)
0	0.005
50	0.079
100	0.146
150	0.223

表の見出しに背景をつける

th {
	background-color: #CCC;
}