2021年3月19日金曜日

HTMLの基本【<P>文字を入力する</P>】タグ‐HTML・CSSを学ぶ。

ブロガーBloggerのHTMLビューではHTMLタグが使用されています。ブログを見栄え良く自分好みにするためにはHTMLとCSSの最低限の知識が必要です。


HTML・CSSを学ぶ


少しでも良いブログを作ろうと努力はしていますが参考書もないようでは知識も深まらず、身に付かないでしょう。インターネットから部分部分で得られる知識もありますが、ここはやはり系統的に基礎をしっかりと学ぶことが向上への早道だと思います。


このHTMLとスタイルシートCSSの基礎をこのブログで実践・検証しながら学んでいきたいと思いこのカテゴリを始めることにしました。なお、このブログでは管理人の好みや必要性に基づき学んでいくため、系統的な構成になっておりません(笑)。理解不足や間違いがあるかと思いますがコメント等で指摘して頂ければ幸いです。


ホームページやブログではHTMLとCSS等コードが使用されページが作成されています。その役割・機能はというと、HTMLはページの本文を作成するためにあり、CSSはデザインの構成を担っています。


HTMLの基本構造



HTMLの基本構造について追加説明:本文は「タグ<body>と</body>の間」に記入する。h1、p、ul、li要素について‐HTML・CSSを学ぶ

【<p>文字を入力する</p>】タグを学ぶ

ブログやサイトのページに文字を入力していくのですが、その最も基本となる<p></p>タグについて学びます。


ブロガーBloggerの作成ビューで下記のような文字を入力してみます。


文字を入力する


これをHTMLビューで見てみると


<p>文字を文字を入力する</p>


となっています。


入力文字を<p>・</p>で挟み込んでいます。HTMLビューで入力する場合は、入力文字の前に<p>を、後に</p>を記入することで文字を表示できるということです。本文全体は<body>と</body>で囲まれます。


例えば、「HTMLビュー」で下記のようなコードを入力します。

<p>文字を入力する-1</p>

<p>文字を入力する-2</p>

<p>文字を入力する-3</p> 

<p>文字を入力する-4</p>

<p>文字を入力する-5</p>


これを「作成ビュー」で見てみると下記の様に表示されます。


文字を入力する-1

文字を入力する-2

文字を入力する-3

文字を入力する-4

文字を入力する-5


この逆に「作成ビュー」で上記の文字を入力して「HTMLビュー」で確認しても同じようにタグが記載されています。


<p>文字を入力する-1</p>

<p>文字を入力する-2</p>

<p>文字を入力する-3</p>

<p>文字を入力する-4</p>

<p>文字を入力する-5</p>


CSSはこの文字の大きさを指定したり、色を付けたり、背景の色を変えたりするための「スタイルシート」と言われています。


この法則を良く覚えておくことで挿入したいコードがある場合に何処に挿入すればいいかが判断できるようになり役立ってくると思います。

0 件のコメント:

コメントを投稿

おすすめドリンク

楽天
 
Amazon

私にとって記念すべきブログ投稿となります

記念すべきブログ投稿 ブログ記事を書いている時、なぜか「思えば、遠くへきたもんだ~♪」と昔懐かしい歌の歌詞を口ずさんでいました。現在では、「海援隊」と言うグループ名は知らなくとも「武田鉄矢」ならご存じですよね。 武田鉄矢さんが確か3人でユニットを組んで活動しておられた時の歌なので...