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

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

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

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

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

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

デベロッパーツール入門

目次

  • 1 目次
  • 2 新しいclass, idの追加
    • 2.1 選択したタグにclassを設定
    • 2.2 設定したclassにcssを適用
  • 3 “その時だけ確認”用のelement.style
  • 4 CSSの優先順位も一発でわかる

目次

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

ここからはより実践的なデベロッパーツールの使い方をご紹介します。
デベロッパーツールの強力なCSSデバッグ。この機能を使いこなせるようになり、CSSをデベロッパーツールを使って確認&制作していくとかなり効率的に簡単に組めると思います。

サンプルサイトを用意しました:
デベロッパーツール用sample site

dev5_1-2

新しいclass, idの追加

今までは既にあるセレクタに「プロパティ」や「値」を追加していました。今度は新しくclassやidを追加し、追加したclass, idにCSSを適用させます。

サンプルサイトの画像の位置をデベロッパーツールで選択します。
dev5_2-8

選択したタグにclassを設定

このpタグにclassを追加しましょう。
pタグが選択されている青い状態でpタグの上で右クリック→「Add attribute」
もしくはpタグが選択されたまま「エンター」
dev5_3

このような状態になりました。
dev5_4-3

class名は[special]にします。
そのまま、直に「class=”special”」と打ちます。
dev5_5-4

書き終えたらエンターで確定するとclassが追加されました。
dev5_6-3

設定したclassにcssを適用

このclass「special」にcssを追加します。

pタグを選択した状態でcssエリアにある「+」ボタンを押します。
dev5_7-11

このように追加されました。
dev5_8-4

わかりやすいようにセレクタの不要な部分を消して「p.special」にします。
dev5_9-3

あとはここに今までと同じようにプロパティと値を追加します。
背景色、文字色、余白などを追加してみました。
dev5_10-5

idの場合は上記のclassのやり方をそのままidに変えるだけでOK!

“その時だけ確認”用のelement.style

「CSSを変更した場合、どうなるかとりあえず今だけ確認したい」
といった時は「elements.style」を活用します。

CSSエリアの一番上に「elements.style」と書かれているのがわかると思います。
dev5_11-3

ここに何かプロパティを追加します。
すると、もともと設定していたCSSよりも優先され反映されました。
dev5_12-17

このようにもともと設定されているCSSを上書きして「わざわざclassやidを作らずちょっと確認してみたい」時に使えます。
例えば、「もう少しだけ余白をつけてみようか」「周りの色が赤いからこのエリアの色はもう少し落としたトーンだとどうだろう」といった”テスト”として有効活用できるでしょう。

CSSの優先順位も一発でわかる

今の流れでもうおわかりかと思いますが、適用されるCSSの優先順位が一発でわかります。
dev5_13-8

上に表示されているCSSが優先されるため、同じプロパティが存在する場合は画像のように取り消し線が入り、「このプロパティは無効ですよ」というのを知らせてくれます。
これが目視だと自分で見て確認しないといけないので、かなり大変ですよね。

下の方まで「効いているCSS」を見てみると、色々なプロパティが設定されは無効になっていたりして結構興味深いです。
dev5_14-3

色々なサイトのこういった優先されているCSSをみたりして「どのCSSが効いているんだろう」とか考えると制作の背景が見えて面白いと思います。

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

Filed Under: デベロッパーツール入門 関連タグ:css, HTML

池田祐太郎

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

この記事と関連する記事

CSSを1行ごとに整形する作業をChatGPTにしてもらう
2023年8月9日
タグ: ChatGPT, css
カテゴリー: TIPS
8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  5. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  6. WordPress で PHP エラーメッセージを非表示にしたい時

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress保守あるある:プラグインを更新したらエラー表示
  • WordPressのアップデートはどのタイミングで行うのが正解か
  • 同一ページでMW WP Formのフォームを切り替える方法
  • WordPressの不要なプラグインは残していいのか、それとも削除したほうがいいのか
  • WordPressの自動&定期バックアップをプラグインで簡単に設定する

カテゴリー

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

タグ

ai Android ChatGPT CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP Photoshop php SEO SNS ssh Sublime Text UpdraftPlus Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 効率化 最適化

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2023 high five create All rights reserved.