WEB

ブラウザ上でWEBコードの確認方法を紹介

今回はSafariとChromeのブラウザでコードの確認方法を紹介します。

webデザインのブラウザ上でのコード確認は結構必要ですよね。

特に学習段階などでのチェックやブラウザ上コードがでちゃんと表示されているかの
チェックには大事な作業になります。

Safariのコード確認方法

 

Safariでコードを確認する方法を紹介していきます。

 

STEP1

Safariの環境設定詳細からメニューバーに開発メニューを表示をクリック

 

 

STEP2

TOPバーに開発が出てきましたのでクリックして要素選択を開始をクリック

 

 

STEP3

要素選択をするとページの各場所を選択してその箇所のコードを表示できます、右にスタイル「CSS」が表示されます

 

 

POINT

レスポンシブモードでタブレット、スマホサイズの確認をすることが出来ますのでやってみてください。

 

 

 

 

Chromeのコード確認方法

 

それでは次はChromeの確認方法になります。

 

POINT

Chromeでコードを検索する場合は右クリックで検証を選択してください、ページ全体のコードを見るだけの場合はページのソースを表示を選択してください

 

 

 

POINT

検証を選択するとページの各場所を選択してその箇所のコードを表示できます、右上にコード(HTMLなど)右下にスタイル「CSS」が表示されます

 

 

POINT

タブレット、スマホサイズ(レスポンシブサイズ)の確認をすることが出来ますのでやってみてください。今回はスマホのマークがありますのでそちらをクリックしてください

 

 

まとめ

 

今回はよく使うSafariとChromeのブラウザで自分の作成したページのコード などの確認をするための方法を紹介させていただきました。

ドリームウィーバーでのブラウザ確認でブラウザに飛んでからの話しでした。

勉強仕立ての方などは上手く利用して見てください。

 

ありがとうございました。


ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-WEB

© 2021 TSUTAERU BLOG