| 最近のエントリー |
（過去）5.HTML、CSSの記述方法～
2007年01月25日
・HTML記述方法
HTMLの記述方法は、たくさんのホームページで紹介されていますので、それで学ぶのもいいと思います。
とほほのWWW入門、メモ帳で作る超初心者のHP作成講座 、初心者向けホームページ作成支援siriasu.net、Wakabagariなど。
まず、作成するファイルの情報を書き込むことからはじめます。
そのファイルが、どんな言語で、どんな形式でかかれているか、などの情報が必要になります。
これがかかれていないと、検索サイトで「？？？なファイル」になってしまうんです。
私が紹介するのは、次の種類です。メモ帳、wordpadの一番はじめに書き込みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
次に、言語は英語か、日本かを書き込みます。ここでは、日本語です。
<html lang="ja">
その次に、metaタグで、ホームページの内容を書きます。
エンコードの種類
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
上記の記述の後は、基本のHTML記述を行います。
<html>
<head>
<title>
ホームページの練習（ホームページのタイトル）
</title>
</head>
<body>
初めてのホームページです。（文章）
</body>
</html>
・CSS（スタイルシート）とは？
スタイルシートというのは、フォントの大きさ、フォントの色、リンクの方法などいろいろなことを指定するものです。
参考ホームページです。ぜひ足を運んでみてください！
超初心者のためのホームページ作成講座わかりやすく、丁寧
Webページ作りのお勉強CSSのことずらり
HTMLクイックリファレンス・・・カラーチャートなどもあり
・CSSの外部取り込み方法
CSS（スタイルシート）ですが、これは、HTMLテキストと一緒に書くこともできますし、
外部ファイルといって、HTMLとは別にCSSのファイルをつくり、読み込ませることもできます。
はっきりいいますと、外部ファイルが役立ちます。
私も「プチ節約Labo」には、外部ファイルのスタイルシートを使っています。
外部ファイル用のスタイルシートの保存は、「style.css」など「○○.css」で保存します。
○○.htmのファイルの<HEAD></HEAD>の間に
<link rel="stylesheet" type="text/css" href="style.css" media="all">
と記述するとそのファイルに反映されます。
① html内に記述する方法
|
<html>
<head> <title> ホームページの練習（ホームページのタイトル） </title> <STYLE type="text/css"> h1{ color: #FF0055; } p { color:green; } </STYLE> </head> <body> 初めてのホームページです。（文章） </body> </html> |
② 外部ファイルで取り込む方法
|
<html>
<head> <title> ホームページの練習（ホームページのタイトル） </title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body> 初めてのホームページです。（文章） </body> </html> |
外部ファイルで取り込んだ場合のcssの記述方法 ex）style.cssの記述
|
h1{ color: #FF0055; } p { color:green; } |
①と②で表示されるページは同じです。フォントの色を指定しただけです。
ここでは、簡単に説明しました。しすぎたかな。。。。
次回は、外部ファイルのCSSについて、もう少し書こうと思います。
・テンプレートを使うという手もあり
HTML記述になれたら、テンプレートを使ってホームページを作成するのもいいと思います。
、無料ホームページテンプレートの素材屋 さんや他にもいろいろテンプレートを提供されているサイトさんはあります。
自分で全部タグ打ちする時間もはぶけますし、デザインも整っていて、見た目もキレイです。
