マエタビ-人生マジメにズル休み!-

20代なぼくの暇つぶしから笑いを作れるような記事を配信しています。

MENU

ブログ初心者も簡単に理解!絶対知りたいHTMLタグ10個まとめ!

記事を書いた人:だちまえ あとで読む

f:id:dashchan8318:20171208210252j:plain

f:id:dashchan8318:20170303191812j:plain
まえ

だちまえ(@dashchan8318)でございます。

コーディングは本当に重宝する…!

 

「コピペしたら文字がデカくなってヤバい!」

「HTML?いじったら画像が映らなくなった!」

「リンクってどう貼ればいいの!?」

 

こんな疑問、多いと思います。

ぼくもブログを始めた当初は「書けばいいんでしょ?」と思って、HTMLやCSSをまったく意識して書いてませんでした。

でも、「あのデザインカッコいいな!」とか思ってくると、色々いじりたくなるのが人間の性分。

 

そんなことを想う頃に、大体の人が壁にぶち当たるんです。

 

f:id:dashchan8318:20170303191812j:plain
まえ

HTMLって何?

って…

 

そんな方に向けて、HTMLの簡単な説明と、記事作成に使うであろう”タグ”を簡単に説明できればと思います!

 

最近の私はと言えば。

バグってます。

半年前は絶対こんなのあり得なかった。

 

とは言え、このおかげでWEBサイトは簡単に作れるようになったのと、
最近はめんどくさかったコーディングをおもちゃにしつつあります。

 

f:id:dashchan8318:20170303191812j:plain
まえ

ふはははは!!!!

今日はお前にどんなjavascriptを付け加えてやろうか!!?

 

…すいませんさっそく本題に入ります。

 

HTMLって何?CSSとどう違うの?

HTMLは、Hyper Text Markup Language(ハイパーテキストマークアップ・ランゲージ)の略で、Webページを作る上で最も基礎的な言語…

CSSCascading Style Sheets、カスケーディング・スタイル・シート)は、ウェブページのスタイルを「こう表示してくれ」と決める言語…

 

f:id:dashchan8318:20170303191812j:plain
まえ

…なんて言われても分かんねぇよ!

※1年前の思い。

 

って人は、とりあえずこんな感じで覚えると良いでしょう。

 

  • HTML:とりあえず形だけ文章とボタン配置しようぜ
  • CSS:HTMLのデザインを付け足そうぜ
  • Javascript:ページにアニメーション足したり電卓付けたりしようぜ)

すいません。javascript的なおまけが入れてしまいました。今回は無視しても大丈夫ですハイ。

 

まあ、ぼくがザックリこんな感じに捉えてます。

(ウソが混じってたら容赦なくコメントお願いします)

 

で、上の説明通り、記事ではあくまでHTMLの設定をしているだけ。

そのうえで、予め、今回お伝えするような"タグ"のデザイン(フォントや色、アイコンの形状など)をCSSであらかじめ「このタグで指定した奴はこのデザインにしてね!」と書き加えておいて、初めて記事の編集とデザイン、色合いがまるまる完成するわけです。

 ※ちなみに今回説明するのはHTML5に基づいてます。それって何って聞くなら、HTML言語の現行バージョンだと思って頂ければ。

 

で、今回の説明もHTMLの説明に限るのですが、HTML画面を見て「どこイジりゃええねん!?」っておっしゃる方も多いと思うので、下にキチンと書きます。

 

どこで見るか

それぞれの場所をクリックです!

はてなブログ

記事編集画面の「HTML編集」から(「編集」と「プレビュー」の間)

Wordpress

記事編集画面の「テキスト」から(ビジュアルの隣)

 

そうすると、こんな画面が出てきます!

f:id:dashchan8318:20171207195818p:plain

 

これのザックリとした読み方を、これから説明するわけです。

 

HTMLの基本的な読み方・書き方

さて、皆さんが一番わからない「読み方」を、まずは説明しましょう。

 

例えば、

「超意味のない文章」

と記事に書いたとき、HTML画面には、

<p>「超意味のない文章」</p>

と表示されます。

 

基本的にこう言う風に、

<〇>~</〇>

でくくって、文字として並べていくのがHTML。

 

もっと分かりやすく大きくすると、

<〇>~</〇>

こういう感じ。(「〇」と「~」はあくまで例えです)

 

<>から始まり、

</>で終わるんです。

(スラッシュの入れるのは文字の前です。改行の<br/>だけは例外)

 

さて、こんな基礎知識を踏まえ、ブロガーが使うであろう基礎の基礎タグを見ていきましょう。

 

ブロガーが覚えたいHTMLタグ一覧

えー、本当は<head>とか<body>、<footer>とあるわけですが、

 

省略。

 

あくまで記事に使う内容を中心に、覚えたいタグをピックアップしました。

もちろん、将来的にWEBサイトを作るときには絶対覚えたいタグなので、「作ってみたい!」と言う方は、じぶんで調べてみても良いでしょう!

 

と言うわけで、基礎の基礎タグでございます。

 

最低限これだけ分かれば、「あれ?ここおかしいな!」って言うのが、少なくともぼんやりとは見えてくるはずです!

 

文章用:<p>

<p>タグは文章用。先ほども書いたように、この<p>でくくった場所を、このように文章として表示します。

例えば上の文章をHTML表示にすると、こんな感じです。

 

<p>タグは文章用。先ほども書いたように、この<p>でくくった場所を、このように文章として表示します。</p>

 

改行用:<br/>

文字だけなら<p>でも書けるのですが、<p>タグのあいだあいだのインデントを大きくし過ぎると、

 

こんな

 

かんじに

 

なっちゃいます。

 

なので、<p>~<br/>~</p>と入れ、同じ文章を途中で改行し、
途中で折り返すわけです。

ちなみに書き方はこんな感じで、パソコンの「shift+enter」で簡単にこの改行はできちゃうのです。

<p>なので、<p>~<br/>~</p>と入れ、同じ文章を途中で改行し、<br/>
途中で折り返すわけです。</p>

 

リンクなど:<a>

<a>タグは主にリンク、id付け、その他もっぱら「移動用」です。

例えば、こちらをクリックしてみてください。

ここをクリックorタップ

(意味ない文章)

(意味ない文章)

すると、ここまで飛びます。

 

あるいは、リンクを作れます。

本ブログトップを別タグ表示

 

最低限、リンクの書き方は覚えておくに越したことはないので、それをサンプルとして記載しましょう。

<p><a href="http://www.dashchan8318.link">本ブログを別タブ表示</a></p>

 

え?idの付け方やボタンの作り方を知りたい?

こちらをどうぞ。

HTMLタグ/共通属性/要素にIDを付ける - TAG index

CSSで作る!押したくなるボタンデザイン100(Web用)

 

見出し用<h1>~<h5>

<h1>や<h3>と言うのは見出しです。

例えばはてなブログは「大見出し」などの表記で<h3>~<h5>を、
wordpressは「見出し1」などで、<h1>~<h5>までを、
編集画面で弄れるようになっています。

ちなみに、h1の方が大きく、大見出しと呼ばれます。

で、h2、h3と続き、中見出し、小見出しと、どんどん小さくなるわけです。

 

例えば、上の例はこんな感じで書けるわけです。

<h4>見出し用<h1>~<h5></h4>※

 ※実際HTML画面では誤作動が起きないよう、ブログ機能で一部表記が変換されています。

 

画像用:<img>

<img>はイメージと読むのですが、まんま画像のことです。

一般的に、

<p><img src="メディアのリンク元" width="幅の数値px" alt="画像が消えてる時の表示名"></p>※

と言う風に書いたりしますが、名前を書かなかったり、あるいはタイトルを付けたりと色んなパターンがあるので、扱いは人それぞれです。

※画像は文字と同じ扱いのため、<p>タグなどで挟みます。

 

とりあえず、上のようなコードがあって、はてなブログでは、このような画像が出てくるというわけです。

f:id:dashchan8318:20171207204545p:plain

 

中央ぞろえ:<center>

<center>タグは中央ぞろえ用。

例えば、下記の文章があるとしましょう。

 

「クソ文章」

 

これを<p>の代わりに<center>で挟むことにより、

 

「クソ文章」

 

と言う風になります。スペースを使わずに中央に揃えられるので、先ほどの<img>を中央ぞろえにするときに便利です。

もっとも、この中央ぞろえは本来、デザインをいじくるCSSで設定します。

なので、手動で中央ぞろえするとき以外、エンジニアはめったに使わないそうです。

 

とは言え、サンプルは書いておきましょう。

<center>「クソ文章」</center>

 

グループで弄るとき:<div>

 <div>タグそのものは意味のないタグですが、主にタグのグループ化に使ったりします。なので、

こんな感じでくくったりするときに使います。

と言うか全般的に使うタグなので、これ見たら「ここまでくくってるのか!」と、コピペするときなど覚えておきましょう。

<div style="border: 1px solid #000000;">こんな感じでくくったりするときに使います。</div> 

 

文章を弄るとき:<span>

これも<div>タグと同じで特に意味ないタグなんですけど、文章に対して弄るときに使いますね。

例えば、

こんな感じや、

こんな感じなど。

太文字の<strong>だけは太さも調整するせいなのか別ですが、文字サイズや線引きなどに使うのは、基本的にコレですね。

<p><span style="text-decoration: line-through; font-size: 80%;">こんな感じや、</span></p>
<p><span style="text-decoration: underline; font-size: 150%;">こんな感じなど。</span></p>

 

箇条書きするとき:<ul><ol>と<li>

<ul><ol>と<li>は厳密にはそれぞれ異なるんですけど、

<ul>と<li>を使えば、

  • こんな
  • 感じに
  • なって

<ul>
<li>こんな</li>
<li>感じに</li>
<li>なって</li>
</ul>

<ol>と<li>を使えば、

  1. こんな
  2. 数字が
  3. 付きます

<ol>
<li>こんな</li>
<li>数字が</li>
<li>付きます</li>
</ol>

つまり、<li>は共通のリスト記号(list item)、<ul>はドット(unordered list)、<ol>は数字表示(ordered list)の時の記載ですね。

英語の話であれですけど、”ordered”は「整列された」と言う意味なので、”ol”は整列するために数字使っていて、”ul”は単なる箇条書きなのでドットみたいな…

 

ってじぶんで書いてて「わかんねぇよ!」ってなりました。
急に英語使うのは止めて、次行きましょかw

 

太文字にするとき:<strong>

<strong>は「強い」「強調」の意味のとおり、太文字(ボールド、B)の意味です。
文章ソフト(wordとか)を使った人は、少なくとも太字にしたことはあるはずです。

そんなわけで、皆さんご存知の通り、

 

こんな感じです。

 <p><strong>こんな感じです。</strong></p>

 

引用するとき:<blockquote>

<blockquote>は上で散々使ってきましたが、

これです。

引用とか参考とか、とりあえず「どっかから持ってきた文章ですよ」って言う感じに使う場合が多いですね。

どっかから持ってきた文章の場合、キチンと「引用」使いましょうね~

 <blockquote>
<p>これです。</p>
</blockquote>

 

ボタン用:<button>

<button>はアフィリエイトを扱いたい方には大事な代物。

例えば、ASP(アフィ取扱会社)は文字リンク先や画像を貼れるよう、テンプレとして用意してますが、そんなあからさまな広告って、「なんだかな~」って思います。

ぼくもなんだかな~って思います。

 

なので、”押したくなるような”ボタンを作るんです。

どうやろな?

どうやろな?

どうやろな?

どうやろな?

はい押したー!ジャンプした人押したー!

ごめんなさい冗談です怒らないでください。

<p><button>おしたいやろ?</button></p>

 

今回のことが分かると

ぶっちゃけ、今回の大半は、編集画面の機能からボタン一つでいじれるようになってます。

でも、<div></div>を何回も使い、文章を囲いまくってるものをコピペして、一部間違えて消しちゃったテヘ、なんてことをしたらどうなるのか?

こんな
風に
バグります。
素晴らしい
でしょ?

 

対して、今回の内容だけでもキチンと使いこなせれば、

こんなボタンも作れます。
(リンクは無し)

 

htmlはcssとの兼ね合いが基本ですが、記事を書くうえで結構重宝するので、覚えておくにそんはありません。

 

まとめ:本格的にガッツリ勉強するには

以上、ブロガー初心者が記事を書く時に最低限覚えておきたいタグをまとめました!

もちろん、ボタンやリンクについてもちょちょいと触っているので、引用やアフィ管理にも使えるようになってますよ!

 

 

ちなみに、ぼくはこんなコーディングを学校で学びました。そのほうが分かりやすく、手っ取り早いです。

例えば、「テックアカデミー」などは、アプリ開発、WEB作成、はたまたWEBマーケティングなど、コース別に色々学べるので、htmlやcssのみならず、javascriptruby、その他コーディングに必要になる言語をほぼ学べるでしょう。

全てと書かないのは、残りは経験なので。

 

「テックアカデミー」へのリンクはコチラ

 

ぶっちゃけ、高いです。
しかし、雇用後に100万円支払う会社も多くあり、かつ、それだけ支払われるほどに、今現在エンジニアは不足しています。

おまけに自営業でも活用出来るので、少なくともパソコンを触っていきたいなら、まず勉強しておくべきでしょう。

 

※大手ASP「A8」なんかは、セルフバックとして自社正規雇用後に100万円払うという広告まで出してます。

 

だからこそ、こんな方に本当にお勧めです。

  • とにかく仕事に恵まれたい方
  • 今の業種以外に転職したい方
  • 人間関係に疲れたのでスキルを身に着けたい方

と言うのは、コレさえ分かっておけば、2020年ちょっと先までは、転職にも困らなくなるでしょうし。

こんな技能があったおかげで、ぼくもフリーターを卒業し、正社員として会社に雇用されてます!

 

なので、コーディングは本当に重宝します!

ぜひ、ブログを書くなら頑張って覚えていきましょう!

 

では!

※マエタビは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設置されたアフェリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。