プレビュー画面で確認したい

下記の画像URLはW3Sというサイトからです。
これは左側にコードを入力し、右側でプレビューを確かめます。

https://gyazo.com/eb815ded556b22f59eafb4aec3cc6cbf

下記のサイトのhtmlとcssのコードを入力し、図6-23のような画面が
でるようにしたいのですが、どのようにコードを入力すればいいのでしょうか

https://gyazo.com/d1d2a28d392dc74d2ee93f8e28b34a38

phpsyoshinsya

2018/11/14 08:48

すみませんが情報が不足しています。自分が書いたスクリプトぐらいは、コード定義で公開してください。実装したいが失敗しているところなどは、コメントを付けるなどしてどこが躓いているか、なにを試されたのか、合わせて本文に追記し、追記内容にそのコードを設定してください。

m.ts10806

2018/11/14 09:16 編集

画像は外部サービスではなくteratailのマークダウン機能の画像挿入を利用してください。

m.ts10806

2018/11/14 09:16

先んじて画像確認しましたが、これは「リアルタイムでプレビュー確認したい」のでしょうか、「各要素の明細(対応されたStyleなど）が確認できる画面を見たい」のでしょうか。単に実行確認したいだけならhtml、CSSをきちんと打ってブラウザで確認すれば良いだけですが、1枚目と2枚目の画像がどのように関係しているのかわかりません。

退会済みユーザー

2018/11/14 13:18

具体的にどのようなものをどのようにどんなものを使って実現すればいいのか不明瞭です。質問は編集できますので改善よろしくお願いします。

yoshinavi

2018/11/15 00:55

サービスの使用方法を聞きたいのでしょうか？ヘルプやサポートはどうなのでしょうか？

行動規範の内容に同意します

回答2件

この辺かな？

html
1<style>
2#wrap {
3background-color: gray;
4｝/* 全角になっている */
5#box 1 { /* #boxと1が離れている */
6position: relative;
7background-color: red; 
8margin-bottom: 20px; 
9top 50px /* :と;がない */
101eft: 100px /* leftが1eftになっている　;がない */
11｝/* 全角になっている */
12#box2 {
13background-color: green;
14}
15</style>
16<body>
17<div id="wrap">
18
19<div id="box1">position: relative;</div>
20
21<div id="box2">後続の兄弟要素</div> </div>
22</body>

直したもの

html
1<style>
2#wrap {
3	background-color: gray;
4}
5#box1 {
6	position: relative;
7	background-color: red; 
8	margin-bottom: 20px; 
9	top: 50px;
10	left: 100px;
11}
12#box2 {
13	background-color: green;
14}
15</style>
16<body>
17<div id="wrap">
18	<div id="box1">position: relative;</div>
19	<div id="box2">後続の兄弟要素</div>
20</div>
21</body>