ホームページは1ページだけでなく複数のページから構成されている。単にホームページを作成してと依頼してもChatGTPじゃなくても、このホームページで何を伝えたいのかを明確にしないと作りようがない。つまりある程度の知識がないと制作を依頼するのは困難だ。
例えばスマホでもストレスなく見られるホームページを作成する場合は「背景色は白でBootstrapを利用して横幅〇〇ピクセル未満はコンテンツ1列表示、それ以上は2列表示で作成してください。また標題はh2タグを指定してください」とか具体的に指示をしないといけない。
質問
htmlは作成できますか。
ChatGPT
はい、私はHTMLを作成することができます。ただし、私は人工知能であり、コンピューター上でHTMLを直接作成することはできません。HTMLを作成するには、テキストエディターまたは開発環境を使用して、HTMLの構文を書き、それをWebブラウザで表示する必要があります。私はHTMLの基本的な構文や要素、属性、およびHTMLドキュメントの構造に関する知識を持っていますので、必要に応じてHTMLに関する質問に答えることができます。
質問
それではh1タグに囲まれた「abcd」と言う文字を、フォントサイズ10ptにするcssを作成してください。
ChatGPT
以下は、h1タグに囲まれた「abcd」という文字列をフォントサイズ10ptで表記するHTMLコードです。
<h1 style=”font-size: 10pt;”>abcd</h1>
このように、h1タグ内にstyle属性を追加し、その中に「font-size: 10pt;」と指定することで、フォントサイズを10ptに設定することができます。
質問
横幅960px内のブロックを背景色を灰色でブラウザの位置でブロックをセンタリングするdiv要素を作成してください。
その中に先ほど指定したh1タグで「abcd」という文字を同様にセンタリングするhtmlを作成しみてください。
ChatGPT
以下は、横幅960px内のブロックを背景色を灰色でブラウザの位置でブロックをセンタリングするdiv要素に、h1タグに囲まれた「abcd」という文字列を含めたHTMLコードです。
<!DOCTYPE html>
<html>
<head>
<title>センタリングされたブロック</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 960px;
background-color: gray;
margin: 0 auto;
text-align: center;
}
.container h1 {
font-size: 10pt;
}
</style>
</head>
<body>
<div class=”container”>
<h1>abcd</h1>
</div>
</body>
</html>
上記のコードでは、まずbody要素の余白をゼロに設定し、次に.containerクラスを持つdiv要素の幅を960pxに設定しています。そして、背景色に灰色を指定し、marginを0 autoに設定することで、ブラウザの位置でブロックをセンタリングしています。また、テキストを中央揃えにするために、text-alignプロパティにcenterを指定しています。
また、h1要素内にはfont-sizeプロパティを設定し、文字サイズを10ptに指定しています。