• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / デベロッパーツール入門 / 6.確認から制作まで即使えるCSSの機能(2/2)

6.確認から制作まで即使えるCSSの機能(2/2)

池田祐太郎 | 2014年3月4日 公開

デベロッパーツール入門

目次

  • 1 目次
  • 2 :hoverなどの擬似セレクタもリアルタイムで確認
    • 2.1 強制的にhover状態にする
    • 2.2 消えた?ように見えるが実は…
  • 3 作ったCSSはまとめてコピペでOK
  • 4 制作時においてデベロッパーツールの使い方

目次

  1. デベロッパーツールとは何か
  2. デベロッパーツールのメリットとデメリット
  3. デベロッパーツールを使ってみよう
  4. デベロッパーツールでCSSを操作する
  5. 確認から制作まで即使えるCSSの機能(1/2)
  6. 確認から制作まで即使えるCSSの機能(2/2)(現在のページ)
  7. デベロッパーツール応用編
  8. その他のデベロッパーツールの紹介
サンプルサイトを用意しました:
デベロッパーツール用sample site

dev5_1-2

デベロッパーツールのCSS制作続きです。

:hoverなどの擬似セレクタもリアルタイムで確認

前提条件として、CSSのhover擬似セレクタを理解した上でお読みください。

マウスオーバーした際の挙動もデベロッパーツールで確認しましょう。
例として、テキストリンクにマウスが乗った際のCSSをテストします。
フッターのテキストリンクをデベロッパーツールの虫眼鏡ツールで選択します。
dev6_1-6

今はCSSが何も適用されていないためマウスが乗ってもテキストは変わりません。これではユーザーがリンクかどうかの判別がしづらいリンクになってしまっています。ここにCSSを適用させます。

CSSエリアをみると「footer ul li a」というCSSが適用されています。
dev6_2-4

このセレクタのhover擬似セレクタを作成します。前回同様プラスボタンよりセレクタを新規作成。
セレクタ名は「このaタグのマウスが乗っかった場合」なので「footer ul li a:hover」ですね。
dev6_3-3

現在はマウスが乗っかっていないのでグレーになっていますが、構わずプロパティを作成しましょう。
背景が濃いグレー、テキストが白くなるように設定しました。
他のフッターのリンク部分にマウスを乗っけると同じように変わります。
dev6_4-3

ここで確認し、色み等を変えたいときはCSSの値を変更しましょう。
濃い青にしてみました。
dev6_5-2

このようにhoverも難なく確認できることがわかりました。

強制的にhover状態にする

「マウスをのっけない状態でhoverになっているのを視覚的に確認したい」という時は強制的にhover状態にする機能があります。
hover状態にしたいタグを右クリック→「Force Element State」→「hover」で要素がhover状態になります。
dev6_16

消えた?ように見えるが実は…

一つ注意です。デベロッパーツールで別のタグを選択してからまた先ほどのタグを選択すると設定したCSSがなくなっています。
dev6_6-4
dev6_7-6

大丈夫です。よく考えてみると、先ほど設定したのはhover擬似セレクタでしたので「マウスが乗っかったら」でした。
なのでその状態を再現してあげます。
マウスを画面上の対象(今回は「HTMLについて」)の上に置きます。先ほど設定したCSSが反映されているのを確認します。
dev6_8-5

その状態で、キーボードの下や上カーソルでデベロッパーツール上の選択エリアを動かし、さきほどの元のタグに戻します。
すると、先ほど設定したCSSが表示されました。
dev6_9-3

■できない場合は?
カーソルキーで下や上としたときに画面自体が動いてしまう場合や、そもそも何も動かない場合、一度デベロッパーツール側のタグをマウスでクリックしてあげてから上記の作業を行います。そうすればきっとうまくいくはずです。

dev6_10-6

作ったCSSはまとめてコピペでOK

今回と前回でCSSを幾つかつくりました。その作ったCSSを本来のファイルに保存します。
制作したのは
・p.special
・footer ul li a:hover
の2つです。

a:hoverもしくはp.specialを選択している状態でCSSエリアを見ると「inspector-stylesheet」等書かれています。ここをクリックします。
dev6_11-3

すると画面がもともと「Elements」でしたが「Sources」に切り替わりました。
dev6_12-4

ここに一括で保存されています。
まとめてコピーして、本来のCSSファイルに追加して保存すればOKです。

制作時においてデベロッパーツールの使い方

実際の制作時にはHTMLファイルとCSSファイルがあり、人によって作り方はそれぞれですが僕の場合HTMLファイルを作成してからCSSを一気に作りこみます。
HTMLはDreamweaverやSublime text等のエディタを使いますが、CSSはほぼデベロッパーツールだけで制作します。

試しにサンプルサイトのheadタグ内にあるCSSファイルを読み込んでいるlinkタグを消してみましょう。
dev6_13-3
dev6_14-6

素の状態に戻りました。
これからCSSを制作していく、と仮定して直接CSSを追加していきます。

ヘッダー部分だけ、試しになんとなくですがささっとCSSを作った感じだとこのような感じになりました。
dev6_15-5

ちなみにコードは以下です。

#wrap {
    width: 940px;
    margin: auto;
    padding: 0 10px;
    font-size: 0.75em;
    line-height: 1.833em;
}
header h1 {
    padding: 30px 0 40px;
}
header {
    margin-bottom: 40px;
}
header ul {
    border-top: 1px solid #9d9d9d;
    border-bottom: 1px solid #9d9d9d;
    height: 40px;
    padding: 20px 10px;
}
header li {
    float: left;
    width: 200px;
    margin-right: 40px;
}
header li.lastChild {
    margin-right: 0;
}

デベロッパーツールのいいところは、CSS自体のレイアウトをきれいに作ってくれるところです。ソースを見てみたらインデントや改行が整ってなくて見難いファイルという風にはならず、自動的にレイアウトを保ってくれます。ありがたいですね。

このように「ヘッダー」「コンテンツ」「フッター」といった部分ごとにCSSを書いていき、まとまったら一括コピペしてファイルに反映、という感じで行うことにより、リアルタイムにCSSを確認でき、崩れのない状態でファイルに保存することができます。

以上、デベロッパーツールにおいてのCSSの機能のご紹介でした。

  1. デベロッパーツールとは何か
  2. デベロッパーツールのメリットとデメリット
  3. デベロッパーツールを使ってみよう
  4. デベロッパーツールでCSSを操作する
  5. 確認から制作まで即使えるCSSの機能(1/2)
  6. 確認から制作まで即使えるCSSの機能(2/2)(現在のページ)
  7. デベロッパーツール応用編
  8. その他のデベロッパーツールの紹介
メールコンサルティング
WordPress保守管理サービス

カテゴリデベロッパーツール入門 関連タグ:css, HTML

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

見出しやテキストは画像で作ってはいけない
2023年11月21日
タグ: HTML
カテゴリー: 雑感
CSSを1行ごとに整形する作業をChatGPTにしてもらう
2023年8月9日
タグ: ChatGPT, css
カテゴリー: TIPS
8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.