該当HTMLを囲む親要素・属性を付けて、範囲指定して装飾する書き方！

HTMLとCSSの基本

2017.06.16

headerタイトル、記事部分、asideサイドバー、footerのシンプルなHTMLタグ特有のHTMLタグを囲む『親要素』。またタグ内に『属性』を一緒に付けて、指定範囲のみスタイルを指定してましょう＾＾

第1回のWindowsでHTML・CSSの練習として、テキストエディタで書いたHTMLを自分で作ってブラウザで表示させる方法を独学で勉強をはじめたい人用ページ。チャレンジして、親要素・属性の付け方を練習してみましょう＾＾

LINKHTMLをブラウザで表示してWindowsで勉強！HTMLファイルのカスタマイズ・CSSを読み込む方法

HTMLに親要素を付けると、装飾範囲を指定できる
1. 自分でHTMLに親要素を書いてみる

HTMLに親要素を付けると、装飾範囲を指定できる

該当の場所だけ反映するスタイルをCSSで指定すれば、そこ特有の装飾が指定できます。

LINK初心者に説明！HTMLタグとCSSの関係

装飾したいHTMLタグを囲むように親要素を指定すれば、記事部分のみ反映！

LINKCSSの指定！HTMLタグの親・子孫要素を知れば装飾が反映するよ

また既存のHTMLタグに属性を追加（後述）しても同様、該当部分のみ反映するのでかなり便利です。

親要素や属性で範囲をきめなければどうなるでしょう！？

親要素・属性をつけなければ
- 例）ナビのリストを横並びにスタイル指定した。
  - 本文・サイドバーにあるリストまで横並びになる
- 本文・サイドバーのリストに装飾したつもりが
  - ナビのリストまで反映される
- 思った通りのスタイルにならない

装飾を分けたいHTMLタグに、

親要素を付けたり、
特有の属性<div id=”hoge” class=”geho”>を付けることで

思い通りの場所だけ、スタイルが反映するわけです。

自分でHTMLに親要素を書いてみる

HTMLをブラウザで表示した例

このようにHTMLタグを書いたものをブラウザで表示した例で実装していきましょう。表示されている、header・main・side・footerの4つ。各部分を囲む親要素を指定します。

実際練習する際は、HTMLファイルをブラウザで表示しながらカスタマイズするコードを参考に親要素を付けるスタイルが反映する方法をサクッと試すと分かりやすいです。※初心者向けHTMLとCSSの練習になるので、オススメ＾＾

headerに親要素を付ける！HTMLの追加する書き方

上記画像の4種類を分けて、親要素を付けていきます。

<body>
    <header>
        <h1>Page Title</h1>
        <nav>
            <ul class="">
                <li>home</li>
                <li>site</li>
                <li>profile</li>
            </ul>
        </nav>
    </header>
    <article>
        <h1>独学でHTMLの勉強をしてみよう</h1>
        <div class="">
            <p>今日は独自でHTMLをお勉強します。参考にするページは<a href="https://bibabosi-rizumu.com">ビバ★りずむ</a>です。</p>
        </div> <!-- 本文 -->   
    </article>
    <aside class="side">
        <p>ここは本文とは別になります。サイドサイドサイドサイド</p>
    </aside> <!-- .side -->
    
    <footer>
        <small>Copyright &copy;2017 <a href="#" class="cory">Blog Title</a> All Rights Reserved.</small>
    </footer>
</body>

上記2～1行目、headerに親要素を追加してみますね。

    <header>
        <h1>Page Title</h1>
        <nav>
            <ul class="">
                <li>home</li>
                <li>site</li>
                <li>profile</li>
            </ul>
        </nav>
    </header>

これは記事内にある『ページタイトル』と『ナビゲーション』が入ってるheaderです。改行が必ず必要になるdivと言うタグを使って追加していきます。※階層化させたら、どれが親要素かわかりやすいので階層化させてます。

次の1行目と最終行にタグを追加！

<div class="header">
    <header>
        <h1>Page Title</h1>
        <nav>
            <ul class="">
                <li>home</li>
                <li>site</li>
                <li>profile</li>
            </ul>
        </nav>
    </header>
</div> <!-- .header -->

<div class="header">という親要素に囲まれた <header>が入ったので、3～10行目のスタイルだけに反映できます。

class=”header”　の子要素　h1タグ
- .header h1 { ココにstyleを書く }
- 記事内のh1タグ（記事タイトル）に影響が出ない！

まはナビゲーション部分のリストも同じ。

h1タグと兄弟要素になる、ナビゲーションのリストタグ
- .headerと、ナビを指定すれば、ヘッダー内のナビのみ反映
  - 記事内やサイドのリストには反映しないから便利！

このように親要素を指定行けば、細かいカスタマイズが可能です。

HTMLに属性を追加指定できる

上述<div class="header">内に属性class="header"を追加しましたけど、他にid=""を指定することも可能です。

<div id="header">

idとclassと言う属性を付けて、複数属性の値も入れられます。

<div id="header" class="site-header header-block">

カスタマイズをガッツリしていくと、classよりスタイルが強いidを使用したい場合が出てきます。

LINKCSSセレクタ指定方法！HTMLタグのid・classなど優先順位を説明

LINK初心者に、CSSの優先順位をザッと説明

またclass名である緑色で示した値”site-header header-block“もあると便利につかえるので、このような書き方もある。と覚えていると良いですね＾＾

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

タグに親要素&子要素に属性を追加！装飾できる範囲指定について

上記のheader内ナビと同じように親要素を追加。さらに属性を追加する例をチェックしてみましょう。

ナビゲーションのどの範囲をカスタマイズしたいかによって、CSSで指定できる範囲が限定してより細かい装飾ができるので、装飾範囲の指定方法として、例を紹介しますね！

複数の子要素に親要素をつける例

次にarticleタグに囲まれたh1タイトルに親要素を付け記事タイトルのみ反映させるように親要素を追加します。同時に記事本文だけ装飾ができるように、親要素をつけてみましょう＾＾

<article>
    <h1>独学でHTMLの勉強をしてみよう</h1>
    <div class="">
        <p>今日は独自でHTMLをお勉強します。参考にするページは<a href="https://bibabosi-rizumu.com">ビバ★りずむ</a>です。</p>
    </div> <!-- 本文 -->   
</article>

上記のシンプルなタグに親要素を追加した例。

<article>
    <div class="entry-title">
        <h1>独学でHTMLの勉強をしてみよう</h1>
    </div> <!-- .entry-title -->  
    <div class="entry-post">
        <p>今日は独自でHTMLをお勉強します。参考にするページは<a href="https://bibabosi-rizumu.com">ビバ★りずむ</a>です。</p>
    </div> <!-- .entry-post -->   
</article>

さらにカスタマイズが進んで、さらに指定が欲しいときは、記事タイトルentry-title2、4行目。と記事entry-postの親要素5、7行目のように、親要素を付けたい場合も出てきます。

<article>
    <div id="post">
        <div class="entry-title">
            <h1>独学でHTMLの勉強をしてみよう</h1>
        </div> <!-- .entry-title -->
        <div class="entry-post">
            <p>今日は独自でHTMLをお勉強します。参考にするページは<a href="https://bibabosi-rizumu.com">ビバ★りずむ</a>です。</p>
        </div> <!-- .entry-post -->
    </div> <!-- #post -->
</article>

これを自作するときインデントを多少付けたら、階層化できるので、何がどのdivかをコメントで表すと見やすくなりますよ。

WordPressの記事部分の親要素を追加する方法

WordPressというブログもありますが、これはHTMLにphpというプログラムを書き込めるブログツールです。この場合も同じように追加することができます。

ですが記事コンテンツ部分の出力が1行になっている場合が多々あります。その追加方法をみれば、分かりやすさも倍増するかもしれません＾＾

WordPressに興味があれば、どうぞ～

LINKWordPressでコンテンツのみの親要素を作る！カスタマイズした装飾を本文以外、反映させない方法

タグ自体に属性を付けたい場合

<aside id="side">
    <p>ここは本文とは別になります。サイドサイドサイドサイド</p>
</aside> <!-- #side -->

このように<aside id=”side”>もちろん<nav id=”side” class=”sider”>でもOK！値は半角ローマ字から始まるhoge-geho特有のもので、分かりやすい文字を入れてください。

この場合、#side を指定すると、ガッツリ反映します（スタイルの優先順位が高い）。小さいカスタマイズのときは、こうやって属性を付けても便利だし、pタグの上下をかこむ親要素を作ってもいいです。

<nav id=”side” class=”sider”>の.siderで指定しても良いかも＾＾

巨大なasideになりそうなら、優先順位の強い指定をしてると、後で面倒になったりします。CSSで弱い指定方法しても同じです。

タグ自体に属性を複数付けることも可能

例えばナビのリストに、カラー指定やfontの太さの指定などそれぞれ違った表示にしたい場合に便利！属性を複数付けてみますね。

<nav>
    <ul>
        <li class="color font-weight">home</li>
        <li class="blue">site</li>
        <li class="color">profile</li>
    </ul>
</nav>