HTMLの基礎知識～その16～

2020年7月24日
 Leonardo

ちわーっす！

元気にしてますか？

7月になってからまだまだ梅雨が明ける気配が全く…

花火シーズンに入りましたが、コロナの影響で再検討や中止の地域が出てきましたね…

COVID-19（コロナウイルス）に気を付けて生活してますか？

ストレスがたまったり、イライラとかしてませんか？

感染しないように気を付けてくださいね。

さてと、本題に入りましょう。

PC一台があれば、家でもWebページが作れます。

でも、カフェやFree Wi-Fiのある所にネット環境でつなぐのはリスクがありますので、なるべく避けたほうがいいでしょう。

HTMLの基礎知識を始めましょう。

（ここまでコピペ）

過去のおさらいはこちらのリンクを見てね。

  1. HTMLの基礎固めから！
  2. HTMLの基礎知識～その2～
  3. HTMLの基礎知識～その3～
  4. HTMLの基礎知識～その4～
  5. HTMLの基礎知識～その5～
  6. HTMLの基礎知識～その6～
  7. HTMLの基礎知識～その7～
  8. HTMLの基礎知識～その8～
  9. HTMLの基礎知識～その9～
  10. HTMLの基礎知識～お詫び～
  11. HTMLの基礎知識～その10～
  12. HTMLの基礎知識～その11～
  13. HTMLの基礎知識～その12～
  14. HTMLの基礎知識～その13～
  15. HTMLの基礎知識～その14～
  16. HTMLの基礎知識～その15～

Styleのタグの中にデザインをする


<!DOCTYPE html><!-- HTML宣言 -->
<html lang="ja"><!-- 言語対応宣言 -->
	<head>
		<meta charset="UTF-8"><!-- 文字エンコードを指定 -->
		<title>ホームページの基礎知識</title><!-- ここにタイトルを入れる -->

		<style>
			h1{background:black;color:white;font-size:100%;font-weight:400;}
		</style>
	</head>
	<body>
		<h1>ホームページの基礎知識</h1><!-- 見出し -->

		<p>ここに段落を書き込もう。</p><!-- 段落 -->

		<h2>小見出し</h2><!-- 小見出し -->

		<p>ここにテキストが表示されます。</p><!-- テキスト書き出し -->

		<p><a href="/" title="リンク先のタイトル">ここにリンク先が書き出されます。</a><!-- リンク先 --></p>

		<ul><!-- リスト -->
			<li>リスト1</li>
			<li>リスト2</li>
			<li>リスト3</li>
		</ul>

		<ol><!-- リスト -->
			<li>リスト1</li>
			<li>リスト2</li>
			<li>リスト3</li>
		</ol>
	</body>
</html>

ブラウザ上での表示

h1タグが変わりましたね。
背景色にブラックで文字色が白色になりましたか？

Styleの解釈

h1{background:black;color:white;font-size:100%;font-weight:400;}
background 背景をデザイン
color 文字色をデザイン
font-size 文字の大きさを調整
font-weight 文字の太さを調整

また後日に「Style」に関する詳細の説明していきますね。

Leonardo
  • Leonardo
HTML

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む