ホームページの特定パーツを指定してCSSでデザイン変更する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ホームページの特定部分だけをデザイン調整したいと考えたことはありませんか?実はホームページやブログやオウンドメディア等どういったウェブサイトを運営してもサイト自体はhtml言語で出来ています。

htmlはハイパーテキストマークアップランゲージの略。カンタンに言えば「文字(テキスト)や画像(イメージ)情報」を検索エンジンがスムーズに読めるようにマークアップするための言語です。

そしてホームページのデザインを整えるのがCSS。CSSはカスケーディングスタイルシートの略。htmlは単純な文字情報なのでCSSで色をつけたり、左右でレイアウトを分けたりと細かな指定が可能です。

つまり、ウェブサイトは基本的にhtmlとCSSによって出来ています。本記事では「htmlをコントロールするCSS」について少しマニアックな技術を解説いたします。CSSは使い方次第で特定のパーツ(htmlの一部)に対してデザインの微調整もできるのでこの機会にぜひ覚えてください。

ホームページの特定パーツを指定してCSSでデザイン変更する方法

今回の記事では2つの変わった指定方法をご紹介いたします。

:first-child
:first-of-type

まだCSSを学んだばかりであれば聞きなれない内容ですよね。これら2つは擬似クラスと言います。

:first-childの使い方

:first-childは「一番はじめ(first)の子(child)要素」を指定する場合に使います。前提としてhtmlにはさまざまなタグが用意されています。そしてタグには「親と子」という大小の考え方があります。

<div class="css-sample-test">
<ul>
<li>あいういえ</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</div>

上記で言うとulliの親です。もし「あいうえお」にCSSを指定する場合は以下となります。

.css-sample-test ul li:first-child {
	color:red;
}

以下が実際のタグにCSSを指定した状態。

  • あいういえ
  • かきくけこ
  • さしすせそ

無事「あいうえお」だけが赤色になっていますね。ただ擬似クラス「:first-child」は少し癖があります。たとえば以下のhtmlでは「たちつてと」にCSSを指定したくても「:first-child」は仕様で指定できません。

<div class="css-sample-look">
<ul>
	<li>あいういえ</li>
	<li>かきくけこ</li>
	<li>さしすせそ</li>
</ul>
<p>たちつてと</p>
<p>なにぬねの</p>
<p>はひふへほ</p>
</div>

さきほどのCSSでpを指定してみます。

.css-sample-look p:first-child {
	color:red;
}

htmlとCSSの表示例

実際の表示例が以下です。最初のpが赤色になっていませんよね。

  • あいういえ
  • かきくけこ
  • さしすせそ

たちつてと

なにぬねの

はひふへほ

CSSがかからない原因はpの直前にulが入っているからです。これが「:first-childの仕様」です。ただhtmlの構造によっては(システム連携の都合等)で「たちつてと」に指定しなくてはならない場面があります。そんなときに使う擬似クラスが「:first-of-type」です。よく似ていますがそれぞれで解釈が異なります。

:first-of-typeの使い方

:first-of-typeはもう少し柔軟に使えます。以下のhtmlで試してみましょう。

<div class="css-sample-check">
<ul>
	<li>あいういえ</li>
	<li>かきくけこ</li>
	<li>さしすせそ</li>
</ul>
<p>たちつてと</p>
<p>なにぬねの</p>
<p>はひふへほ</p>
</div>

そしてCSSが以下です。

.css-sample-check p:first-of-type {
	color:red;
}

htmlとCSSの表示例

実際の反映が下記です。

  • あいういえ
  • かきくけこ
  • さしすせそ

たちつてと

なにぬねの

はひふへほ

無事「たちつてと」だけを指定できました。html構造やシステム連携の状況に合わせて「:first-child」と「:first-of-type」を使い分ければOKです。もしhtml側の変更が可能であれば複雑なhtml構造を避けるのが良いです。もし仮に何かしらの外部システムが入っていてhtml側に手を加えられない場合はCSSで調整しましょう。

まとめ

本日は「:first-child」と「:first-of-type」の使い分け方法について詳しく書きました。以前に別の記事で各プロパティの仕様についても触れていますので併せてご一読くださいませ。CSSでは今回ご紹介した「最初の要素を指定する」以外にも「最後の要素を指定する」等、たくさんの指定方法があるので使い分けましょう。

WordPressでレイアウトをカスタマイズする際に使いたい「CSSで最初の要素」をコントロールする方法

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する