HTMLオンライン実行環境リアルタイム ／ HTML Instant

HTML Instant を選択した理由

すぐに開始可能
・プロジェクト作成したりする必要はない
・アカウント作成も不要

広告
・非表示

変更結果
・リアルタイムに表示反映

背景
・白色
・プログラミング系のエディタは黒系背景色が多い
・動作表示確認するため、いちいち白色へ背景色を指定し直すのは面倒

表示幅
・簡単にドラッグで変更可能

動作確認コード例

<form>

  <div style="display: flex;">

    <label style="word-break: keep-all;">項目</label>

    <div style="width:100%;">          

      <input type="text" value="フォーム入力項目" style="width:100%;">   

    </div>

   </div>

 </form>

CSS指定可能

下記のように書いたけれども、内部CSS指定可能

<style>

  header{

    margin:20px;

    height:525px;

    padding:5px;

    background-color: GREEN;

  }

  main{

    margin:50px;

    width:900px;

    height:100px;

    padding:10px;

    background-color: GRAY;

  }

  #red{

    float:left;

    width:50px;

    height:50px;

    background-color:RED;

  }  

  #blue{

    position:static;

    float:left;

    width:800px;

    height:50px;

    background-color: BLUE;

  }

</style>



<header></header>

<main>

  <p id="red"></p>

  <div id="blue"></div>

</main>

下記でも良いかも
・matthias-schuetz/HTMLiveCode: A browser-based editor for real-time HTML/CSS/JS prototyping

JSFiddle

CSS
・使用可

変更結果
・リアルタイムに表示されない

表示させるためには？
・左上にある「Run」テキストクリックが必要