2ch PC スマホ iPhone Android WindowsPhone ガラケー ガジェット ニュース 壁紙

サイト運営に役立つクロームのデベロッパーツール

デベロッパーツールを使ってサイト運営を楽にする方法

今回は、デベロッパーツールを使ってサイト運営を楽にする方法について書いていきます。 ※わたしは文系でプログラムとは無縁のため、プログラマなどからすると初歩の初歩的なレベルの説明となります。

 

Webブラウザーには、各々デベロッパーツールが準備されています。ブラウザを開いてF12キーを押せば出てきます(Macの場合、Command+Option+Iキー)。

 

Chromeの場合、サイトを開いて右クリックし「要素を検証」でも開けます。以下、わたしが使っていて、巷の評判も高いChromeのデベロッパーツールの活用について説明していきます。



どう役に立つのか?

サイト運営で、デベロッパーツールがどのように役に立つのかというと…

 

  • 1.HTML要素を書き換えてプレビューできる
  • 2.要素に適用されているCSSの確認と編集・プレビューができる
  • 3.デバイスごとの表示を確認できる

 

…この他にも、JavaScriptの検証や、読み込み速度の改善などにも使えるようですが…今回は、この3点に絞って説明していきます。

 

1.HTMLの編集

たとえば、このようなページを…

8850036cccf9d26a9bed3fe85722261e サイト運営に役立つクロームのデベロッパーツール

 

このように書き換えることができます。

83a17a248d5880515dc94e90ccda6a77 サイト運営に役立つクロームのデベロッパーツール

 

<h3></h3>を<p></p>に書き換えて、【】を書き足しています。ブログツールでこれと同じことをやろうとすると、保存→プレビューとかなりの手間がかかりますが、デベロッパーツールなら即座に書換え・検証ができます。要素の入替えもマウス操作でできてしまうのが便利。

 

広告収益レポートの数字を書き換えて、こんなに俺は稼いでいるんだぜっドヤッとやっているサイト管理人なんかもいるとかいないとか…(スクリーンキャプチャーは簡単に捏造できてしまう)

 

2.CSSの編集

HTMLと同じような要領で、CSSスタイルも編集することができます。

 

左にあるElementsで要素を選び、右のStylesの部分で確認・編集ができます。

99c3ccb62195e9f7a06012a04874b598 サイト運営に役立つクロームのデベロッパーツール

 

widthのピクセル数なんかも簡単にいじれますので、フォントサイズの調整なんかにはもってこい。わたしはスタイルシートの編集は、デベロッパーツールで調整しています。

 

3.デバイスごとの検証

最近では、PC用のデザインと、SP(スマホ)用のデザインを変えるのが主流です。PCでスタイルを編集して、スマホで確認…なんてことをやっている人も多いかもしれません。

 

が、ChromeのデベロッパーツールならPCからSP画面を開くことができます。Elemennts横にあるスマホの形をしたボタンを押して、上のDeviceってところでデバイスを選んで、F5キーで再読み込みをすると…

 

a73bdf3e5b31eb489a2bb9c6e3a000ad サイト運営に役立つクロームのデベロッパーツール

 

こんな感じでスマホデザインをプレビューすることができます。androidは持ってるけど、iPhoneは持っていないって場合にも使えます。タブレット表示も確認できるのがうれしい。

 

他にもChromeのデベロッパーツールには様々な機能があるので、以下の記事などを見て確認してみてください。

 

 サイト運営に役立つクロームのデベロッパーツール Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 – Build Insider




関連記事

Related Posts Plugin for WordPress, Blogger...

オススメ記事

副管理人募集

文章書いて金稼ぎたい人募集。ネタはガジェット、政治、経済、法律、貧困、歴史、教育、社会問題、音楽、文学など。ノルマは特に無いので気が向いた時だけ書いてくれればOK。希望者はメールフォームから問い合わせてください。条件を聞くだけでも構いませんので気軽にどうぞ。

コメント

  • トラックバックは利用できません。
  • コメント (0)
  1. この記事へのコメントはありません。

広告

おすすめサイト:Freemake YouTube ダウンロードソフト

 



画像RSS





カテゴリー

ブログパーツ

アクセスランキング
ページ上部へ戻る