Chromeを使いHTMLやCSSをブラウザ内で編集して作業効率UP!

0
76

Google Chrome Developer Tools css

ウェブ作成者は知っておくと、とっても便利な情報。

ブラウザでHTMLが直接編集できてしまう方法をご紹介します。

デベロッパーツールを開くショートカットキー

Mac:【 Command + Option + I 】

Windows:【 Control + Shift + I】

画面左がHTML、右がCSSになります。

Chrome html css5

まずは編集したい場所を選択します。

画面左下の【虫眼鏡のアイコン】をクリック

Chrome html css6

マウスポインタを編集したい部分の上に当てると

DIVタグが範囲指定できます。

Chrome html css3

DIVタグの範囲が選択されるとソース内部も同時にハイライトされます。

ハイライトされた箇所を右クリックで選択すると、コンテキストメニューが出るので

【Edit as HTML】をクリックします。

Chrome html css4

なんと、ソースの編集を直接、ブラウザ内で行うことが出来るのです。

擬似的ではありますが、その場でソースの書き換えができます。

Chrome html css7

試しにテキストを変更してみました(´・ω・`)

Chrome html css8

HTMLを編集すると編集内容が反映されます。

Chrome html css1

ブラウザで編集が終わったらソースをそのままコピーして

ファイルにコピペで更新作業完了。

DWなどのソフトを立ち上げるまでもなく、編集できちゃいますね(^^)

コメントを書く

必須項目をご入力ください
必須項目をご入力ください