2

Size: px

Start display at page:

Download "2"

あいぞうかいじ
5 years ago
Views:

1 CSS ホームページ HTML の作り方作ったことない人でも大丈夫! 準備から始まる教科書です HTML,CSS の基礎を学べる決定版見本を見ながら基礎学習基礎を学んで目指そう Web クリエイター 1

2 2

3 基礎から学ぶ Web デザイン vol.1 1

4 2 はじめに4 拡張子を表示しよう 4 拡張子とは? 4 表示しないと 4 必要なものを用意しよう 5 何で作るか? 5 用意するもの 5 ブラウザ 5 さぁ始めよう! 6 今回使うのは? 6 HTML 6 CSS 6 その他 6 CSS を読み込む準備 10 CSS 12 試してみよう 12 CSS で保存しよう 12 CSS を書こう 12 他にもいろいろ 12

5 3 HTML 8 完成!ホームページ 8 フォルダーを作ろう 8 真似して書いてみよう 8 HTML で保存しよう 8 HTML にできない! 8 ブラウザで見てみよう 8 HTML のタグの意味 9 代表的なタグ 9 HTML に慣れる為に 10 様々なタグ 10 テンプレートの利用 10 含まれるファイル 10

6 4 はじめに本誌ではホームページに必要なものの紹介や基礎知識について書いていきますまず初めに必要な設定と必要ものの確認をしていきましょう 1 拡張子を表示しよう拡張子とは?パソコンを利用する時には様々なファイルを扱うことになります例えば写真やイラストなどの画像ファイル一つにしてもJPEG やPNG など様々なファイルの形式がありますその形式それぞれに個別の拡張子というものが存在します JPEG ファイルであればファイル名の後に必ず.jpeg もしくは.jpg と付きますホームページを作るうえでこの拡張子が必ず関係してきますその上で拡張子を一目で分かるようにすることが進められますこれはホームページ製作だけにではなくコンピュータを使った物づくりに興味がある人であればそのほかの所でも役立つはずですので是非やってください表示しないと拡張子の表示をしないと出来ないということはありませんがファイル名が Image.jpg になっていて拡張子を含めると Image.jpg.jpg となっていたりとややこしいくなりファイルの指定を間違えてしまうことが有り得ます

7 5 2 必要なものを用意しよう何で作るか?ホームページを作ると一言で言ってもその方法は様々ですどんなページを作りたいのかによって用意すべきものが異なりますユーザーの操作によって様々な変化が起こるような動的なホームページを作るとなると作るときには必要ありませんが実際に動くのかを確かめる為には実際にサーバーに導入して動作を確かめなければなりませんしかし今回この本で紹介するのはそういったユーザーの操作による変化は起きない静的なホームページについてです用意するものさてじゃあその静的なホームページを作るには何が必要なのか恐らく特に新たに準備する必要はないと思いますがテキストエディタブラウザ以上の2つがあれば基本的には大丈夫ですテキストエディタWindows であればメモ帳 Macintosh であればテキストエディットのことで言語入力に使用します基本的には標準でインストールされています HTML のタグ( 後述) を無効にする設定などがあるので注意が必要ですブラウザインターネットを閲覧するときに使うもので Internet Explorer やSafari などがその一例です実際に作ったホームページの確認にしようします

8 6 3 さぁ始めよう!今回使うのは?前項で今回行うのは静的ホームページの作り方について紹介すると書きましたここで今回取り扱うファイル形式について紹介します HTML HTML とは Hyper Text Markup Language の頭文字をとった略称で本誌で扱うホームページ作りにおいてはこれがホームページの本体と言えます HTML はタグと呼ばれる命令を使ってホームページを構成していきますタグは< > の中に命令語を入れることで意味を成します例えば <img> というタグがありますこれはイメージ(Image) の略で画像などのファイルを呼び出す時に使用します CSS CSS は HTML を装飾する為のもので Cascading Style Sheet の略称です HTML でCSS を読み込むことで <img> のようなタグに設定を追加することができますその他その他にもホームページを作る為には多くの場合は画像を使用します本誌でも画像を取り扱いますし自分のホームページの為に画像を作りたいという方はペイントソフトなどの導入もおすすめします (使い方に関しては本誌では取り扱いません)

9 H TML yper Text Markup Language <!DOCTYPE html> <htlm> <head> <!-- ここにホームページの基本情報を記述する - -> <meta charset="utf-8"> <title>html の書き方 </title> </head> <body> ホームページの中身をここに書きます <img src="imagefile.jpg" alt=" 画像を表示 "/> <p> このタグは段落です </p> <a href="filename.html"> この文字のリンク </a> </body> </html> HTML は<>で区切られたタグというもので命令を書いていきます今回扱う HTML は HTML5 というもので <!DOCTYPE html> がそれを示します <head> ~ </head> の中にはホームページの基本情報を書きます <body> ~ </body> がホームページの見た目本体に当たる箇所です

10 8 HTML 完成! ホームページフォルダーを作ろうホームページは様々なファイルを読み込みますその時には読み込むファイルと読み込まれるファイルの位置関係が重要になりますわかりやすくするためにホームページ一つに最低でもフォルダーを一つは作りましょう真似して書いてみよう次のHTML と同じように記述してみましょう HTML で保存しよう右のソースコードを書けたら保存しましょうこのときに保存画面で拡張子(名前の後の.txt など)が変更できるようなら拡張子を.html に変えて保存しましょう HTML にできない!保存のときにHTML で保存できなくても大丈夫ですそういう時は何も変えずに保存してくださいそして保存した後でそのファイルの名前の変更から拡張子を変更してくださいブラウザで見てみようHTML ファイルが出来たらダブルクリックしてブラウザで表示してみましょうこんな風にできましたか?これがホームページです <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 完成! ホームページ </title> </head> <body> ホームページが完成したよ! </body> </html> 1.

11 ここにはホームページの基本情報を記述します例えば <meta charset ="utf-8"> はこの HTML ファイルで使う文字コードの種類 <title> と </title> の間にある完成! ホームページはホームページ名を意味しますこのほかにも次の章で出てくる CSS の読み込みや検索時にヒットさせたいキーワードなどもここに記述します表紙にも記述したように HTML5 であることを意味するこれから HTML5 でホームページを作ると宣言していると考えていいでしょう <html> <head> <meta charset="utf-8"> <title> 完成! ホームページ </title> </head> <body> ホームページが完成したよ! </body> </html> HTML の2 <!DOCTYPE html> タグの意味ホームページの中身といえる部分ですこの HTML では何も使っていませんがこの <body> の中に様々なタグを入れていくことで複雑なホームページを作ることが出来ます ol 代表的なタグ<img src=" フ段階の見出六文字の<font 色を変<h1><h2>...<h6> 化味color="color"> つの段落を意別ページへの先"> <a 像の表href=" リ示に使用ul はは番号つきリスト<li> 記号つきリスト中のリストol やul のンクァ画イル名"> し<ol> <ul> 一<p>~</p> リンク9

12 10 HTML に3 慣れる為に様々なタグHTML には前述したタグのほかにも多くのタグが存在しますそれらのタグを駆使することでより複雑且つ繊細なデザインを行うことができますテンプレートの利用インターネット上には Web ページのテンプレートが数多く無料で提供されています HTML の中身について理解するにはそれらのテンプレートをいじってみることをお勧めします含まれるファイルテンプレートの中には HTML の他に画像ファイルはもちろん JavaScript やCSS など別途ファイルが含まれていることがありますまず始めは焦らずに HTML の中身だけをいじってみましょう CSS を読み込む準備次の章では CSS というHTML のタグの設定を行うファイルを作りますそのファイルをを適用させる為には HTML で読み込む準備をしなければなりません HTML の<head> 内に次のように打ち込みましょうこれでHTML と同じフォルダの中にあるfirst. css というCSS ファイルを読み込む準備ができましたそれでは CSS についてみてみましょう <head> <link rel="stylesheet" type="text/css href="first.css"> </head>

13 C SS ascading Style "utf-8" body{ color:red; background-color:blue; } a{ color:orange; } CSS はセレクタ名 ( タグ名 ){ プロパティ ( 設定内容 )} を示します body{color:red} は <body> の中の文字色を red にするという意味です

14 12 1 試してみようCSS で保存しようHTML の時と同様拡張子を.css にして保存してみましょう中身は何も書いていなくても構いませんがファイル名に注してください前章で first.css というCSS を読み込むという風にHTML に記述したのでファイル名は first で保存してください CSS を書こうまだこの時点では HTML をブラウザでみても何も変化はありませんでは実際にCSS ファイルを開いて変化を加えましょう CSS に次のように書いてくださいこれを書いた上でHTML ファイルを開くと表示される文字が赤くなりますこのように CSS ではタグ名{ 設定内容} という風に書きます今回の例で言えば <body> の中の文字色(color) を赤(red) にするという風に解釈されました他にもいろいろこの他にも CSS にはクラスというものを作りそのクラス名をHTML で設定することで様々なタグにクラスで設定した共通の設定を適用することもできます HTML に慣れてきたら今度はテンプレートのCSS "utf-8" body{ color:red; } CSS

15 著書北海道科学大学メディアデザイン学科 2 年高橋郁也 13

16 14

prg.indb

prg.indb II HTML Web HTML HTML 章 Webコンテンツは主に HTMLで書かれます部体験編 Ⅱ HTMLってなに Web コンテンツを制作するときには HTML と呼ばれる形式でドキュメント文書を記述するのが一般的です HTML は Hyper Text Markup Language の略称でありテキスト文書を記述するための言語の一種です HTMLドキュメントは