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

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

キャラクター作成
VTuberっぽい名前生成
VTuberみたいな名前を生成します。
0
2
411
8.14K
アディラス
GPTs
キャラクター作成
花押クリエイター
花押クリエイターは、日本の伝統的な署名や印「花押」のデザインをサポートするためのツールです。国内外のさまざまな文化背景を考慮し、名前やシンボルを基にした個性的で芸術的な花押デザインを提案します。このツールは、歴史的な作法や文化的背景を尊重しながら、現代的なアプローチにも対応します。作成した花押のコンセプトや意図を分かりやすく説明し、カスタマイズや調整も簡単に行うことが出来ます。初めての方から花押愛好家まで、どなたでもご利用いただける「花押クリエイター」で、あなただけの特別なデザインを作りませんか？　GPTsストアで高評価していただけると嬉しいです。 #画像作成 #花押　#サイン
7
2
2.60K
5.88K
shimasang
語学学習
文章にふりがなを振る
与えられた文章にふりがなを振ります
0
0
1
94
アディラス
GPTs
システム開発
GPTsによる新旧文書比較ツールのご紹介
# **GPTsによる新旧文書比較ツールのご紹介** 日々の業務で発生する文書の改訂確認や変更点の把握。GPTsを活用すれば、手間をかけずに変更箇所を正確に抽出し、条文や規定の新旧対照表を迅速に作成することが可能です。改訂内容の追加や修正箇所も一目でわかるため、ドキュメントレビューにおける工数を大幅に削減します。 ----------- ## **GPTsの活用方法** ①旧版と新版の文書をアップロードし、比較の依頼を行うだけで完了。 ②プロンプトで「新旧対照表作成」と指示すると、変更点が強調された表形式の一覧が作成されます。 ③条文番号、旧文書、新文書、変更内容が一覧化されるため、改訂レビューが効率化します。 ## **プロンプト例** ### 全体の差分を確認する場合「アップロードされた新旧文書を比較し、新旧対照表を作成してください」 ### 特定条項の変更点を確認する場合「第〇条について、旧版と新版の違いを確認し、変更内容を教えてください」 ## **このGPTsのメリット** ### 柔軟な比較とカスタマイズ対応　特定条項の変更検出、必要な形式での対照表作成など、社内ニーズに応じた出力が可能です。 ### 要約・変更内容の説明を自動生成　改訂内容の簡潔な説明や影響範囲の要約も可能で、変更内容の把握と共有が迅速に行えます。 ## **課題やデメリット** ### 一部の表現やレイアウトの変化に対応できない場合がある文書構成が大幅に変更されると、期待通りの差分が取得できない場合があります。この場合、主要な変更箇所のみ抽出される可能性があるため、必要に応じて詳細を再確認してください。 <br> <br> <br> <br> **GPTsを活用し、効率的な文書管理を通じた業務品質の向上にお役立てください。** **※比較する文書の機密性、個人情報の有無、GPTsの秘密保持義務・機械学習の有無等の設定にご留意ください。**
1
0
110
1.30K
user_103204534553749504

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

HTML主要コード一覧表

コメント 0

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