· Web...
21
基基基基 基基基基基基 Ⅰ 基 基基 基基 HTMLににににににににににに 2016基7基22基(基) 基基基基
Transcript of · Web...
基礎演習Ⅰ春期レポート
旭 貴朗 先生
HTMLによるホームページ作成
2016 年 7 月 22 日(金)
てーはや
目次
はじめに
1 ホームページについて
1.1web サーバ
1.2 入力ソフト
1.3 制作の流れ
1.4 ブラウザの種類
2 HTML について
2.1 タグと要素
2.2 記述が望まれる事項
2.2.1DOCTYPE 宣言
2.2.2meta 要素
2.3 各種タグ
2.3.1 見出し・段落・改行
2.3.2 画像とリンク
2.3.3 表
3 CSS について
3.1HTML との連携
3.2 背景色とテキスト
3.2.1 フォント
3.2.2 特殊効果
3.4 レイアウト
3.4.1HTML のグループ化と配置
3.4.2 ページ内移動
おわりに
参考文献
はじめに
IT 社会と言われる現在、ほとんどの人が自分のパソコン或いはスマートフォンを持っ
ており、いつでもどこでもインターネットで情報を発信したり受信したりすることが可
能となっている。多くの企業はそれに乗じて、個人のブログなどを簡単に作ることがで
きるサービスを開発し、子供から高齢者までが自分のページを持つことさえできるよう
になったのである。しかし、そのインターネット上のページが一体どのような仕組みで
出来ているかを知っている者はそう多くはいないだろう。かく言う私も数年前からイン
ターネットを使用しているが、その仕組みについて理解はしておらず、疑問を積み重ね
ていただけであった。そこで旭ゼミに所属し、その仕組みを学んだ。このレポートでは
私が学んだホームページの作り方やカスタマイズの仕方についていくつか述べる。
1 ホームページについて
ホームページの意味として、本来は、各々インターネットユーザーがブラウザを起動
した際に最初に出るページのことをいうものであった。しかし現在では、ひとつのサイ
トの中にある多くの web ページのまとまりのことをいうようになった。
ホームページは基本的に HTML と CSS から構成されている。HTML は”Hyper Text
Markup Language”の略で「印を付ける」という意味である。これで web ページの文章
に見出しや段落を付ける。CSS は”Cascading Style Sheets”の略で、一般的にスタイル
シートと呼ばれる。これは文章の見た目を指定するもので、背景や文字の大きさや色、
さらに配置まで編集することができる。
1.1 web サーバ
私たちがブラウザを使って見ているインターネット上のサイトは、すべて web サーバ
というコンピュータの中にある。私たちがコンピュータで、ある web ページを「見た
い」という要求をすると、それを受信した web サーバがその web ページのデータを
送ってくるのだ。つまり今回「見せる」側にいる私は web サーバに自分が作った web
ページを保存することで、他者にインターネット上で私のホームページを見せることが
可能になるのである。
1.2 入力ソフト
Web ページは文字で構成されているため、文字を入力するソフトが必要である。今回
私が使用したのは、Windows にプリインストールされている「メモ帳」というソフトだ。
メモ帳に自分が作りたいようにページの情報を書き込み、保存する。このとき、HTML
と CSS では保存の形式が異なる。HTML ファイルの場合は拡張子を「.html」に、CSS の
場合は「.style」という形式にして保存しなければいけない。また、HTML ファイルの中
でも、ホームページは必ず「index.html」というファイル名にするという決まりがある。
その他の web ページに対応する HTML ファイルは自由なファイル名でよい。例えば私は
自己紹介ページを「introduction.html」というファイル名にしたが、「intro.html」や
「jikosyokaui.html」といったファイル名にしても問題は無い。
1.3 制作の流れ
メモ帳で作った HTML ファイルや CSS ファイル、および画像や文書ファイルなどの
データを web サーバにアップロードすることで、インターネット上でホームページを見
ることが可能になる。しかしこれらのファイルはアップロードせずとも、自分のパソコ
ンの中で内容を確認できる。つまり編集・アップロード・確認・修正・アップロードを
繰り返すのではなく、編集・確認・修正を繰り返した後、アップロードをした方が能率
は良い。
1.4 ブラウザの種類
Windows ならば Internet Explorer がプリインストールされているが、閲覧環境は人
によって違うため、ブラウザの種類も多数ある。私は Firefox を使用しているが、他にも
Google Chrome や Opera などがある。またスマートフォンにも safari や Dolphin など、
ブラウザがいくつもある。そのため、使用機器やブラウザの違いで、ホームページのレ
イアウトが変わってしまうことが多々あるのだ。
2 HTML について
第１節で述べたように、HTML とは印を付けることである。世界中で使われているた
め、HTML の機能において使用されるのは記号とアルファベットだ。１つでも記号やア
ルファベトが抜けていると、効果は発揮されないため、編集の際は注意が必要である。
2.1 タグと要素
HTML はタグと要素で構成されている。まずタグとは<>の中にある文字を入れて、機
能を示すものである。例えば<html>ならば HTML の開始を表し、</html>は HTML の
終了を表す。そしてその２つのタグと、その間に挟まれたものの１つのまとまりを要素
と呼ぶ。
例として、３種類の html を使った web ページは以下のように構成される。
<html>
<head>ここには文書のタイトルや概要などの、ページについての補足情報を記述する。
</head>
<body>ここにはブラウザで表示される情報を記述する。文章や画像はさらに何らかの
タグで囲む。
</body>
</html>
そしてこれをブラウザで表示すると以下の画像のようになる。
タグは表示されずに、その中の文字だけが表示されている。文字の装飾や改行をするに
は、様々なタグを駆使することが必要である。
2.2 記述が望まれる事項
HTML で web ページを作る際に、記述しておくべきことがいくつかある。表示に影響
するものもある。
2.2.1DOCTYPE 宣言
HTML は過去に数回の進化を遂げているため、いくつかのバージョンが存在する。そ
のため、閲覧しているページが、どのバージョンの HTML で構成されたものなのかを示
すために DOCTYPE(Document Type の略)を記述する。
私は HTML5 を使用したため、<!DOCTYPE html>をメモ帳の最も上に記述した。なお
この要素は空要素といい、内容を持たないため、終了タグを記述する必要は無い。もし
HTML4.01 だった場合の DOCTYPE 宣言は<!DOCTYPE HTML PUBLIC “-//W3C//DTD
HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>というもの
になる。
2.2.2meta 要素
meta 要素とはメタデータと呼ばれる情報を追加する要素である。今回私がホームペー
ジ制作で追加したのは、文字コード・作者・ページ概要・キーワードの情報だ。これらは
ページの本文には表示されないが、ページの情報として様々な場所に表示されることが
ある。
まず文字コードとはコンピュータ上で文字を表示するために、ひとつひとつの文字に
固有に割り当てた番号のことで「キャラクターコード」とも呼ばれる。これはコン
ピュータやブラウザによって異なることが多々あり、そういったときに文字化けが発生
してしまうのである。今回私が使用した文字コードは UTF-8 といったものだ。この場合
の meta 要素は次のようになる。
<meta charset=”UTF-8”>
charset とは character set の略であり、それが UTF-8 であることを示している。
次に作者を示す meta 要素は以下のようになる。
<meta name=”author” content=”てーはや”>
最初に作者を表すことを記述した上で、その作者とは誰かを記述するという構成になっ
ている。
次に概要文について。概要文とは、検索サイトの検索結果に様々なサイトが表示される
ときに、そのサイトの名前の下に小さな文字で表示される文のことである。これを参考
にすれば、そのサイトにはどのような事が書いてあるかなど、サイトを開く前に分かる
ため簡潔に要点を書くことが望ましい。私は以下のような meta 要素にした。
<meta name="description" content="東洋大学経営学部旭ゼミナールにて研究した
内容を公開するページ。なおサイドテールとは著者が好きな髪型である">
作者を表す meta 要素と同様に、最初に概要を表すことを記述した上で、自由に概論を記
述するという構成になっている。
最後にキーワードを設定する meta 要素について。調べたい物事を、検索エンジンを
使って調べるときは、関連する単語などを入力して検索する。そこで、予めキーワード
を設定しておくと、それが合致したときに検索結果に自分のページが表示されるように
なるというものである。私は以下のようにキーワードを設定した。
<meta name="keyword" content="てーはや,旭ゼミ,サイドテール,自転車">
このとき、キーワードは複数設定することができる。その場合キーワードとキーワード
の間にはカンマを置く。キーワードを増やしたり具体的にしたりすると、検索結果一覧
の上位に配置されることがあるため、より探しやすくなる。
2.3 各種タグ
タグは数多く種類がある。それを使いこなしてより見易いホームページを作ることが
重要である。ここではタグの中でも頻繁に利用されるものを幾つか説明する。
2.3.1 見出し・段落・改行
web ページに表示されている文字のほとんどは見出しと段落として設定されている。
そうすることで文字の大きさや色、配置などを変えたり、スタイルシートで一括に設定
したりすることが出来るからである。
まず見出しは文章を読みやすくするもので、新聞や雑誌などでも利用される。また大
見出しや小見出しなど大きさを変えることで、重要度を分けたり内容の理解を容易にし
たりすることにも役立つ。HTML の場合、見出しは 6 段階のレベルがある。<h1>から
<h6>まであり、1 が最も大きく、6 が最も小さい文字で表示される。基本的にページの
始まりは h1 を使う。また途中で h3 から h5 など、大きくレベルが下がることは不自然
なため、避けたい。
HTML を記述するときは以下のようになる。
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<h3>細かな説明</h3>
そしてこれをブラウザで開くと以下の画像のように表示される。
ブラウザや使用機器によって文字の大きさは異なるが、見出しのレベルごとに明らかに
文字の大きさは変化しており、見易くなっていることが分かる。
次に段落について説明する。段落は見出しとセットとして使うことが多い。文章を１
つのまとまりごとに分けることで読みやすいページを作ることが出来る。段落を付ける
ときのタグは<p>である。
先ほどの見出しと合わせて HTML で記述するときは以下のようになる。
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<p>サブタイトルに関する文章</p>
<h3>細かな説明</h3>
<p>説明文。ここがメインとなるだろう</p>
同様にブラウザで開くと以下の画像のようになる。
最後に改行について説明する。文章が長くなるときは改行してバランスをとることが
望ましいが、HTML をメモ帳などで記述する際に改行をしても、実際ブラウザで開いた
ときには改行が為されていないのである。そのため、改行するときにもタグを付けなけ
ればならない。改行のタグは<br>で、これは空要素である。先ほどの見出しと段落の例
に改行を加えてみると、以下のように出来る。
<h1>タイトル</h1><br>
<h2>サブタイトル</h2>
<p>サブタイトルに関する文章</p><br>
<h3>細かな説明</h3>
<p>説明文<br>ここがメインとなるだろう</p>
見出しと見出しの間を開けてバランスをとる。また段落の p 要素の中にも改行を加えた。
これをブラウザで開くと以下の画像のようになる。
このようにして、逐一ブラウザで確認しつつ改行を入れて全体のバランスをとることが
重要である。
2.3.2 画像とリンク
ホームページは文字だけでも問題は無いが、私から見ると文字だけのページは味気な
い。何か説明するにしても、画像や動画があったほうが分かりやすいのは明らかである。
例えば遠方で開催されている美術展に、一体どういった作品が展示されているのか調べ
たいときに、作品名やその説明が文字だけで書かれているよりも、参考になる画像が表
示されていたほうが魅力であり、集客にも役立つと考える。
web ページには画像だけではなく、動画や音声などさまざまな形式のファイルを埋め
込むことが可能である。画像はその中でも単純で、非常によく使われるものだ。
画像を web ページに表示させたい場合、予め web サーバに表示させたい画像をアップ
ロードしておく必要がある。HTML でその画像が置いてある場所を指定して、表示させ
るという流れになる。
ここでまず私の web サーバの状態は以下の画像のようになっている。
上の３つはフォルダになっており、この中にそれぞれ画像や Excel、Word のファイルが
入っている。その下には HTML ファイルが数ページ分あり、自己紹介や論文、プログラ
ミングのページがアップロードされている。そして最下にあるのはスタイルシートであ
る。
私の場合、画像を表示させるためには、画像を表示させたいページである index.html
内に、画像がアップロードされている場所 picture、そして画像のタイトル img1.jpg を
記述する必要がある。
HTML で記述すると以下のようになる。
<img src=”picture/img1.jpg”>
まず img は image の略で画像を表す。src は source の略でソース、つまり場所を表す。
画像がある場所は picture フォルダの中であることを/(スラッシュ)を入れて表し、最後
に画像のファイル名を記述する形になっている。
次にリンクについて説明する。インターネットの良い点として、さまざまなページに
一瞬で飛べるため、情報を集めやすいというものがある。そもそもインターネットでさ
まざまなページを見るという行動は、その都度リンクをクリックしていることと同意義
であるため、リンクはインターネットに欠かせないものといえる。またリンク先として
画像や文書ファイルを指定することも可能である。
HTML でリンクを記述する手順は、画像を表示させる手順と似ている。リンクしたい
ページや画像などの場所をタグの中に記述すればよいのである。従って HTML で記述す
ると以下のようになる。
(リンク先が html ページの場合)<a href=”index.html”>ホーム</a>
(リンク先が外部サイトの場合)<a href=”http://www.○○○.com/”>○○○のサイ
ト</a>
これらは a 要素と呼ばれている。ブラウザを開くと a タグで挟まれた部分だけが表示さ
れ、その部分をクリックすることでリンク先へ移動することができる。この a タグの間
を埋め込み画像にすることも出来、その場合は画像をクリックすることでリンク先へ移
動できる。
企業のホームページを見ると、しばしば”お問い合わせ”という欄がある。その文字をク
リックすると勝手にメールソフトが起動し、編集画面になったという経験はないだろう
か。その文字も実はリンクの１つなのである。仕組みとしては以下の HTML を見れば分
かると思う。
<a href=”mailto:○○○@example.com”>お問い合わせ</a>
リンク先として mailto という記述がされているため、自動でメールソフトが起動するの
である。こういったソフトが起動するリンクを設定した場合は、「メールソフトが起動
します」など、注意を書いておくことが望ましい。
2.3.3 表
HTML のタグを使った便利な表現方法として、表が挙げられる。私のホームページで
は、自己紹介ページで表を使っているが、その他にも商品の価格一覧など用途は様々ある。
表は table 要素と呼ばれ、<tr>・<th>・<td>の３つのタグを使用する。
例として私の自己紹介を挙げると、以下の HTML を記述した。
<table>
<tr>
<th>名前</th>
<td>てーはや</td>
</tr>
<tr>
<th>出身地</th>
<td>ミルフィーユ</td>
</tr>
<tr>
<th>趣味</th>
<td>自転車とみもりん</td>
</tr>
</table>
それぞれのタグの役割について、まず<th>では 1 行に並ぶことを指定する。次に<th>
ではその１行の左側(見出し)であることを指定し、<td>でその内容を表す。上記の
HTML をブラウザで表示すると以下の画像のようになる。
3 CSS について
ホームページを作るにあたって HTML と対になるもの、CSS。この CSS を活用するこ
とで、ホームページの見栄えを整えたり、いくつかのページを能率良く管理したりする
ことが出来る。
まず CSS の基本構造について述べたい。メモ帳を使った CSS 記述では主に３つの部分
を組み替えて編集する。その３つとは、セレクタ・プロパティ・値である。記述すると
きは以下のようになる。
body {
color:black;
}
セレクタは body の部分にあたり、HTML のどの要素に対して適用するかを示すもので
ある。見出しに対して使うのであれば h1 と置くことも可能である。
プロパティは color の部分にあたり、どのような種類のスタイルするのかを示す。上
記の例であれば、body 要素の中にあるテキストの色をスタイルするという意味になる。
値は black の部分にあたり、プロパティに対しての具体的なスタイルを示す。
この３つが記述されることで、ホームページの body部分の文字色は黒で表示されるよ
うになるのである。このように様々なスタイルを指定できるのが CSS である。
3.1HTML との連携
CSS ファイルは HTML ファイルと連携させないことには効果を発揮しない。具体的に
は、HTML ファイルの head 要素内にリンク先として CSS ファイルを記述するのである。
要素は以下のようになる。
<link rel=”stylesheet” href=”style.css” media=”all”>
rel=”stylesheet”の部分はスタイルシートにリンクすることを表す。href=”style.css”
の部分はリンクするスタイルシートのファイル名を指定する。今回は style.css という
ファイルだけだが、複数のファイルを指定することも可能である。情報量が多いホーム
ページであれば、いくつもの CSS を用意して、まとめて適用させることがある。
media=”all”の部分では、その CSS ファイルをどのようなメディアで利用するかを指定
する。all はすべてのメディアということになるが、他にもパソコンのスクリーンであれ
ば screen、プロジェクタであれば projection など、いくつかのメディアに対応してい
る。閲覧者はどういったメディアで閲覧しているのかは分からないため、様々なメディ
アに適したスタイルを用意するのが望ましい。
3.2 背景色とテキスト
背景色をスタイルすることで、そのホームページの印象は変わる。色の指定は black
や orange など色の名称を記述することでも可能だが、16進数で表す RGB の方がより細
かく指定できるため、一般的なものとなっている。RGB は赤・緑・青を表し、それぞれ
の色の強さで様々な色を表現する。色を指定するときは#(シャープ)の後に 3 つの 16進
数、つまり赤・緑・青の値を記述する。#FF0000 では赤、#00FF00 では緑、#0000FF
では青となる。またこの RGB は色の三原色と違い、光源であるため、それぞれの色を強
くして重ねると最終的に白になる。極端に言えば#000000 では黒を、#FFFFFF では白
を表すことになる。テキストをスタイルするときも背景色と同様に色を指定できるほか、
ピクセルという単位で大きさを指定することも可能である。私のホームページでは以下
のように設定した。
body{
background-color:#B0E0E6;
font-size:18px;
color:#0000A0;
}
このスタイル指定では以下の画像のようになる。
背景色を青にすることで、目に与える刺激を少しでも抑え、目の疲れを軽減する効果を
狙った。
3.2.1 フォント
フォントに関しては完全に私の趣味であるが、同じフォントの羅列に退屈さを感じた
私は英字のフォントを変更し、最終的には以下のような body のスタイルを記述した。
body{
background-color:#B0E0E6;
font-size:18px;
font-family:'Josefin Slab';
font-style: normal;
font-weight: 300;
src: local('Josefin Slab Light'), local('JosefinSlab-Light'),
url(https://fonts.gstatic.com/s/josefinslab/v6/NbE6ykYuM2IyEwxQxOIi2E4GofcKV
Zz6wtzX_QUIqsI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF,
U+EFFD, U+F000;
color:#0000A0;
}
@font-face {
font-family: 'Josefin Slab';
font-style: normal;
font-weight: 300;
src: local('Josefin Slab Light'), local('JosefinSlab-Light'),
url(https://fonts.gstatic.com/s/josefinslab/v6/NbE6ykYuM2IyEwxQxOIi2E4GofcKV
Zz6wtzX_QUIqsI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF,
U+EFFD, U+F000;
}
英字フォントは Josefin Slab というものを使った。font-family:'Josefin Slab'というよ
うに指定した。しかしこのフォントは web フォントと呼ばれ、各々が使用しているパソ
コンなどにはこのフォント情報が入っておらず、外部のサイトから情報を取得して表示
させる仕組みになっているのである。これは@font-face というセレクタ内で指定する。
よってソースプロパティにおいて、src: local('Josefin Slab Light'), local('JosefinSlab-
Light'),url(https://fonts.gstatic.com/s/josefinslab/v6/
NbE6ykYuM2IyEwxQxOIi2E4GofcKVZz6wtzX_QUIqsI.woff2) format('woff2')という
ように、どこから取得するのかを示している。
こうしてスタイルされたホームページのメニュー欄は以下の画像のようになった。
3.2.2 特殊効果
ホームページで、リンクとなっている文字の上にカーソルを置いたときに文字の背景
色が変わるという仕掛けがある。これには、その文字がリンクであることを分かりやす
くしたり、押し間違いを防いだりする効果がある。私はさらにその背景色がゆっくり変
わるようにスタイルをしてみた。以下が CSS の記述である。
A{text-decoration:none;
color:#404040;
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-
transform 0.3s;
}
A:hover{
background-color:#ffA500;
}
リンクである a 要素に適用するため、セレクタは a である。まず１行目の text-
decoration:none は、リンクの文字に元々付いている下線を消すプロパティである。次
に transition プロパティで反応速度や色が変化する速度を 0.3秒にするという値を記述
した。これが背景色をゆっくり変化させる仕掛けである。２つめのセレクタとして
A:hover があるが、これは a 要素にカーソルを置いたときに発動するということである。
実際にカーソルを上に置いたときは、以下の画像のようになる。
一瞬薄く背景色が出現し、0.3秒経過すると以下の画像のように、完全に背景色が表示さ
れる。
これとは別に、もう一つ私が記述した特殊効果は、画像を傾けるというものである。
ホームページの大見出しとしてタイトルを画像形式で表示させているのだが、その画像
の付近や画像の上にカーソルを置くと傾くように設定した。以下が CSS の記述である。
h1:hover {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
a 要素と同様に、今度は私がタイトル画像を記述してある h1 要素をセレクタとして記述
した。それぞれ角度を変えるプロパティで、値として 10degree傾けることを記述した。
あまり角度を付けすぎるとかえって見づらくなるため、注意が必要である。タイトル画
像が傾くと以下のようになる。
この上の状態が正常で、カーソルを置くと以下のようになる。
ホームページの印象としては、緊張感が解けたような感じがして、私は気に入っている。
このように様々なプロパティを設定し、値を書き換えることで多くの特殊効果を作り
出すことが出来る。これらの効果の他にも、文字や画像を回転させたり、徐々にズーム
されて表示させたりするといった効果を作ることも可能だ。
3.4 レイアウト
企業のホームページなど、情報量が多いホームページの場合、ページを開くとメ
ニューや文章が至る所に配置されていることが多い。それはわざわざページをスクロー
ルせずともすぐに必要なところに辿り着けるようにする配慮である。レイアウトを変え
ることで、閲覧者がより使いやすいホームページにすることが出来るのだ。
3.4.1HTML のグループ化と配置
メニューや文章の配置を自由に変えるためには、まず HTML のグループ化をしなけれ
ばならない。ページ全体を container、タイトルを記述した部分を header、メニューを
記述した部分を menu、本文を記述した部分を content、著作権情報を記述した部分を
footer とそれぞれグループ化する。グループ化には div タグを使い、対象の要素を囲む。
グループ化すると以下のような構成になる。
<div id=”container”>
…
<div id=”header”>
…
</div>
<div id=”menu”>
…
</div>
<div id=”content”>
…
</div>
<div id=”footer”>
…
</div>
</div>
それぞれのグループは id 属性で名前を付けており、これは CSS で配置する際に使用する
ことになる。なおグループ化されただけの状態ではブラウザ上で何も変化はしていない。
次に CSS を使い配置をする。配置は基本的にそれぞれの id 属性を左右に並べることで
行う。左右に並べるには float プロパティを記述する。以下が私が記述したスタイルであ
る。
#container{
width:100%;
}
#header{
width:100%;
}
#menu{
width:30%;
float:left;
}
#content{
width:70%;
float:right;
}
#footer{
width:100%;
clear:both;
}
まず menu を float:left で左側に配置する。次に content を float:right で右側に配置す
る。これによってメニューと本文がタイトルの下に並び、スクロールせずとも画面上で
メニューと本文の双方を同時に閲覧することが可能になる。最後に footer は、中央に配
置したいため、float を解除するために clear:both を記述した。float は後に続く id 属性
にも影響を与えるため、解除が必要なのである。配置が出来上がると、次はそれぞれの
サイズを調整する必要がある。メニューが大きすぎて本文が下にずれて表示されてし
まっては元も子もない。よって height と width のプロパティで高さと幅を調整する。私
は高さに関しては問題がなかったため、幅のみを設定した。これらはピクセルで具体的
に長さを決めることも出来るが、パーセンテージを使って、画面の何％の長さにするか
という決め方も可能である。パソコンから見るのとスマートフォンから見るのでは画面
のサイズが違うため、私はどちらにもある程度対応できるようにパーセンテージを使用
して幅を調整した。そうして配置をしたページは以下の画像の通りである。
3.4.2 ページ内移動
div 要素を設定したことで、ページ内の移動を容易に行うことが出来る。本文が長かっ
たり多くの画像や動画を埋め込んだりすると、スクロールしてページの下部まで移動す
るだろう。その後、ページの上部やメニュー欄に戻りたくなったとき、再びスクロール
し直すのは骨が折れる。そのため、ページの下部に、クリックするだけで TOPへ戻る
ツールを置きたい。このツールの作り方は何通りかあるが、私は p 要素と a 要素を使用
し、以下のように HTML を記述した。
<p align="center" id="header"><a href="#">TOPへ</a></p>
p 要素では align=”center”で、表示させたい「TOPへ」という文字を中央に配置し、
id="header”で、id 属性を header に指定した。a 要素では、「TOPへ」という文字が
ページ内のリンクになるように記述した。こうして「TOPへ」という文字をクリックす
るだけで自動的にトップへ戻れるようになった。
おわりに
今回 HTML と CSS の基礎を理解し、メモ帳という白紙の状態からホームページを作り
上げた。普段何気なく見るホームページの仕組みも理解することが出来た。それと同時
にいかに完成度が高く、見易いホームページを作ることが難しいかということも身にし
みて感じた。またタグの中の英数字が 1 つでも抜けているとページに反映されないため、
常に神経を使わなければならないと思った。しかしまだまだ HTML も CSSS も知識が無
く、思うように編集出来ない事も多々あるため、今後も研鑽を積み、自由自在に自分の
ホームページを作れるような技術を身につけたいと考える。また、秋学期にはゲームを
作る予定があり、このホームページ作成よりも複雑な作業が予想されるため、準備も進
めていきたい。
参考文献
・千貫りこ (2016)『デザインの学校 これからはじめる HTML&CSS の本』 株式会社
技術評論社
・Mana(web) 『テキストリンクを装飾する小技』2016.7.14
(http://www.webcreatorbox.com/tech/css3-text-link/)
