Web ページを構成するためのタグや css は多数用意されているので、初心者にとってはなかなか入り難い障壁になっています。
出来るだけ少ない負担でそれなりのページが作成出来るに越したことはありません。ここではよく使い最小限覚えておいた方が良いものを並べてみました。この程度を覚えることでそこそこのページが出来ますので、色々と作って慣れながら覚えたら良いのではないでしょうか。
出来るだけ少ない負担でそれなりのページが作成出来るに越したことはありません。ここではよく使い最小限覚えておいた方が良いものを並べてみました。この程度を覚えることでそこそこのページが出来ますので、色々と作って慣れながら覚えたら良いのではないでしょうか。
◆下記のタグや属性名をクリックすると、杜甫々さんの
「とほほのＷＷＷ入門」 のページなどにリンクします。
| 項 目 | 主 な 機 能 | 関連属性 等 |
|---|---|---|
| <a> | ジャンプ先の目印や、リンク先にジャンプする時等に使用 使用例 | href name target |
| <b> | <b>～</b>で囲まれた文字を太字にする 使用例 | <strong> |
| <body> | 文書の本文を<body>～</body>で囲まれた部分に記述 基礎知識 | <html> |
| <br> | そのタグ位置で改行 使用例 | <pre> |
| <div> | 文章をブロックに区分します。前後に改行が入ります。 | style |
| <head> | ヘッダ部を<head>～</head>で囲み、文書に関して指定 基礎知識 | <html> <meta> |
| <hr> | 横線を引く 使用例 | color size width |
| <html> | HTML 文書であることを<html>～</html>で囲んで指定 基礎知識 | <head> <body> |
| <img> | 属性src="～" で指定した画像ファイル～を表示 使用例 | src alt height width |
| <meta> | ブラウザや検索エンジンにページの情報を渡します 使用例 ( 文字コード ) | name http-equiv content |
| <table> | <tr>、 <th>、 <td> と組合せて テーブルを作成します | align |
| <title> | HTML文書のタイトルをヘッダ部に記述。ブラウザのツールバー、 履歴（お気に入り）メニュー、検索エンジン等で表示。 使用例 | なるべく書くように！ |
| <!-- ～ --> | HTMLソースの中にコメント等を記述するときに使います | これはタグではありません |
| =url | リンク先や画像のURLを指定、<a href="～"> や <img src="～"> | これはタグではありません |
| &xxx; | タグ用記号の記述方法 < → < > → > & → & " → " 空白→ 等 | |
＊このページはほぼ上のタグで書かれています。如何ですか？ これで充分やれそうですね
| C S S | 主 な 機 能 | 関連属性 等 |
|---|---|---|
| @media | 出力の対象メディアを指定します。PC,スマホの表示切替などに利用します。 | |
| background | 要素の背景画像や色などを指定します。 | background-image |
| color | テキストなどの色を指定します。 使用例 | <color> |
| font | 文字のスタイル、変換、太さ、サイズ、表示高さ、ファミリを指定します。 | font-size font-weight |
| flex | 要素の一次元状(折返しを含む)のレイアウトを指定します。 使用例 | flex-flow justify-content |
| grid | 要素の二次元的レイアウトを指定します。 使用例 | grid-template |
| height | 要素の高さを指定します。 | <length> |
| margin | 隣接要素とのマージンを指定します。 | <length> |
| padding | 自要素のボーダーとのパディングを指定します。 | <length> |
| width | 要素の横幅を指定します。 | <length> |
|
下記の文字をクリックすると指定先に ジャンプします。 ◆ 画像を表示する方法 ◆ <table>タグを使う ◆ リンクするには<a>タグを使う |
下図をクリックすると
拡大表示します 
|
|||||||||||||||