かしこログ

最近 釣りに行けていない僕ですが、自作オリジナル釣り具の魅力を発信してます

HTML勉強2日目。meta、title、div、spanという4つのタグ。

time 2019/09/18

HTML勉強2日目。meta、title、div、spanという4つのタグ。
Pocket

おはようございます。

本日は、よく使われる4つのタグ、

を勉強しました。

sponsored link

meta、title、div、spanという4つのタグ。

HTML学習2日目となりました。

3日坊主のうちの2日が過ぎた訳です。

僕にしては長く続いた方です。

早速ですが、今回僕が勉強したのは、よく使う4つのタグとなります。

前回の最低限必要な4つのタグで作成した、コードに今回のタグを追加していこうと思います。

meta

文書の情報を伝えるために使われるタグです。

エディタに記述すると以下のようになります。

metaタグは情報を伝えるタグなので、

<head>~</head>などのように、2つのタグで挟む必要はありません。

この場合のmetaタグは<meta charset=”UTF-8″>とする事で、

UTF-8という文字コードで書かれた事を示しています。

title

この文書のタイトルを伝えるタグです。

エディタに記述すると以下のようになります。

<title>~</title>の中に、この文書のタイトルを入れます。

今回は、MyPageとしています。

実際に、これをブラウザに表示させると以下のようになります。

ブラウザのタブにMyPageと表示されました。

タブバーがない場合は、ウインドウのタイトルバーに表示されます。

また、お気に入り登録やブックマークするときも、このタイトルが表示されます。

div

一つの塊を示すタグです。

エディタに記述すると以下のようになります。

divタグは表示させたいないようなので、<body>~</body>の間に書きます。

今回は、<div>こんにちは、かしこです。</div>と書きました。

これをブラウザに表示させると、以下のようになります。

span

文章の一部を示すタグです。

エディタに記述すると以下のようになります。

spanタグも表示させたいないようなので、<body>~</body>の間に書きます。

今回は、<span>こんばんわ、です。</span>と書きました。

これをブラウザに表示させると、以下のようになります。

ここで、ん?divとspan一緒じゃね?

と思ったかと思います。

div と span の違い

どうやら、両者の違いは 要素 であるとの事です。

div = ブロック要素

<div>~</div>で囲われた文書は、これでひと塊であるという事を示す、ブロック要素と呼ばれるものです。

例えば、エディタに以下のように記述します。

かしこ という文章をdivで囲ってみました。

これをブラウザに表示すると、以下のようになります。

divというタグは、一つのブロックを示しています。

前の文章、後ろの文章とは別になるように表示される、これがブロック要素の基本です。

span = インライン要素

<span>~</span>で囲われた文書は、文章の一部であるという事を示す、インライン要素と呼ばれるものです。

かしこ という文章をspanタグで囲ってみます。

これを、ブラウザに表示すると以下のようになります。

あくまでspanタグは文章の一部を選択しているので、見た目は何も変わりません。

しかし、実際にはspanタグで囲われている状態となります。

sponsored link

down

コメントする




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

かしこの漫画

エギング

タコ釣り

プログラミング

思う事

釣行日記

プロフィール

かしこ

かしこ

釣りが趣味ですが、結婚し子供ができてからは釣りに行けていません。なのでオリジナル釣り具を造って気を紛らわします。ものづくりは苦手ですが、暖かい目で見守ってください。

2019年11月
« 9月    
 123
45678910
11121314151617
18192021222324
252627282930  

ツールバーへスキップ