同棲カップルの日常

現役システムエンジニアと現役調理師によるおすすめ商品紹介

【実践】HTMLを使ってみよう③~spanタグの使い方~

おはこんにちばんは

どうも、旦那のまことです

 

このブログは1人でも多くの人に

プログラミングの楽しさを

知ってもらうために書いています

 

ITの学校なんて行ってない

ITの知識なんて何にも知らない

って人でも全然大丈夫です!!!

 

僕もITの学校なんて行ってないですし

知識0からでもシステムエンジニアとして

働けています!

 

ちなみに僕は県内で偏差値が

1番低い高校出身で、前は肉体労働の

仕事をしていました!

 

IT、プログラミングに少しでも

興味のある方、僕と一緒に

少しずつ勉強していきましょう!

 

一気に沢山の事を教えてしまうと

頭の中でごちゃごちゃになったり

覚えきれないので、基本的には

1つのブログで1つの事を

教えていきたいと思います

 

テキストを表示する電源を入れたコンピューターモニター

 

第1回目のブログで書いた

HTMLの基本的な構文を

見てない方は見てください

 

下のリンクを押せば

第1回目のブログが見れます

【実践】HTMLを使ってみよう①

 

 

ではタイトルに書いてある通り

今回はspanタグについて

学んでいきたいと思います

 

spanタグは単体では特に意味を持たない

タグですが、<span>~</span>で

囲った部分をインライン要素

としてグループ化することが

できるタグです。
グループ化することで

指定した範囲にスタイルシート

適用したりすることができます。

 

HTMLには2種類の要素が存在します

それは

  1. ブロックレベル要素
  2. インライン要素

の2種類です

 

まずブロックレベル要素について

説明します

どのような要素かと言いますと

文書の骨組みとなる要素です

例えば見出しや段落などです

このタイプの要素は、

body要素の直接の子要素として

配置することができます。

 

次に、インライン要素について

説明します

どのような要素かと言いますと

文章中の一部

として扱われる要素です

例えばリンクや文字の強調などです

このタイプの要素は

通常はブロックレベル要素内で

使用します。

 

ブロックレベル要素のタグについては

次のブログで<div>というタグについて

説明しますので、今回は忘れてください

 

ではspanタグの使い方です

前回のブログでご紹介した

pタグを使って実際に

spanタグを使ってみましょう

 

pタグを使って文章を書いていくと

どんどん縦に並んでいきます

どういうことかと言いますと

このようなhtmlを書いてみます

それをブラウザで表示させてみると

このように縦に並びます

 

f:id:makoxti:20210227201021p:plain

 

しかし、インライン要素である

spanタグを使うと、縦に並ばないで

文字を書くことができます

 

では実際にhtmlを書き換えてみます

f:id:makoxti:20210227201211p:plain

 

これを表示させてみます

f:id:makoxti:20210227201237p:plain

 

どうでしょう、ちゃんとpタグの

中に改行されずに文字が書かれています

ですが、これだったら普通にpタグ内に

書きたい文章書けばいいじゃないの?

ってなりますよね

 

大丈夫です、ちゃんとspanタグ

ならではしかできない機能があります

それは何かというと、装飾をするCSS

というプログラムが書けます!

 

もちろんpタグにもCSS

書けるのですが

文章の中のこの文字を強調したい

というときはpタグではできません

 

そんな時に役に立つのがspanタグです

では実際にhtmlを書いていきましょう

f:id:makoxti:20210227202310p:plain

 

表示結果はこうなります

f:id:makoxti:20210227202359p:plain

 

ではそれぞれどういう

役割をしているのか

解説していきます

 

cssを書くときは

style="”と書き、""の間に

装飾する記述をしていきます

 

color: redでは文字の色

指定しています

なので、aaaは赤色になっています

 

次にfont-weight: bold

こちらは太字になるようにしています

なので、bbbは太字になっています

 

最後はcssで文字の色と太字に

なるように指定しています

そう、装飾する記述は複数

書けるのです!

 

どうやるのかというと、

""内で;で区切ることによって

複数指定できます

 

;のことをセミコロンといいます

では早速複数している箇所を

見ていきましょう

style="color: blue; font-weight: bold;"

 

;で区切って2つ指定していますね

このブログを見ている方も是非

試してみてください

 

htmlファイルの作り方が分からないよ

という方はこちらのブログを

見てください

【実践】HTMLを使ってみよう②~pタグの使い方~

 

では今回使うプログラムを

載っけておきますね

 

---------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<p>pタグ1行目<span style="color: red;">aaa</span></p>
<p><span style="font-weight: bold;">bbb</span>pタグ2行目</p>
<p>pタグ<span style="color: blue; font-weight: bold;">ccc</span>3行目</p>
</body>
</html>

---------------------------------------

 

いかがでしたか?

 

画面で表示できましたか?

 

少しでも「面白い」と思って

貰えたら嬉しいです

 

こちらのブログでは僕が

プログラミングを勉強する方法

について特別大公開しているので

よければ見てください

【大公開】元肉体労働者の僕がシステムエンジニアになるための勉強方法を特別に大公開します

 

子供をお持ちの親御さんであれば

是非こちらのブログも

読んでみてください

今すぐにやるべき!子供に学ばせるべき習い事とは!?

 

どちらもFさん家の日常ブログと

表示されていますが、表示される

ブログの内容はそれぞれ違います

 

ここまでお読みいただき

ありがとうございました!

 

それでは次のブログでお会いしましょう!