Real-Time HTML Editor
状態:-
閲覧数:2,018
投稿日:2017-12-27
更新日:2018-01-16
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