この写真の記事へ

JavaScriptを実行して出力されたHTMLソースを見る方法(画像)(27ページ目)

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

保存ダイアログで「ウェブページ完全」を選択

サンプルスクリプトの実行結果
JavaScriptソースがそのまま見えるだけ
JavaScriptで生成(出力)されたHTMLソースも見えている
望みのページを表示してから……
「F12 開発者ツール」を起動
「DOM Explorer」を選択
JavaScriptで生成(出力)されたHTMLソースも見えている
タグの上で右クリック
コピーをクリック
適当なエディタに貼り付け
ルート要素(タグ)の左隣にある三角をクリック
HTMLツリーが折りたたまれる
コピーを選択
望みのページを表示してから……
デベロッパーツールを起動
「Elements」タブを選択
JavaScriptで生成(出力)されたHTMLソースも見えている
Windows10のMicrosoft Edgeでは「ソースを表示」を選択するだけで「F12 開発者ツール」が起動する
開始タグの上で右クリック
HTMLソースが編集可能状態になる
全体を範囲選択してコピー
保存ダイアログで「ウェブページ完全」を選択して保存
望みのページを表示してから……
全体を範囲選択して……
「選択した部分のソースを表示」をクリック
DOMソースウインドウ内で「名前を付けてページを保存」
保存ダイアログで「ウェブページ完全」を選択
Operaの「開発者ツール」は、Chromeとほぼ同じ
ブラウザ内蔵の解析機能を使えば見える
左:「ページのソースを表示」、右:「選択部分のソースを表示」
IEに搭載されている「F12 開発者ツール」
ChromeのDeveloper Tools
html開始タグを右クリック
メニューから「Copy」を選択

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます