DevTools

DevToolsとは、ユーザーが表示されているHTMLコードなどを見たり書き換えたりすることができるツールである。(書き換えたデータは外部に送信されません。)

※Webサイトを書き換えた画像をあたかも本物のサイトのように示すことはおやめください。編集者は責任を一切負いません。

使い方

ブラウザによって違うが、大体はブラウザ(拡張機能などは不要)を開いた状態で,F12キーを押すと起動する。

書き換え方

1. DevToolsの「要素」(または「Elements」など)タブが開いていることを確認する。
2. DevToolsの左上の矢印と四角のアイコンをクリック。
3. マウスカーソルをサイトが表示されている場所へ持っていくと、CSSの要素が表示される。要素はクリックで選択できる。
4. 要素を選択すると、DevToolsにその要素と対応しているコードが表示される。
5. 左の三点リーダーのメニューから「HTMLとして編集」(または「Edit as HTML」など)を選択すると編集できる。

例

例としてWikipediaのメインページの「今日の一枚」を変えてみる。選択するとコードは次のようになっているはず。

<img alt="オオワシ" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wiki-oowasi2.jpg/330px-Wiki-oowasi2.jpg" decoding="async" width="300" height="226" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wiki-oowasi2.jpg/500px-Wiki-oowasi2.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wiki-oowasi2.jpg/960px-Wiki-oowasi2.jpg 2x" data-file-width="2000" data-file-height="1504">

それの「/images/」から「.png」までが画像のURLである。これを、Wikipediaのロゴ(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg)に変えると、以下のようになっている。

<img alt="オオワシ" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg" decoding="async" width="300" height="226" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wiki-oowasi2.jpg/500px-Wiki-oowasi2.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wiki-oowasi2.jpg/960px-Wiki-oowasi2.jpg 2x" data-file-width="2000" data-file-height="1504">

どうなるかは…実際にやってみてください！

あとはHTMLの技術しだいで何でも可能。

ソースの見方

1. 「ソース」(または「Sources」など)タブを開く。
2. それぞれのフォルダ内を見る。(ちなみにいじれるものもあります。)