2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

記事投稿キャンペーン 「エンジニア×非エンジニアのコミュニケーション」

画面のここ!直して!って時に使えるDevToolsとCSS

Last updated at Posted at 2023-10-29

背景

オンラインでWebサイトやブラウザで動くシステムのここ、直してほしいんだよなーという時、皆さんはどうしていますか?テキストだけで伝えて「これで伝わるかなあ」と不安になったり、スクショを撮ってペイントで枠を囲ってそれをまたスクショして送ったりしてきました。

やりたいこと

指摘やコメントをしたい要素に赤枠をつけたい
例:投稿するボタン
image.png

環境

Chromeでやってます。

やり方

1.DevToolsを開く

F12を押しましょう。開きます。
image.png

2.要素を選択して検査する

DevToolsの左上、角にあるアイコンをクリックする
image.png

3.枠をつけたい要素を選択する

わかりづらいですが、投稿するボタンを選択しました。
image.png

4.element.styleにCSSを書く

次の3行をコピペしましょう。

border-width: 3px;
border-color: red;
border-style: solid;

image.png

できた!投稿するボタンが赤枠で囲まれました~
ちょっとしたことだけど、ペイント開かなくていいのはだいぶ楽

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?