2016/07/24

初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

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

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

HTMLやCSSで目にする要素が判らなくって、HTMLタグの話なのかCSSの事なのか?結局何?解んない!ってなってしまって。どれも要素であるのは変わらなかったんですけどっ。

入門編として、HTMLやCSSで使われる言葉を覚えて、要素の検証を使い実際にカスタマイズできるようになるまでの第一弾!CSSと関係が深い『HTMLの基本』を書いていきますね♪

スポンサーリンク

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

ブログのHTMLのエレメンツ

説明するより上記画像を見てもらったらっ、、コレがHTMLです。一応HTMLって何!?ってのを下記リンクを参考にまとめてみます。

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

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

HTMLタグとは何!?

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

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

次にその違いを書いてますので、他にどんなHTMLタグがあるか見ていきましょう!ちょっぴり「なるほどぉ。。」って何かのヒントになって自分でカスタマイズをする時の近道になるかもしれませんよっ♪

開始タグと終了タグの書き方と、その間のテキストは装飾できる

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

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

開始タグ 半角小なり<h1半角大なり>
要素 HTMLタグに囲まれた文
h1タグの要素 文の要約を書いたタイトル「h1タグで囲われた文」
pタグの要素 段落内の文章「pタグに囲われた文」
aタグの要素  アンカーテキスト「aタグに囲われたテキスト」
終了タグ  半角小なり<半角スラッシュ/h1半角大なり>
  • 「開始タグ テキスト 終了タグ」と基本的に順番に書きます。例えのサンプルとして、h1タグ、pタグとaタグ順に見てみましょう!

<h1>CSSの入門htmlタグとの関係</h1>
開始タグが<h1> h1タグの装飾できるテキスト「CSSの入門htmlタグとの関係」 終了タグは</h1>シンプルなので解りやすいですねっ。

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

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

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

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

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

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

ブロックレベル要素のpタグ全体にインラインaタグが自動的に入る仕組みのブログもある(WordPressやはてなブログ)。

<p><a>参考:ハイパーリンクを指定する/★HTML5タグリファレンス</a></p>
ポイント

開始タグ終了タグで囲まれた文をCSSで装飾すると「ページを訪れるユーザーさん」にも見やすいです。装飾するためにh1を指定すればタグ内テキストをカスタマイズできますよっ。

他のタグも同様指定することでCSSで装飾できる!って事を覚えておいてくださいねっ。

※HTMLタグは簡略化してます

※imgタグには、終了タグはありません。

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

HTMLタグにclass名を付けカスタマイズしやすくする

HTMLタグ自体の要素「p」「div」「span」などにクラス名を付けるのは、ページ内で沢山そのタグを使用しますよねっ。<p><div><span>タグをそのまま指定して装飾するとどうなるでしょう!?

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

該当タグに自分でクラス名を付けてあげたらカスタマイズがしやすくなるじゃないですかぁ!

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

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

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

HTMLは検索エンジンに伝わりやすい反面、CSSで装飾されてないとユーザーが読みにくいんですよぉ。。人の見やすさも検索エンジンはCSSやJsでみてるのはモバイルフレンドリーでも解りますよねっ。

HTMLタグ<div><span><p>やクラス属性をつけた要素は、CSSで装飾できます。「タグ内のテキストの範囲」を装飾する時にHTMLタグはCSSで「セレクタ」になるって解って頂けましたかぁ!?

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

装飾すると自ブログに個性を出したりユーザーさんが見やすく感じたりしますよねっ。「下手にやり過ぎちゃうと・・・w」困っちゃいますけどね・・

ポイント!
  1. HTMLタグ名(要素)は「CSSのセレクタ」になる
    装飾したい「該当の場所」選ぶのでSelector「セレクタ」
  2. 自分でカスタマイズするならHTMLタグにクラス属性をつけて自分で名前を決めて作ればいい!
  3. HTMLタグ名とCSSのセレクタは骨組みと装飾の違いだけ
  4. 仲間と言うより同一人物『同一箇所』にしないと反映しない

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

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

タグで囲まれた範囲って何!?ってなりますよねっ。テキスト回りぐるりこんな感じで装飾するためにつけるタグがCSSのセレクタになります。

タイプセレクタ
h1やdiv、pやspanを<>で囲ったものを装飾するセレクタ
クラスセレクタ
クラス属性を付けたタグに囲まれた「テキスト範囲を装飾」する事ができるセレクタで、各ページに複数使える

初心者がカスタマイズするには、HTMLタグ内にクラス属性『class=』を付けてクラス名『”name”』を付けるのがCSSで装飾しやすいですし、扱いやすいので個人的に推奨します!

クラス名がカブってなければ優先順位を考えなくても良いですしねっ。クラス名を付ける時は、半角英数字で頭に数字は入れないでください。

「CSSが反映しない。。(。´・ω・)?」って事になりかねないですからっ♪

補足ポイント
  • div、pやspanの場合は、クラス属性付けてカスタマイズするのがおすすめ!
  • 優先順位があっておなじクラス名を付けたら下に書いたものが有効になる。
  • ファイルは上から順番に読み込まれ下に書いたものが上書きする仕組み
  • おなじクラス名を使わずカスタマイズすれば良い!

LINK初心者のCSSが反映されない原因の1つ!優先順位の詳細度とは

LINKCSSの基本、class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定方法と優先順位

着いてこれてますかぁ?解りにくいと感じるかも知れませんけど、指定した場所が一致してないと装飾「できない=反映しない」って事です。

HTMLの実際の要素を見てみたい!

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

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

要素の検証でHTMLを全て表示

そうすれば該当ページのHTMLが全部見えるので、参考になるし面白いですよっ。

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

 さいごに

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

素人の反映しないのは、HTMLタグとCSSのセレクタがあってない場合もありますよっ。キャッシュを切ったりシークレットウィンドーで解決する事もあったりと。。まぁ色々と失敗しましたよぉ!

HTMLタグにクラス属性をつけてCSSのセレクタを一致させてカスタマイズが楽しくなったら良いですよねっ!

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

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

それではカスタマイズを楽しんでくださいっ、かうたっくでした(^^♪

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー