ロイヤルノート|でくのぼうのアロマでエスプレッソな雑記

でくのぼうのアロマでエスプレッソな雑記

記事執筆に使いそうなHTMLだけを鬼やさしく解説《①ド基礎編》

 

f:id:vintraw:20161129184431j:plain

タイトルの通り、本文をいろいろ飾るときに使いそうなHTMLにしぼって、超絶カンタンに教えるコラムの第一回となります。

元コーダー(HTMLタグをつかってウェブサイトをつくるひと)だったぼくの知識が、ブログ初心者やHTML初心者のかたのお役に立てればと思い、記事にしました。

ぼくが利用させてもらっているこのはてなブログとかWordpressなど、記事執筆のときにHTMLタグを打ち込めるタイプでブログを書いているかた、書こうとしているかたには参考になる部分あるかもしれません。

ポリシーは『鬼簡単すぎて泣ける』です。
あえて大胆に、シンプルにそぎ落とした解釈で、必要最低限のことしか書きません!
ではいってみましょう!

---- INDEX ----

  SPONSORED LINK  

覚えるのはHTML?タグ?

HTMLってのがまず、WEBサイトを表示するための言語です。
WEBサイトはHTMLでできています。
てことは……

前提:
HTMLを操れば思い通りに記事本文を装飾できます

それじゃあ、HTMLってどんな中身でできてるの?
ここでHTMLタグというものが登場します。
HTMLの中身はHTMLタグ(以下「タグ」と略記)で、できています

WEBサイトはHTMLでできている

HTMLはタグでできている

つまりWEBサイトはタグでできている

ということで……

結論:
タグを覚えれば思い通りに記事本文を装飾できます

HTMLタグの基本書式

じゃ、さっそくタグの基本構造を覚えちゃいましょう。
あなたが覚えるタグの書式はたったひとつです!

<タグ名 属性名="プロパティ名: 値;">装飾したい本文</タグ名>

はい、これだけです!
これでもはやなんでもできます。
できると信じてください。

もっとシンプルなほうがいいですか?
ホントは以下が最低限の状態です。

<タグ名>装飾したい本文</タグ名>

タグは、タグの名前を <> の記号で囲ったもののことで、タグ自体はWEBサイト上に見えません。
見えない代わりに、囲ったなかにある文字たちが何なのかを表現するんです。 

その範囲の始まりを <タグ名>
その範囲の終わりを </タグ名>(※スラッシュ付きがおしりの合図!)
と書いて表現すれば大正解です。

具体的な希望は属性に書こう

もちろんこの超シンプルな状態でも十分使い物になります。
でも例えば、 ここからここまでの文字を赤色にしたい!と思ったとき、この具体的な『赤色にしたいという指示』はどこで表現するのでしょう?

今こそさっき省いた部分の出番です。
囲んだ範囲を具体的にどう表現したいかは、属性というもので自由自在に操っちゃいましょう!

範囲=<タグ>~</タグ>ではさんで指定する
具体的な表現=タグの中の属性にいろいろ書き込んで指定す

よし、ではここで属性の基本的な書き方をおさらいです。

<タグ名 属性名="プロパティ名: 値;">

半角ヤマガタカッコ・タグ名・半角スペース・属性名・半角イコール・半角ダブルクォーテーション・プロパティ名・半角コロン・値・半角セミコロン・半角ダブルクォーテーション・半角ヤマガタカッコ

地味に重要なことなので細かく書きました。
HTMLタグは半角じゃないとダメですからね!
そしてタグ名と属性名の間も必ず半角スペースを入れて、別々のものだよーと分からせてあげてください。

とにかく属性にはstyleを入れとく

で、このタグの中に入る『属性』はいろいろな種類があるのですが、

無駄な説明はおもいっきりハショリます!

属性には『style』と入れましょう。
style属性こそが、タグで囲った部分をどう修飾するかを指定する超メジャーな属性です。
こいつさえいればほぼなんでもできます。

<タグ名 style="プロパティ名: 値;">装飾したい本文</タグ名>

こうなります。

『プロパティ:値;』こそが『何をどうしたいか』

見出しのとおり、style属性のなかのこれから書き込む『プロパティ:値;』これこそが『何をどうしたいか』を描き込む場所なんです。
ではここでひとつ、タグ記述の例を見てみましょう。

ジョバンニはそのカムパネルラはもうあの銀河のはずれにしかいないというような気がしてしかたなかったのです。

この一文のうち、カムパネルラの部分だけを赤字にしたいとしましょう。
その場合、HTMLタグの書き込みかたは以下のようにすればOKです。
※タグ名『span』はこのあと解説します  

ジョバンニはその<span style="color: #f00;">カムパネルラ</span>はもう…(略)

すると実際の見え方は以下のようになります。 

ジョバンニはそのカムパネルラはもうあの銀河のはずれにしかいないというような気がしてしかたなかったのです。

こうして、プロパティと値をどう指定するかで、いくらでも文字が修飾できるようになります(∩´∀`)∩ 

とにかくタグ名は<p>か<span>にしとく 

さて、あなたが修飾したい対象は「段落」ですか?
それとも「段落の中のほんの一部」ですか?
さっきのカムパネルラみたいに。
それによってタグ名が変わります

<p>タグ:パラグラフ。つまり段落タグ。段落全体をあらわすよ。
<span>タグ:スパン。「ここからここまでの間」ということで短い部分をあらわすよ。

つまり段落全体を修飾したいなら<p>タグを使う、一部だけを修飾したいなら<span>タグを使う。そう覚えておきましょう! 

では実際に、<p>タグで段落全体を修飾する例を見てみましょう。
ここでは、全体を赤い破線で囲いたいとします。 

<p style="border: 2px dashed #f00;">ジョバンニはそのカムパネルラはもう…(略)…気がしてしかたなかったのです。</p>

こう書いた結果が、こちらです!

ジョバンニはそのカムパネルラはもうあの銀河のはずれにしかいないというような気がしてしかたなかったのです。

そしていっぽう、一部だけを破線で囲いたい場合はこう書くことになります。

ジョバンニはその<span style="border: 2px dashed #f00;">カムパネルラ</span>はもう…(略)…気がしてしかたなかったのです。

そして結果はこうです。

ジョバンニはそのカムパネルラはもうあの銀河のはずれにしかいないというような気がしてしかたなかったのです。

こんな感じですね(/・ω・)/

ちなみに、文章の一部分だけの指定なのに間違って<p>タグで囲ったらどうなるでしょう?
正解は改行されちゃうです。

ジョバンニはその<p style="border: 2px dashed #f00;">カムパネルラ</p>はもう…(略)…気がしてしかたなかったのです。

ジョバンニはその

カムパネルラ

はもうあの銀河のはずれにしかいないというような気がしてしかたなかったのです。


<p>タグはあくまで段落を意味するタグです。
ということは<p>~</p>はひとつの段落でなければいけない。
段落ってのは、行の頭からお尻までぜーんぶのことを指します
だから段落の前にも後ろにも他の文字が並ぶことはできないんです。
間違えちゃったら、書き直しましょう!

※ちなみにこうゆう、行の頭からお尻まで全部埋め尽くす<p>みたいな要素は専門用語でブロック要素といいますが、どうでもいいことです\( 'ω')/
※ちなみにちなみに、<span>みたいな左右にモノを置いておける要素はインライン要素といいます、いちおう……

ご不明点はお気軽に

まずはいったん整理してみましたが、この記事は、随時更新型です。

説明のなかで、わかりにくいところ、気になったところがあればいつでもじゃんじゃかご連絡ください!
いただいたご意見を参考に改良をしていって、より人の役に立てる記事に磨いていければ幸いです(∩´∀`)∩

 

さて次回は、具体的な修飾のためのプロパティと値の解説をしていきます!