備忘録的プログラミングリファレンス

Template(雛形)の作成

 web ページを作成する上で基礎となるタグのテンプレートの作成方法の解説です。

 ホームページを制作する上で基礎となるタグは、 <!DOCTYPE><html><head><body> です。これらのタグの内容は、同じサイト内であればページの内容が違ってもほぼ同じ仕様になります。

 毎度 web ページを最初から作成するよりも雛形を作成しておき使い回した方が効率的です。
 以下のツールは、ページタイトルや keyword 、description を設定すれば合わせて HTML の基礎部分を作成します。課題のための HTML 制作にもお役立てください。

 ただし、入力値がないプロパティ(属性)は作成されません。

雛形のパラメーターと作成

 以下のパラメーターを既定しています。

  • html形式は<!DOCTYPE html>
  • スタイルシートファイルはCSS
  • scriptはJavaScript
  • <base>エレメントは、ここではページごとに作成する前提のために使用しない

使用言語、文字コード

ページタイトル、サイトタイトル

ページ情報

スタイルシート、スクリプト

スタイルシート

スクリプト

 <meta name="viewport" content="width=device-width,initial-scale=1" /> はレスポンシブ web デザインのために付加しています。

 1ページであることを示す <article> エレメントは <main><aside> エレメントのレイアウトのために使用しています。
 display: flex;display: grid; を使用したレイアウト編集の際に使用できるように付加しています。

 <section> エレメントはページ内容をカテゴリー分けするために使用するエレメントです。備忘のために付加しています。

 keyword、description は現在の Google ロボットでは不要となっています。なくてもよいようです。しかしながら description は検索一覧での概略に使用されることがあるために入力設定に残してあります。。