HTMLとは！HTMLタグとCSSのセレクタの関係、1人でカスタマイズできる為の近道

HTMLタグとCSSのセレクタの付け方が難しくって浪費してませんか？自分でカスタマイズするにはHTMLの基本を知ってないと出来ないですよね。

HTMLの基本的な事を知ればCSSが解る近道になります。どのページを読んでも専門用語は絶対でてくるワケで。その言葉を知ればクイックリファレンスなど読んでも理解できます。

入門編として、HTMLやCSSで使われる言葉をココで覚えて、デベロッパーツール：要素の検証を使い、ひとりでカスタマイズできるまでの第一弾！CSSと関係が深い『HTMLの基本』をチェックしてください＾＾

HTMLとはブログの構造を書いたネット用のテキスト

説明するより上記画像を見てください。コレがHTMLです。一応HTMLって何か下記リンクを参考に、初心者向けにまとめました。

参考クイックリファレンスの「HTMLの基本」

1. 画像や動画、リンクなど貼って情報を発信することが出来る高度なテキスト
2. ネット上に公開するために開発されたマークアップ言語
   • mark upを日本語で言うと（印をつける、マークする）
   • HTMLの中に「HTMLタグ（下記に補足）」でマークした言語
3. HTMLは印をつけたHTMLタグと、そのタグに囲まれたテキストで書かれてる。※検索エンジンもh2・pなど（HTML）タグがあれば、ブログの構造を解析しやすい
   • タグは、リスト・見出し・画像・段落・リンクなどを指し、下記画像の「黒がタグに囲まれたテキスト」それ以外がHTMLタグ
     
   • タグに囲まれたテキストとタグも含めて「要素」と呼ぶ
     
   • タグに囲まれたテキストはCSSで装飾ができる
     
4. ネット上で見やすくする為、CSSで装飾して表示できる仕組みにもなっている

HTMLとは

• ネット上に公開する用に作られた高度なテキスト「マークアップ言語」のこと
• 「文：テキスト」だけでなく画像やリンクなどが貼れる。
• マークアップされた「HTMLタグ」内の文章「要素」はCSSで装飾させることが出来る。
• 言葉で言うより「要素の検証」で実物を見たほうが解りやすい（後述）

ちょっとわかりにくい人は最後まで読むと、理解できるように以下・最後まで書いてます。知って1人でカスタマイズしたい！と思う人は是非このページ（基本・基礎部分なので）、覚えていってくださいね❦

HTMLタグとは何！？

HTMLタグとは画像なら<img>、段落だったら<p>、リンクは<a>、見出しなら<h1>・<h2>など。半角小なり『<』と、半角大なり『>』で囲んだものをタグと言って<h1>と書きます。

※h2はタグではなく、<h2>とする事で（HTML）タグになる。と分かれば花丸です❦

HTMLタグに囲まれたテキストと、テキストを囲む『タグのつけ方』をチェックしてみましょう＾＾

HTMLタグ、開始・終了タグの書き方・スタイル指定・ブラウザでの表示

<h1>CSSの入門htmlタグとの関係</h1>

HTMLタグの見出しh1タグで囲まれた文章「CSSの入門htmlタグとの関係」がh1タグのテキストはCSSで装飾できます。テキストを囲む<h1>が開始タグに、</h1>が終了タグです。

• 「開始タグ　テキスト　終了タグ」と基本的に順番に書きます。

ちなみに装飾するには、h1を指定{色を:赤にする;}このようにCSSで装飾できます。

h1{color: red;}

次はpタグの中にaタグが入ったサンプルを見てください。

<p>←開始タグ。p内に囲われたテキストが装飾できる。a開始タグ→<a>リンク</a>←終了タグ。文中に使える（インライン要素）aタグなど入れてCSSで装飾する事もできる。これがｐ終了タグ→</p>

上▲がHTML、下▼のように表示されます。

タグは、普通にブログ見てるだけでは見えないですよねっ。ブログのテキスト画面でも見る事ができるけどっ、プラグインやブログサービスで自動で入る場合もあります。要素の検証を見たらどう表示されてる見たら解りやすいですねっ。

※HTML5では（インライン要素の）aタグがブロック要素のように段落やリストに全体をaタグで囲む事も可能！でも、テキストモードなどHTML形式で書いてアップしないと自動改行pが入ってしまう。。

改行を必要とする『ブロックレベル要素』の『pタグ』全体に改行は必要としない『インライン要素』の『aタグ』が自動的に入る仕組みのブログもある（WordPressやはてなブログ）。

参考：ハイパーリンクを指定する／★HTML5タグリファレンス

HTMLタグには種類がいくつもあり、自分で装飾するには1つ知っておきたいHTMLの要素があります。それがdivとspanの違いです。コピペで装飾してきたなら、ボヤンっと気付いてるかもしれませんねっ。

divやspanの要素にクラス指定する書き方（属性の付け方）を次に書いていきますねっ。

HTMLタグ、div・spanにclass名（属性）を付けてカスタマイズ

HTMLタグ「p」「div」「span」のタグ内にクラス名（class属性）を付けるのは、沢山「p」「div」「span」タグを使うからです。<p><div><span>タグをそのまま指定して装飾するとどうなるでしょう！？

全部のpタグ（段落）や<div>、<span>で指定された範囲全てに反映されてしまいますよねっ。それらに名前を付けて、装飾する範囲をHTMLタグで指定してカスタマイズすれば扱いが凄く楽になるワケです。

例えばpタグに自分でクラス名（class属性）を付ければ、カスタマイズする独自の領域を作ります。CSSでpタグと指定せずclass名（属性）を指定すればその領域のみ装飾できるワケです。

書き方は下記をチェックしてください＾＾

LINKHTMLの要素！属性、属性値とは！？class名を複数設定するHTMLの書き方付

HTMLタグとCSSのセレクタの関係

文章構造を理解する検索エンジンに解りやすく伝えたりするHTMLタグは、タグに囲まれた文章をCSSで装飾する事ができる。と、わかってきましたねっ❦

HTMLは検索エンジンに伝わりやすい反面、CSSで装飾されてないとユーザーが読みにくいんですよ…。人の見やすさ・タップのしやすさ・装飾や動きを指定するCSSやJsまで検索エンジンはみているのはモバイルフレンドリーの項目を見てもわかります。

HTMLタグ<div><span><p>やクラス属性<div class=”hoge”>をつけた要素は、CSSで.hogeと指定し装飾できます。

• 「タグ内のテキスト」を装飾する時、HTMLタグ<div class="hoge">はCSSで「セレクタ.hoge」になる。
• 全ての段落<p>を装飾する場合のCSSは、p {font-size: 16px;}とpタグ内のフォントサイズを16px。などセレクタにpを指定しCSSで装飾。

逆から言えばセレクタは、「HTMLタグ」に囲まれた「テキスト」をカスタマイズする為の『場所：箇所』をCSSで指定している。という事です。

装飾するとブログに個性が出たり、ユーザーさんが見やすくなりますが、「下手にやり過ぎちゃうと…」ド派手になったり見にくくなって…困っちゃいますね＾＾；

HTMLから見る「タイプセレクタ」「クラスセレクタ」

• 冒頭で書いた「HTMLの骨組み」をマークアップしたのがHTMLタグ
• divやp、spanなどに囲まれた「テキストとその範囲」を装飾するのがCSS
• HTMLタグを指定するのがセレクタ

そのセレクタには色んな種類があります。一部例をあげると下記の通り。

タイプセレクタ

h1やdiv、pやspanを<>で囲ったものを装飾するセレクタ

クラスセレクタ

クラス属性を付けたタグに囲まれた「テキスト範囲を装飾」する事ができるセレクタで、各ページに複数使える

初心者がカスタマイズするには、HTMLタグ内にクラス属性『class=”sample”』を付けてクラス名『sample』を付けるのがCSSで装飾しやすいし、クラス名がカブってなければ優先順位を考えなくても良いので扱いやすいです。

• クラス名を付ける時は半角英数字を使用。頭に数字は入れない。
• HTMLが<p class="sample">のとき、CSSで.sample {***: ***;}と指定

付いてこれてますか？

まだ難しいときは、これからHTMLタグを見てCSSを装飾すれば、あと一息！自分で装飾できるようになりますよっ＾＾

実際にHTMLを見てみる

HTMLって何だろぉって、要素の検証で表示させたものを1度見て、理解していくのが1番わかりやすいですっ。では、実際のブログで様子を見てみましょう。

1. Windowsの場合Ctrl＋Shift＋Cの同時押し
   Macの場合のショートカットcontrol⌃＋option⌥＋C
2. Sourcesをクリック
3. indexをクリック

そうすれば該当ページのHTMLが全部見えるので、参考になるし面白いですよ。下記リンクで詳細なHTML・CSSの見かたを説明してます。また内部リンクで実際操作しているリンクも置いてるので、チェックしてくださいね。

LINK要素の検証でカスタマイズ！HTMLとCSS入門編

 さいごに

HTMLやCSSの基礎をしらずに見よう見マネでやって、ブログ全体の文字を真っピンクにしてしまったり、文章ぜんぶ「センタリング：中央寄せ」にしたこともあり、トライ＆エラーで失敗だらけでしたｗ

素人のカスタマイズでスタイルが反映しないのは、HTMLタグとCSSのセレクタがあってない場合もあります。スタイルをコピペした後キャッシュを切ったりシークレットウィンドーで解決する事もあったり。

キャッシュの削除方法・cookieの削除・cookie個別の削除方法などは下記。

LINK普段見てるページにエラー・不具合があったとき、試してほしいこと

HTMLタグにクラス属性をつけ、CSSセレクタを一致させ、自分で思った通りにカスタマイズすれば楽しくなります！

LINKCSSの基本、子セレクタの説明！初心者向け、子孫セレクタとの違い付き

LINK隣接セレクタ！セレクタの指定方法と色んな使用例。初心者向けページ

それではカスタマイズを楽しんでください。かうたっくでした＾＾

できるポケット HTML5&amp;CSS3/2.1全事典 できるポケットシリーズ

posted with カエレバ

小川 裕子,加藤 善規,できるシリーズ編集部 インプレス 2015-03-06

Amazonで探す

楽天市場で探す