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: フォーム要素の値

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

画像生成
料理
推奨モデル - DALL•E 3
【食欲の秋】秋の味覚っていっぱいあるから、何食べようか迷ったら一旦AIさんに聞いてみよ？
【すこしでも美味しそうなご飯が出たら♥お気に入り♥をお願いいたします。】秋の味覚30種を楽しめるチャンスがここに！そう、30種類ですよ！リンゴから栗、サツマイモ、さらにキノコやカボチャも！秋の大収穫祭です！これは注文せずにいられない。食べきれるか心配？大丈夫！お腹のスペースなんて後から考えましょう。今は、秋を全身で味わうことが優先事項です！友達も巻き込んで、思いっきり楽しんでください。え？秋の味覚を全部堪能したい？じゃあ、迷わず大量注文！秋が過ぎる前に、胃袋を本気で秋仕様にチェンジしましょう！
3
1
13
60
November
GPTs
システム開発
【サイン生成】セリナのオリジナルサイン
オリジナルサインの作成のGPTs ちょっとキャラクターを乗っけています。生成系AIは、今のところ漢字を描くのが苦手なので、ローマ字で登録ください。（ローマ字もたまに間違えますが）
2
1
1.80K
4.27K
WorkerBee
画像生成
キャラクター作成
推奨モデル - Midjourney
高貴な猫の王様メーカー
アイコンになさるとか、お家や心の中にいる猫さんを連想する画像を見つけるなど、どうぞご利用ください。
0
0
4
75
Trgr
GPTs
チャットボット
Sherlock Scientist｜学術的議論
高度な学術的議論に特化したカスタムGPTです。「Sherlock Report 2」から論文作成のための参考資料を削除し、システムプロンプトを議論・会話用に微調整しました。知識（RAG）ファイルの読み込みがないためレスポンスが速くなり、たぶんトークン使用量も削減されていると思います。ChatGPTよりも理知的で学術的な思考をするため、相談や議論の相手として最高の相棒になってくれます。 ChatGPTにはない緻密な推論力と冷静な分析力が特徴です。専門的な議論に向いているため、事業計画の壁打ちや論文解説、研究課題の整理などに最適です。簡単な応答に留まらず、複雑な議論や専門的な課題を深く掘り下げる深い推論と会話が可能です。ChatGPTよりも高度で学術的な意見や意思決定のためのアドバイスが欲しい時にぜひご利用ください。「Sherlock Report 2」は引き続き論文やレポート作成のサポートにお使い頂けます。
3
0
70
254
Sharaku Satoh

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

HTML主要コード一覧表

コメント 0

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