Webブラウザ上で【CSS】を試せるサイト!【CSS DESK】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「CSS DESK」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・ブラウザ上でCSSを試したい方
・CSSの挙動をチェックしたい方
・HTML/CSSを勉強中の方

「CSS DESK」って何?

「CSS DESK」とは、Webブラウザ上で「HTML」や「CSS」をサクッと試せるサービスのことです。
エディタや環境構築が不要で、ちょっとした動作をチェックしたいときや、新しいコードを試すときに便利です!(いいね!)

http://www.cssdesk.com/

https://osakanav.com/hariten

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

右上のブロックが「HTML」コードの編集ブロックです!(おお!)

2段目にあるのが「CSS」コードの編集ブロックです!

右側は「実行結果」が表示されるところになっており、既にデフォルトコードの結果が表示されています!(ふむふむ…。)

試しにHTMLの編集ブロックに「<div>おさかなです!</div>」と追加してみると…?
こんな感じで結果が反映されました。(おー!)

https://osakanav.com/nomad-code

CSSなど色々といじってみると、なんか可愛い感じになりました!笑

ちなみに右上の「RESET」ボタンを押すと、コードをリセットできます。(なるほど!)

メニューでは、他にも「背景色」を変更できたり…。

「SHARE」から、シェアURLを生成できたりします!(いいね!)

一番右端の「DOWNLOAD」ボタンを押すと、「.html」ファイルとしてソースコードを保存することができるので、そのまま別のサービスに使用できます!(便利!)

ダウンロードしたファイルを開くとこんな感じで、編集内容がきちんと反映されています!(おめでとう🌼)

おさかな
おさかな

ブラウザ上で試せるサービスが増えてきて、便利だね!

ナビまる
ナビまる

運営者さん!ありがとうございます!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

https://osakanav.com/sorted-css-colors

おさかな

文章が書けちゃう、新種のおさかなです。元不登校。紆余曲折あり、現在はフリーライターとして活動中。化粧品検定2級。IT、サブカルチャー、ファッション、コスメ、グルメ、シナリオまで色々書きます。SAOのユウキが好きです!

おさかなをフォローする

タイトルとURLをコピーしました