HTML主要コード一覧表

以下にHTMLの基本的なタグと要素を表形式でまとめました。

タグ	説明	使用例
<html>	HTML文書の開始と終了を定義	<html>...</html>
<head>	メタ情報を含むヘッダー部分	<head>...</head>
<title>	ページのタイトル	<title>ページタイトル</title>
<body>	文書の本文部分	<body>...</body>
<h1> ～ <h6>	見出し（レベル1～6）	<h1>大見出し</h1>
<p>	段落	<p>テキスト段落</p>
<a>	ハイパーリンク	<a href="URL">リンクテキスト</a>
<img>	画像の挿入	<img src="画像.jpg" alt="代替テキスト">
<div>	ブロックレベル要素のグループ化	<div>...</div>
<span>	インライン要素のグループ化	<span>...</span>
<ul>	順序なしリスト	<ul><li>項目</li></ul>
<ol>	順序付きリスト	<ol><li>項目</li></ol>
<li>	リスト項目	<li>リスト項目</li>
<table>	テーブル	<table>...</table>
<tr>	テーブル行	<tr>...</tr>
<td>	テーブルセル	<td>セル内容</td>
<form>	フォーム	<form>...</form>
<input>	入力フィールド	<input type="text">
<button>	ボタン	<button>クリック</button>
<br>	改行	<br>

基本的なHTML文書の構造例：

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>ページタイトル</title>
6</head>
7<body>
8    <h1>メインタイトル</h1>
9    <p>これは段落です。</p>
10    <div>
11        <img src="image.jpg" alt="画像">
12        <a href="https://example.com">リンク</a>
13    </div>
14</body>
15</html>

よく使用される属性：

class: CSSのクラス名を指定
id: 要素の一意の識別子
style: インラインCSS
src: 画像やスクリプトのソースURL
href: リンク先URL
alt: 画像の代替テキスト
type: 入力フィールドの種類
name: フォーム要素の名前
value: フォーム要素の値

他のプロンプトもチェック

GPTs
マーケティング一般
売れる心理学による20のマーケティング戦略
あなたのビジネスの簡単な概要を入力するだけで、「売れる心理学」を活用した20の効果的なマーケティング戦略を提案します。さらに、その中から選択したものをより具体的に解説します。消費者が「買わない理由」を、たった一瞬で崩す力がここにあります。あなたのビジネスが、ただの存在から「消費者の心を奪うブランド」へと進化する瞬間を想像してください。このGPTでは、科学と人間の本能を融合させた20の心理学的手法を駆使し、消費者の心を揺さぶり、行動を促します。「どうして売れないのか…？」と悩んだ日々に別れを告げましょう。心理学の力で、あなたの商品やサービスが一目で「欲しい！」と思われる存在に変わります。購買意欲を引き出すテクニックの数々、選ばれる理由を作る秘訣、そして「買わずにはいられない」仕掛け。これは、単なるマーケティングではありません。それは、消費者の心と行動を操るアート。売れる心理学の力で、未来の顧客と心をつなげる旅を今、始めましょう。この20の戦略が、きっとあなたの成功のカギになることでしょう。
8
0
104
211
VEP
GPTs
情報収集
スタイルマスター
今着ている服装を写真で撮り、GPTsに画像を送信するだけで評価をしてくれます。訂正後の画像生成までしてくれます。
0
0
0
22
user_47827982586979328
GPTs
キャラクター作成
Japanese Girls maker【日本人美女メーカー】
質問に答えていくと好みの美女画像が生成されます。
14
0
896
1.74K
n-t0522
画像生成
キャラクター作成
推奨モデル - DALL•E 3
あなたの運命の人はどんな顔？～見えない糸で繋がる未来のパートナーを生成します
あなたの運命の人の顔を描き出し、その未来の一瞬を垣間見ることができます。もしかしたら、あなたの運命を変える第一歩になるかもしれません。未来のパートナーの顔、見てみたくないですか？このプロンプトでは、「相手の性別」と「自分の誕生日」、「好きな数字」を入力するだけで、運命の人の顔が生成されます。恋愛の喜びや期待感を胸に、未来の相手との出会いを感じてみてください。生成された顔写真は、30歳の時点の姿を基にしていますので、今とは少し違うかもしれません。しかし、その顔には、あなたと繋がる見えない糸が宿っているはずです。どう使うかはあなた次第！ - SNSの投稿ネタとして、友達やフォロワーとの会話に新たな風を。 - プロフィールアイコンとして、他にはないユニークな顔写真を設定。 - 恋愛のヒントとして、未来のパートナーを思い描くツールとして活用。 - ロマンチックな会話のきっかけにして、現在のパートナーや友人との話題に。 - 創作活動のインスピレーションとして、物語やイラストのキャラクター設定に。 - 自己成長のためのツールとして、未来の自分へのメッセージや目標設定に。これはただのプロンプトではありません。あなたの未来を映し出す鏡です。このツールが描く顔は、運命の糸であなたと繋がる存在かもしれません。今すぐ、未来の恋に向けた第一歩を踏み出してみませんか？
0
0
27
703
VEP

Makedown形式について解説してくれるAI！！

HTML主要コード一覧表

コメント 0

他のプロンプトもチェック