読者です 読者をやめる 読者になる 読者になる

【STEP1】基本的なページの作成をしてみる

記録

HTMLの基本に挑戦した感想

今日はまずHTML5&CSS3レッスンブックのチャプター1を終わらせた。大学の教養科目の中で、少し勉強した記憶があったことと、最近でははてなブログのデザインに少しこだわっていたこともあり、内容がすんなりと頭に入ってきた。

今後webデザインを勉強するときのために、メモとして必要なものを残しておこう。

今日やったこと

無料ソフトのダウンロード

ホームページに使うソフト(EmEditor (Text Editor) )をダウンロードした。

30日間、無料で使用できるらしい。

期限があった方が、きちんと勉強できると考えて、使うことにした。

ページとスタイルシートを別につくる

まずはサイトのページとなるシートを1枚、適当に名前を付けて、htm形式で保存した。もう一枚「style.css」という名前で保存した。どちらも同じフォルダ(webpageと名前を付けたもの)に入れた。またエンコードを「UTF-8」と指定した。

下準備の仕方

まずは、このページがhtmlで書かれていることを明記しないといけない。 

そのため<!DOCTYPE html>と一番最初に打つ。

そのあとで、使用言語を記す。日本語の場合は<html lang=ja>となる。英語のサイトをつくるときは<html lang=en>とする。

この二つを記したあとで、ページの情報を記入する。

<head>と</head>のなかに、最初は3つの情報をいれた。

一つ目は、エンコードの種類指定だ。

ホームページを作るときは「UTF-8」というエンコードを指定するらしい。これはページを作成し、保存するときにも注意する。このエンコードを使用していることを<meta charset="UTF-8">として記述する。

二つ目はサイトのタイトルである。<title>と</title>の間に、タイトルを書き入れる。このタイトルはページを開いた時のタブとして、見ることができる。必ず書かなくてはいけない。

最後にスタイルシートを明記する。<Link rel="stylesheet" href="style.css">と明記する。

これらを全部行うと、一番最初に

 <!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<Link rel="stylesheet" href="style.css">
</head>

 と記述されることになる。

段落と見出しのつくりかた

ページの中身をつくっていく。</head>のあとに、<body>と</body>を入れて、中身となる文章をその間に入れていく。

段落をつくるときは<p>と</p>の間に文章をはさむ。

見出しをつくる際は<h1>と</h1>の間に、強調したいタイトルをはさむ。

ヘッダーにタイトルを記述

サイトのタイトルとなるものを記述するヘッダーを作成する。

<header>
<h1>サイトのタイトル</h1>
</header>

ヘッダーは<body>と</body>の中に入れる。

フッターにコピーライトを記述

サイトのコピーライトをフッターに記述する。

<footer>
<small>Copyright &copy; サイトのタイトル, all rights
reserved.</small>
</footer>

<small>と</small> で囲むことで一回り小さな文字で記述できる。

スタイルシートを使って、文字を変える

最初に保存した「style.css」を開く。

まずは、フォントの種類を変えてみる。bodyの中の文字を変えるので、冒頭に明記。{ }の中に情報を書き入れる。

フォントの種類は

{font-family:'フォントの種類, '第二候補のフォントの種類'}

という具合らしい。第二候補も対応していない場合に備えて、sans-serifと最後に加えると、似たようなフォントを探して、使用してくれるようだ。

同じようにフォントの大きさ、段落の幅を調整する。

body {font-family:'メイリオ,
'Hiragino Kaku Gothic Pro',
sans-serif}

h1 {font-size: 38px}

p {line-height: 1.5}

としてスタイルシートの基本をメモしておく。 

まとめ

今日やったことは、まず基本のページをつくることであった。

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="UTF-8">
<title>サイト名</title>
<Link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>サイト名</h1>
</header>

<article>
<h1>ページのタイトル</h1>

<p>内容1</p>

<p>内容2</P>
</article>

<footer>
<small>Copyright &copy; サイトのタイトル, all rights
reserved.</small>
</footer>

</body>
</html>

初めてスタイルシートをつくったので、このように対応しているのかと納得いくものがあった。今まではてなブログのカスタマイズをしていて、よくわからなかったことが、知識として入っている気がする。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

次回はチャプター2を終わらせたい。