HTMLの基礎

ブログは、HTMLの構造を知らなくても個別記事やコンテンツを管理画面から編集するだけで簡単に作れますが、少し知っていると見違えるほど自由にカスタマイズできます。 ここでは、HTMLの基礎についてご紹介します。
クイック インデックス(タグ一覧)
 
タグとは/タグの規則
 
HTMLの基本構造
 

ページ全体の構成

ブログでは、ページ全体の構成部分は自動生成されますが、ページの構成やHTMLの基礎について少し知っていると、テンプレートを編集して もっと自由にブログをカスタマイズすることができます。
フレームのサイズ変更を禁止する
 
フレームを区切る線の色を指定する
 
フレームを区切る線の太さを指定する
 
フレーム分割でスクロールバーの有無を指定する
 
フレーム非対応ブラウザへの配慮
 
ページをフレームで分割する
 
ページに使用する文字コードを指定する
 
HTML4.01のバージョンを指定する
 

文字を修飾する(書体、色、大きさなど...)

ブログでは、特に指定しなければ、別に作成してあるスタイルシートで指定してある文字の色、大きさ、書体で表示されます。 でも、部分的に色や大きさを変えて強調したい、修飾したい、など。ここでは、簡単なHTMLタグやソースで、部分的に表示の設定を変更する方法を紹介します。
文字の大きさを指定する(FONTタグ)
 
文字の修飾方法を指定する
 
文字を点滅させる
 
ルビ(ふりがな)の位置揃えを指定する
 
ルビ(ふりがな)の表示位置を指定する
 
文字にルビ(ふりがな)を付ける
 
文章の一部にスタイルを適用する
 
文字を等幅文字にする
 
文章の書体、サイズ、行の高さ、スタイルをまとめて指定する
 
文章の書体を指定する(スタイル指定)
 
文章の段落を指定する
 
文字をイタリック/斜体にする
 
文字の書体を指定する(専用タグ)
 
文字に下線をつける(アンダーライン)
 
文字を見え消しにする(取消線)
 
文字を強調する
 
文字の太さを指定する
 
文字を太字にする
 
上付き/下付き文字にする
 
文字の色を変える
 
文字を一段大きく/小さくする
 
文字の大きさを指定する(スタイル指定)
 

文章を修飾する(背景色、画像、枠など...)

文字や文章の修飾には 文字自体の修飾以外にも、背景色や背景画像を指定したり、枠線を表示させたりといろいろな方法があります。
フィールド指定して文章を枠で囲む
 
文字や文章、画像の行揃えを指定する
 
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
 
文章や文字、画像を囲む枠の種類を指定する
 
文字や文章、画像を囲む枠の色を指定する
 
文章や文字、画像を枠で囲む
 
マージンとパディングの違い
 
余白を入れる(パディング)
 
余白を入れる(マージン)
 
改行する/改行を禁止する
 
文章の背景色、背景画像、配置方法をまとめて指定する
 
文字や文章、テーブルなどの背景画像の位置を指定する
 
文章の背景に画像を固定表示する
 
文章の背景に指定した画像を繰返し表示する
 
段落文章の横幅を指定する
 
文章の行間隔を指定する
 
文章の背景画像を指定する
 
文章の背景色を指定する
 

リンクを貼る

ブログでも、通常のWEBサイトと同じように 他のページにジャンプするためのリンクを貼ることができます。 リンクには<a>タグを使いますが、このタグは 圧縮ファイルや画像ををダウンロードさせる、同一ページ内でジャンプする、イラストや写真の一部をクリック可能にするなどいろいろの使い方があります。
ダウンロードファイルを提供する
 
同一ページ内へリンクする
 
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
 
リンク文字のスタイルを指定する
 
リンクのための基準URLを指定する
 
クリッカブルマップを作成する
 
リンク文字の背景色を指定する
 
リンクの説明を表示する
 
画像にリンクを貼る
 
テキストリンクを貼る
 

テーブルを作成する

ウェブサイトで表を表示するには、テーブルを使います。ソースは少し面倒かもしれませんが、データを断然見やすく一覧にできます。 テーブル内は、一般のスペースと同様に画像を表示したりリンクを貼ったりすることもできます。 また レイアウトが苦手な HTMLでは、レイアウトの代替手段として用いられる場合もあります。
テーブルの余白などのスタイルを指定する
 
テーブル自動作成フォーム2
 
セル内の文字/画像の縦方向表示位置を指定する
 
セル内の文字/画像の横方向表示位置を指定する
 
セル内の余白を指定する
 
セルとセルの間隔を指定する
 
テーブルの背景画像を表示する
 
テーブルの背景色を指定する
 
テーブル枠の色を指定する
 
テーブルに枠をつける
 
テーブルの左右に文字/画像を回り込ませる
 
テーブルに表題をつける
 
セルのサイズを指定する
 
テーブルのサイズを指定する
 
テーブルに画像やボタンを表示する
 
横にまたがるセルを作る
 
縦にまたがるセルを作る
 
テーブルを作成する
 
テーブル自動作成フォーム
 

箇条書きにする

ホームページやブログなどのウェブサイトで一覧などを表示する際に、簡単なHTMLタグで 見やすく箇条書きにすることができます。 デフォルトでは適当に文字下げされ、上下に余白がとられ、先頭に『●』などの記号や数字が付加されて表示されます。 もちろん余白の量や見出しに付ける数字や記号はお好みで指定できます。
箇条書きの頭の記号に画像を指定する
 
定義語を表示する
 
箇条書き文章の余白を指定する
 
箇条書きの開始番号を指定する
 
箇条書きの番号形式を指定する
 
箇条書きにする(通し番号あり)
 
箇条書きの頭の記号を指定する
 
箇条書きにする(通し番号なし)
 

画像を表示する/動画/サウンド

基本的な画像の表示方法や、プラグインによる動画・サウンドの再生についてご紹介します。テキストだけでなくイラストや写真でブログも楽しくなります。 だたしファイルはサイズが大きくなると当然表示に時間がかかりますので必要に応じてファイルサイズを圧縮してからアップロードしましょう。
バックグラウンドでサウンドを演奏する(BGM)
 
インラインフレームを表示する
 
プラグインで動画やサウンドを再生する
 
文字や文章、テーブルなどの背景画像の位置を指定する
 
文章の背景に画像を固定表示する
 
文章の背景に指定した画像を繰返し表示する
 
テーブルに画像やボタンを表示する
 
文章の背景画像を指定する
 
画像をクリックで拡大させる
 
画像への文字の回り込みを解除する
 
画像と文字の上下間隔を指定する
 
画像と文字の左右間隔を指定する
 
画像の左右に文字を回り込ませる
 
画像の表示位置を指定する
 
画像を表示させる
 
画像にリンクを貼る
 

水平線を表示する

記事が長くなったときは、水平線で段落を区切ると ずっと見やすくなります。線の種類や太さ、幅の指定もできます。
水平線の表示位置を指定する
 
水平線の色を指定する
 
水平線の太さや長さを指定する
 
水平線を表示する
 

段落の表示(表示位置、表示/非表示など...)

ブロックタグやインラインタグで括った文章は、表示方法や表示位置を指定することができます。 普通にウェブサイトやブログを作っていく上では、必要ない指定がほとんどですが、見映えを変化させることができます。
文章の表示方法を指定する(ブロック/インライン/非表示)
 
文章の表示順序(奥行き)を指定する
 
表示位置の指定を使って文字を影付きにする1
 
タグで括られた文字や文章、画像などの表示位置を指定する
 
段落の表示位置を指定する際の指定方法
 

特殊文字、その他

専門用語を表示する
 
住所や連絡先を表示する
 
引用文を表示させる
 
一定時間後に別のページへジャンプする
 
見出しタグ(H1〜H6)のスタイルを指定する
 
見出しを表示する
 
テキストをそのまま表示する
 
特殊文字を表示する
 
HTMLに使用される長さの単位一覧
 
Latin-1 コード表(特殊記号)
 

フォームを作成する

WEBサイトからアンケートや掲示板などメッセージの送信を行う際にはフォームを使用します。 実際にフォームでデータを扱う場合には CGI等の知識が必要になりますが、HTMLの内容を書き換えるだけで質問内容などを変更できるレンタルCGIなどのサービスを利用すれば、初心者の方でも簡単にお好みのフォームに仕上げることができます。
JavaScriptを使ってクッキングタイマーを作る
 
隠し項目を作成する
 
送信ボタンの代わりに画像を表示する
 
ファイル選択ボタンを作成する
 
パスワード入力欄を作成する
 
cgi スクリプトでフォームデータを制御する
 
JavaScriptでフォームデータを制御する
 
フォームを作成する
 
複数行入力可能なテキスト入力欄を作成する
 
ボタンを作成する
 
送信ボタンを作成する
 
リセットボタンを作成する
 
選択メニューを作成する
 
ラジオボタンを作成する
 
チェックボックスを作成する
 
テキスト入力欄を作成する
 

フィルタ(特殊)効果で文字や画像を修飾する

色や大きさ、背景色や枠線といった基本的な文字や画像の修飾のほかに、よりダイナミックにこれらを修飾する方法として、フィルタ(特殊効果)があります。 ホームページやブログを個性的に演出したい方にはもってこい、といいたいところですが、これらの指定は対応していないブラウザもありますので、非対応のブラウザでは著しく見映えを損なう恐れがあります。 くれぐれもこの点には注意してご利用ください。
文字や画像をX線をあてたような白黒で表示する
 
文字や画像を補色に反転する
 
文字や画像を白黒で表示する
 
文字や画像を発光して表示させる(発光効果)
 
文字や画像を反転させて表示する
 
文字や画像に影をつける
 

スタイルシート(CSS)の記述

ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。 デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが 記述内容は余白の指定などがほとんどで難しいものではありません。 修正したり加筆したりして、お好みのブログに仕上げましょう。
テーブルの余白などのスタイルを指定する
 
スタイルシートでボタン風リンク文字を表示する
 
スタイルの共通部分をまとめて記述する
 
タグを入れ子にして同じクラス/ID名を使い分ける
 
見出しタグ(H1〜H6)のスタイルを指定する
 
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
 
リンク文字のスタイルを指定する
 
タグのスタイルを指定する
 
外部からスタイルシートを読み込む
 
ページ内で一回だけスタイルを使用する
 
複数のタグで同一のスタイルを指定する
 
一時的にスタイルシートを利用
 

16進数カラー見本

WEB上で表示するカラーについて、色名称、色番号およびカラーサンプルでご紹介します。文字の色や背景色、枠の色などを指定してページに彩りを与えましょう。 WEBページでの色の指定は、主に『#FF0000』などの16進数指示になりますので、指定する際の参考にしてください。
16進数カラー見本:グレー系
 
16進数カラー見本:ピンク系
 
16進数カラー見本:紺〜紫色系
 
16進数カラー見本:ブルー系
 
16進数カラー見本:グリーン系
 
16進数カラー見本:オレンジ〜黄色系
 
16進数カラー見本:赤〜茶色系
 
WEB基本16色カラー見本
 

簡単JavaScript

ブログでも使える簡単なJavaScriptをご紹介します。JavaScriptを使えば、マウスが重なったときに色や表示内容を変えるなど、ページを動的に変化させることができます。 HTMLは基本的に大文字でも小文字でもかまいませんが、JavaScriptは大文字・小文字を区別しますので ソースは正しく記述しましょう。
お気に入りに追加ボタンを作成する
 
JavaScriptでフォームデータを制御する
 
一つ前のページへ戻る
 

JavaScriptの演算および構文

WHILE文を使って条件が満たされるまで処理を繰り返す
 
FOR文を使って処理を繰り返す1
 
IF文を使って処理を条件分けする
 
JavaScript関数の基本
 
演算子の優先順位
 
ビット演算子を使って計算をする
 
代入演算子を使って計算をする
 
論理演算子を使って計算をする
 
比較演算子を使って計算をする
 
算術演算子を使って計算をする
 

ウィンドウを開く、閉じる、制御する

一定時間後に自動でウィンドウを閉じる
 
ウィンドウをスクロールさせて表示する
 
確認メッセージを表示する
 
警告メッセージを表示する
 
ウィンドウのステータスバーに文字列を表示する
 
JavaScriptを使って別ウィンドウの表示内容を操作する
 
window.open() のスタイル指定一覧
 
ウィンドウのサイズ変更を禁止する
 
ウィンドウの位置や大きさを指定する
 
ポップアップウィンドウを開く
 
メニューバーやスクロールバーの有無を指定する
 
大きさを指定してウィンドウを開く
 
ウィンドウを閉じる
 
ウィンドウを開く
 

クリックやマウスオーバーで表示が変化(イベントパンドラ)

イベントパンドラ:マウスを重ねると説明が表示される
 
イベントパンドラ:マウスを重なると画像が変化する
 
レイヤーを使って折りたたみメニューを表示する
 

タイマーや日付、日時を扱う

JavaScriptを使って最終更新日を表示する
 
JavaScriptで文字を点滅させる
 
JavaScriptを使って現在の時刻を表示する
 
JavaScriptを使って今日の日付を表示する
 
JavaScriptを使ってクッキングタイマーを作る
 
文字をスクロールして表示する
 

ドキュメントおよびクッキー

クッキーを使って訪問回数を表示する
 

簡単Perl/CGI

通常ブログではCGI をそのまま使うことはできませんが、CGI 使用可能なサーバーをお持ちであれば、ブログからリンクでジャンプさせることは可能です。 簡単なCGI をご紹介します。
cgi スクリプトでフォームデータを制御する
 
テーブル自動作成フォーム2
 
ソース内記号変換プログラム
 
テーブル自動作成フォーム
 
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス