でんきかいでん.com

正当なCSSです!

自作データを無料配しています。

「プリント基板エディタPasS」用の基板・パーツ画像(BMP形式)

自作3Dデータ、自作BGMなど。

Twitter Blog 質問箱 TOP PasS Profile 便利技
top > useful > htmlbase

作成日:

HTMLの基本型

下記をコピペして、ピンク文字部分を埋めると基本型となる。

2018年1月の現時点では、HTML5が主流で最新。

宣言文も以前に比べ、ずいぶんとシンプルになった。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="author" content="01.このサイトの著作権者の名前">
  <meta name="description" content="02.このサイトの説明。検索結果一覧に表示される。">
  <link rel="stylesheet" type="text/css" href="03.CSSのURL">
  <link rel="icon" type="image/vnd.microsoft.icon" href="04.ファビコンのURL">
  <title>05.サイトのタイトル。ブラウザのタブなどに表示される。</title>
</head>
<body>

</body>
</html>

簡易説明

  1. "このサイトの著作権者の名前"(author)大抵の場合、今そのサイトを作っている本人のニックネームだろうけれども、もし誰かに頼まれてそのサイトを作っている場合はそのサイトの持ち主や会社の名前を入れることになる。
  2. "このサイトの説明"(description)Googleなどの検索結果一覧に表示される。簡潔にわかりやすくウソのない説明を書いておくといい。
  3. "CSSのURL"(stylesheet)HTML内に書き込まず、外部スタイルシートにする場合に必要。
  4. "ファビコンのURL"(icon)ブラウザのタブやブックマーク(お気に入り)に表示されるアイコンのこと。ファビコンを設置しないならこの1行は丸ごと消すべきだろう。
  5. サイトのタイトル(title)検索結果やブラウザのタブに表示される。ブックマーク(お気に入り)にもそのまま表示される。あまり長い文字を入れると迷惑になることもある。

重要かもしれない

  • ピンク色の文字は、数字も全て消して、自分の言葉や名前などで埋めること。
  • ""(クォーテーションマーク)は必要。
  • 不要な行は一行丸ごと消しておくこと。

最小構成

<html>
<body>

</body>
</html>
  1. この4行をテキストエディタで書き、<body>と</body>の間に表示させたい文章を書く。
  2. 「index.html」という名前で保存。
  3. このファイルをダブルクリックするとブラウザで開くので、どう表示されるか確認できる。
  4. サーバーにこのファイルをUPすれば、インターネットを通して世界中から見ることができるようになる。

※「index.html」とは、「index」がファイル名なので、実は半角英数字なら何でもいい。「.html」は拡張子。使える拡張子は他にも「.htm」やその他にもあるが「.html」が一般的。


製作3D 無料3D TOP 無料BGM Sitemaps