HTMLの基礎知識～その16～
2020年7月24日
ちわーっす！
元気にしてますか？
7月になってからまだまだ梅雨が明ける気配が全く…
花火シーズンに入りましたが、コロナの影響で再検討や中止の地域が出てきましたね…
COVID-19（コロナウイルス）に気を付けて生活してますか？
ストレスがたまったり、イライラとかしてませんか？
感染しないように気を付けてくださいね。
さてと、本題に入りましょう。
PC一台があれば、家でもWebページが作れます。
でも、カフェやFree Wi-Fiのある所にネット環境でつなぐのはリスクがありますので、なるべく避けたほうがいいでしょう。
HTMLの基礎知識を始めましょう。
（ここまでコピペ）
過去のおさらいはこちらのリンクを見てね。
- HTMLの基礎固めから！
- HTMLの基礎知識～その2～
- HTMLの基礎知識～その3～
- HTMLの基礎知識～その4～
- HTMLの基礎知識～その5～
- HTMLの基礎知識～その6～
- HTMLの基礎知識～その7～
- HTMLの基礎知識～その8～
- HTMLの基礎知識～その9～
- HTMLの基礎知識～お詫び～
- HTMLの基礎知識～その10～
- HTMLの基礎知識～その11～
- HTMLの基礎知識～その12～
- HTMLの基礎知識～その13～
- HTMLの基礎知識～その14～
- 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
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日