- プロンプト実行例
こんにちは!
HTMLのコードを生成してください。
テーブル形式で、HTMLの主要なコード一覧を作りたいです。
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文書の構造例:
html1<!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: フォーム要素の値
コメント 0
他のプロンプトもチェック
画像生成
資料作成
推奨モデル - DALL•E 3「見せる資料」から「魅せる資料」へ ~ あなただけのオリジナルクリップアートで「デキる人」に! あなたのスライドが一瞬で"かっこいい"に生まれ変わります。 資料作成で、「もう少し見栄えがよければ…」 そんなモヤモヤした経験、ありませんか? 標準のクリップ素材ではダサくて独自性もありません。 このプロンプトなら、その悩みはもう過去のもの。背景が白だから、切り貼り自由自在。パワポでも、Googleスライドでも、どんなプレゼン資料にも一瞬でフィット。まるで、あなた専属のデザイナーが作ったような仕上がりに。 ★シンプルなのに圧倒的に印象的★ どんなテーマでも、洗練されたデザインに変える魔法のプロンプト。アイデアを輝かせるシンプルさと、心を掴むかっこよさ。これを使えば、あなたの資料は「伝わる」を超えて「惹きつける」スライドに。 たとえば… ・新製品のプレゼンで、「これがイノベーションだ」と言わずとも伝わる視覚効果。 ・営業資料で、数字が語りかけるような説得力を演出。 ・セミナーや学会で、プロフェッショナルさを感じさせる仕上がりに。 <切り抜き方法の例> 1.ツールを使用する方法 生成した写真をダウンロードし、それを「remove.bg」や「clipdrop」などの背景削除ツールにアップして使うことで簡単に切り抜きできます。 https://www.remove.bg/ja https://clipdrop.co/remove-background 2.iPhoneを使用する方法 iPhoneの写真アプリに保存していれば、写真を開いて人物部分を長押し →切り抜く部分が選択されたのを確認し、「共有」→「写真に保存」をタップ <無料デザインツールの例> Canva https://www.canva.com/ja_jp/ Adobe Express https://new.express.adobe.com デザインAC https://www.design-ac.net/ (使い方などはYouTube動画等で検索してください)13046282画像生成
キャラクター作成
推奨モデル - DALL•E 3一際目立つ超リアルな似顔絵アイコンを作成します。 年齢・性別・髪型・顔の色や表情・その他の特徴などを細かく設定すればあなたそっくりなアイコンが作成されます。 ZoomやSNSのアイコンなどにぜひご活用ください♪ あなたらしさを瞬時に伝えるZoom背景が作成できる「Zoomプロフィール背景メーカー」もぜひ一緒に使ってみてください。5128509