読者です 読者をやめる 読者になる 読者になる

ブルーマン総合研究所

レポートはこまめに取るようポケモンで学んだでしょ!

【気分はハッキング!?】F12キーで開発者ツールを開いてみる

こんにちは、所長です。※メンバーは一人だけ()

 

三が日が終わりますね。🎍

僕はどうもおせち料理が苦手で、餅と肉にしか手を出さない子どもです。笑

 

 

さて、今日はITの話題です。

PCからブラウザ(IEChrome等)さえ開ければ誰でもハッカーになったような気分を味わえるお遊びを紹介します。

 

f:id:blueMountLab:20170102232917p:plain

 

こちらは昨日の自己紹介ページです。

今からこのページをいじって遊んでみます!

 

F12

キーボードの右上を見てください。ありますね。

何これ??

とりあえず押してみましょう。

 

f:id:blueMountLab:20170102234058p:plain

 

うわぁ…

何かイカツイの出てきたよ……

 

右側に現れたのは開発者ツール、という主にページの画面構成確認に使われるサブ画面です。

 

普段僕たちが見ているウェブサイトはHTMLに代表されるマークアップ言語というもので作られています。

コンピュータがマークアップ言語で書かれた設計書(テキスト)を読み込んでページに反映する、というのが大きな流れです。

この開発者ツールには閲覧ページのマークアップ設計書が表示されます

 

つまり、

設計書をいじればページを変更(悪く言えば改ざん)する気分になれます。(気分なので安心してください)

 

では、まずは分かりやすくサイトの色から変えていきましょう!

開発者ツールの右下にという項目があります。その下に

body, html {
‥略‥ 
}

と書かれたものがあります。設計書の一部です。

ここのbodyというのはページ全体のことを指します。(ページ上のバーやタブは除く)

括弧書きの中のbackground-colorと書かれた部分がサイトの背景色を担っています。

background-colorのコロン右をクリックして#fffをredに変えてみましょう。

 

f:id:blueMountLab:20170103093600p:plain

 

血に染められし研究所…

 

といった風に画面の見た目を変更することができます!

続けてタイトルをルーマンからレッドマンへ乗っ取りましょう…()

 

今度は開発者ツールの上側をいじります。またbodyタグを見れると思います。

body配下の<div id="container">という部分があります。このcontainerの中にページの文言や画像が指定されています。

f:id:blueMountLab:20170103100231p:plain

 

containerの中を更に掘り下げていきます。

container ➡ container-inner ➡ blog-title ➡ blog-title-inner ➡ blog-title-content ➡ title

 

すると出てきました。「ブルーマン研究所」の文字が!

 

さぁレッドマンに書き換えます!

f:id:blueMountLab:20170103101028p:plain

 

ページを見ると……

デデン!!

f:id:blueMountLab:20170103101544p:plain

 

いやぁ、乗っ取りましたね~(棒)

 

再度F12を押して開発者ツールを閉じるとなおさら乗っ取った気分に。

f:id:blueMountLab:20170103102748p:plain

 

これセキュリティ上大丈夫なのか、、、

と思った貴方。安心してください。F5で更新してください。

f:id:blueMountLab:20170103103118p:plain

 

元に戻ります。(;´∀`)フーヤレヤレダゼ

 

F12開発者ツールはあくまでページの画面構成確認に使うもので、管理者が直接ページを作成・修正するエディタではありません。

 

今回は遊びとして紹介しましたが、ウェブページを作成する方はデバッグやDOMの確認などに活用されてみると便利かと思います!

 

以上、F12開発者ツールの紹介でした!

 

 

ブログ初心者にしては割と頑張れたかな…?(^。^)y-.。o○