*

WordPress制作に必要なWebブラウザをインストールしましょう!

目的
どのような環境でも見えるサイトづくりのため複数のウェブブラウザをインストールします。
読書時間
10分くらい
難易度
目次
1. メジャーなブラウザは、全部インストール
2. ブラウザにウェブ制作に必要な機能を追加

Webブラウザという言葉が?ハテナの方も多いと思います。
インターネットでサイトを閲覧するときに使っているソフトです。

Windowsでは、マイクロソフト Internet Exproler(インターネットエクスプローラー、IE)が有名ですね。
最近では、CMでお馴染みの Google Chrome(クロム)がシェアを伸ばしています。

Macでは、Apple社製の Safari(サファリ)が元々インストールされています。

メジャーなブラウザは、全部インストール

ウェブブラウザによって、サイトの表示が崩れることがありますので、
各ブラウザを使って確認が必要になります。
必ずこれから紹介するブラウザはインストールしておいてください。

Windowsには、IE、Macには、Safariがインストール済のため
その他のものは、各サイトからダウンロードしてインストールしてくださいね。

Firefox(ファイアーフォックス)

次世代ブラウザ Firefox 高速・安全・カスタマイズ自在な無料ブラウザ
アドオンという追加機能が出来、
使いやすくカスタマイズ出来ます。
Firefox ダウンロード

Google Chrome(グーグルクロム)

Chrome ブラウザ
ウェブ閲覧最速と言われています。
機能の追加はもちろん可能で、
Googleのサービスとの相性は抜群です。
読み方に注意!チャームではないですクロムです。
Google Chrome

ブラウザにウェブ制作に必要な機能を追加

ウェブブラウザをインストールしたら、
ウェブ開発に便利な機能を追加しましょう。

Web製作者に大人気の虫をFirefoxに入れます。

虫の名前は、「Firebug」です。
これを使うことによって、html、CSSのチェックが簡単に出来るようになります。
自分のサイトは、もちろん。他のサイトもどういったCSSで書かれているか調べることが出来ます。

Firefoxのアドオン(機能追加)で、インストールが出来ます。

firefoxを立ちあげて、「firebugアドオン」へアクセスすると、「+Firefoxに追加」が表示されますので、クリックするとインストールされます。
Firebug __ Add-ons for Firefox

インストールが完了するとFirefoxの画面右上に虫のマークが表示されます。
firebugのアイコン

クリックすると画面の下に、htmlとCSSが表示されます。
firebug使い方

例えばタイトルの文字を小さくしたら、
もう少し小さいのを試したいとしたら、
右下のCSSをクリックして、編集するとすぐに画面上で反映されます。
プレビューですので、実際にサイトのデータが変更される訳ではありません。

実際に反映させる場合には、
FirebugのCSS欄には、ドキュメント名前(例:style.cssなど)と行数が書いてあるので、
サーバー上のCSSを変更して保存して
サイトへ反映させます。

Google Chromeにもfirebugを入れます。

「Firebug lite for Google Chrome」という名前です。
Firefoxと同じ機能では無いのですが、
必要十分な機能がついています。
Chromeを立ちあげて、Chrome Storeから「Firebug lite for Google Chrome」インストール出来ます。
Chrome ウェブストア - Firebug Lite for Google Chrome™

今回のまとめ

Webブラウザは、ブラウザによって表示が異なる場合がありますので、
表示チェック用に今回紹介したブラウザは
必ずインストールしてください。

マイクロソフトのIEは、表示チェックに使用するくらいにし、
Firebugが使えるFirefoxやChromeを使用することで、
作業効率を上げることが出来ます。

参照サイト

Firebugの使い方について分かりやすく書かれているサイトです。
意外と知られていない機能が多い!?Firebugの使い方 | THE HAM MEDIA BLOG
Firebugの基本的な使い方について | BALLOG

記事が気になったらSNSでチェックしてくださいね

  • follow us in feedly
  • このエントリーをはてなブックマークに追加

いいね!でWordPress最新情報が手に入ります

関連記事

XAMPPでWordPress環境作りは面倒だ!BitNamiで構築は簡単・便利・早い!

ワードプレスを構築するには、 サーバーを借りる必要があります。 これから、勉強でWo

記事を読む

知らなきゃ損する!WordPress構築の超定番3つの無料アプリを紹介

WordPress構築に立ち向かって、 攻略していくためには、 まずは武器が必要です! 構

記事を読む

WordPress 使い方!最低限の知っておくべき管理画面の7つの機能!

WordPressの管理画面は、どのようになっているのでしょうか? 大きく分けると、2つの

記事を読む

高品質なWordPressテーマ

横文字クールなテーマには要注意!WordPressのテーマを選ぶ5つのステップ

WordPressの構築で、 無駄に時間を費やしてしまうものに テーマの選択があります。

記事を読む

ちょっと待った!ドメイン名をつける前に確認する3つポイント

ドメイン名は、世界に1つだけの名前です。 一度決めたら、その会社またはサービスが続く限りは 変更

記事を読む

WordPressとは? 始める前に知っておくべき10個の質問

Webの広い世界のなかで、 WordPressという選択し勉強を始める前に、 知っておく

記事を読む

初めてWordPressを使う方にもわかりやすく解説していきます

話題に上がることが多くなったWordPress。 WordPressを導入すると、

記事を読む

ファイル構成はカンタンだ

【保存版】WordPressのテンプレート名称と優先順のまとめてみた

WordPressのファイルテーマ構成を理解することで、 テーマのカスタマイズが出来るようになりま

記事を読む

初めてでも出来る世界で1つだけのドメインを取得する方法

ドメインはインターネット上の住所 インターネット上にウェブサイトを作成するには、 必ずドメイ

記事を読む

page-template

固定ページを内容によってデザインを変更する方法

作成した固定ページによっては、 デザインを変更したい場合があります。 会社紹介サイトで、

記事を読む

コメントを残す

https_image
安くなったSSL証明書 全サイトを暗号化する時代がやってきた

2014年8月にGoogleが「HTTPSをランキングシグナル

残念な年賀状
アップロードしたサムネイル画像を一括でリサイズしてくれるありがたいプラグイン

新しくテーマを変更したら、 サムネイル画像の人がやせ細ってしましまし

記事投稿を簡単にする方法
コピペで出来る!蛍光マーカーや赤文字ボタンを作成して記事を簡単に装飾する方法

記事を書くのを少しでも楽にする方法を紹介 記事を書くときは、出来るだ

web素材が無料
高品質なウェブ素材が無料「ShanaBrian Website」

Webサイト構築ですぐに使える素材が ひと通り揃っています。

無料のイラスト・かわいいテンプレート 素材ライブラリー
イラスト無料の「素材ライブラリー.com」

全ての質の高いイラストが揃っていて、 PNGやJPGだけでな

→もっと見る

  • follow us in feedly
PAGE TOP ↑