Chromeの「要素の検証」で直接HTML等を編集出来る機能がすごいです。

ねこぎじです。

Chromeの「要素の検証」で直接HTML等を編集出来る機能について書いてみます。

なお、過去の記事も参照ください。要素の検証について概要を説明しています。

FC2ブログのカスタマイズにChromeの「要素を検証」という機能が便利です(^o^)丿

ブログの表示が遅くなっている理由をChromeの「要素の検証」機能で調査しました。

Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿

Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿”>Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿で、解説した「要素の検証」機能を利用すると、いま表示しているWebサイトを編集することが出来ます。

ねこぎじも、へ?っと思ったのもです。

たとえば、「Edit as HTML」で、あるDIVの要素をごっそり削除すると、削除された要素が「消えてしまう」のです。

 

要素の編集マウス右クリック

では、ねこぎじのこのブログで実際に操作してみます。

その1 → このブログのメニューバー(リンクボタン)を消してみたいと思います。

まず、メニューバーの要素を選択します。

画面が消える1

その2

マウスの右クリックで「Edit as HTML」を選択

消える2

その3

HTML編集モードに突入!!(^O^)ノ

消える3

その4

li要素をごっそり選択!(^O^)ノ

消える4

その5

そのままごっそり削除します。(^O^)ノ

消える5

その6

メニューバーは消滅しました。d(-_-)ビシッ

消える6

その7 

再表示を行うと、やっぱり削除されていませんでした。

消える7

なんちゃって(^O^)ノ

実は、編集というのは、ブログの元データというこのブログの作者 ねこぎじのブログデータそのものを削除(編集)した訳ではないのですね。

あくまでも、自分の目の前にあるパソコンにダウンロードされたHTMLデータを自分のパソコン上のメモリ内で、編集しているのです。

ですので、そのまま自分のパソコンにサイトを保存しブラウザで表示すると、メニューバーが消えてしまったサイトを表示することが出来ます。

消える8

このように、パソコン上で皆様が見ているサイトはFC2のサーバーからブログのHTMLとCSSがパソコンのメモリ上にダウンロードされて表示されているだけなのです。

この意味でいえば、サーバーのデータを直接覗いている訳ではないということです。

このChromeの要素を検証という機能はあくまでも自分のPC上にあるHTMLを参照&編集しているだけなのです。

ですから、参照している元のブログなりサイトなりには影響が無いと言えるでしょう。

さて、この機能。上手に使えばHTMLとCSSのテクニックを分析することが出来るわけです。

ただし、昨今はWordPress等のCMSと呼ばれるフレームワークのようなシステムでサイト構築されています。このWordPressはPHPという言語によって、構築されています。

PHP言語上でHTMLを吐き出されたものを、見ているというケース増えています。とはいえ、作られたHTMLを見ることもテクニック上達には必要だと思っています。

何事も、上達するには達人のテクニックを学ぶことが大切だと信じています。

ところで、ねこぎじも持っているホームページビルダー16がバーッジョンアップしてVer17が発売されたとジャストシステムからメールが来ました。

特筆する機能はWordPressのテンプレートを編集できるようです。
※ WordPressビュー 見たままの画面(WYSIWYG画面)でページ編集 こういう機能が搭載さたそうです。

かなり気になります。ねこぎじは実は!! ホームページビルダーを使いこなせてないのです(´・ω・`)

機能は豊富すぎて、自分がやりたいことを、どのように実現してよいかに手間を食ってしまい結局は直接HTML編集するという旧態然な作業をしていました。それと今はWordPressというCMSを利用していますので新しいサイト&blogはこれで作業しています。

ここに「見たままの画面(WYSIWYG画面)でページ編集」が出来るとなればありがたいですね。それとホームページビルダーのGUIがもっと扱い易い画面構成になってくれたらありがたいですね。

ホームページ・ビルダー17 バージョンアップ版 ホームページ・ビルダー17 バージョンアップ版
(2012/10/05)
Windows

商品詳細を見る

それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です