目次

HTMLの構造

文章を「タグ」と呼ばれる特殊な文字列で囲い記述していく。

「タグ」は大文字/小文字の区別がないので、好みで使い分ける。

例えば、以下のような感じ。

<FONT size="10" color="red">内容</FONT>

「内容」という文字が、サイズが10で色が赤色の「内容」という文字が表示される。

「size」や「color」は属性と呼ばれ、大抵のタグに付加することができ、細かく内容を設定できる。

おまじない

<html>
	<head>
		<!-- headには初期設定を書く -->
		<!--
			文字コードはファイルを保存する際の文字コードに合わせる(指定しないとブラウザによって文字化けを起こす)
			例えば、「Shift_JIS」「UTF-8」「EUC-JP」など
		-->
		<meta http-equiv="adalign" content="right" charset="文字コード">
		<title>ブラウザのタブに表示されるタイトル</title>
	</head>
	<body>
		画面の表示内容を書く
	</body>
</html>

コメント

<!-- ココの間に書かれた文字は全てコメントアウト -->

タグ

「html タグ」でググれば、こういうサイトのようにまとめサイトがあるので参考にすればおk。

スタイルシート

属性を指定することで、中身の書式を自由に変えることが出来ます。

しかし、同じ処理をさせたいタグが複数ある場合、すべてに記述するのは面倒なので、スタイルシートに記述することで省略することが出来ます。

コメント

HTML内では「<!-- コメント -->」でコメントアウトできますが、スタイルシート内では少し違います。

/* コメントアウト */

その1 - 直接設定をする

文字などの書式を設定する場合、タグの本来の機能を使う方法と、タグ内にstyle属性を付加し書式設定を行う方法があります。

サイズ10の太文字にしたい場合、以下の2つ方法で実現できる。

タグを用いて設定する場合

タグを駆使すればお望みの書式にできる。

<font size="10"><b>ここで囲まれた文字は太文字になります。</b></font>

style属性を使う場合

ここではタグを「div」を使用しているがべつに他のタブでもおk。

属性の内容は「スタイルシート」でググってこういうサイトを参考にしてペタペタ貼り付ければおk。

<div style="font-size:10;font-weight:bold;">ここで囲まれた文字は太文字になります。</div>

その2 - HEADの中で指定する

直接書き込むのと違って、タグ/クラス名/ID名単位で弄れる。

<html>
	<head>
		<style type="text/css">
		<!--
			/* タグの設定 */
			body{
				margin:0;
				padding:0;
				line-height:1.4;
				color:#333;
				font-family:Arial, sans-serif;
				font-size:0.9em;
				text-align:center;
			}
			/* クラスの設定 */
			.class_name{
				text-decoration:none;
			}
			/* IDの設定 */
			#id_name{
				width:960px;
				margin:10px auto;
				text-align:left;
			}
		-->
		</style>
	</head>
	<body>
		<a class="class_name" href="test.html">クラスの設定</div>
		<div id="id_name">IDの設定</div>
	</body>
</html>

その3 - 外部ファイルとして読み込む

直接ファイルにスタイル情報を書き込むと、ファイル毎に書く必要があるので面倒。

そこで、スタイル情報のファイルを作成することで使い回すことが出来ます。

HEADタグの中の「<link>」タグの部分でスタイルファイルを読み込んでいます。

スタイルシートまでのパスは相対パスか絶対パスで指定します。

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="ファイルの相対パス/絶対パス">
		<!--
			例)
			<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">
		-->
	</head>
	<body>
		Hello, World!
	</body>
</html>

スタイルシート内ではスタイル情報だけを書き込みます。

ファイルは拡張子「css」で保存すること。

例:stylesheet.css

/*
文字コードの設定は必ず一番初めの行に書く事!

例)
	 "utf-8", "shift-jis", "euc-jp"
*/
@charset "文字コード";

body{
	margin:0;
	padding:0;
	line-height:1.4;
	color:#333;
	font-family:Arial, sans-serif;
	font-size:0.9em;
	text-align:center;
}
.pagelink{
	text-decoration:none;
}
#page-wrap{
	width:960px;
	margin:10px auto;
	text-align:left;
}

メモ

画像リンク切れ時の代替え

<img src="画像AのURL" alt="" onError="this.src='画像BのURL'">

ファビコン取得

http://get-favicon-api.appspot.com/api?url=
http://www.google.com/s2/favicons?domain=

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-16 (土) 18:03:29 (435d)