みなさんこんにちは!おさかなです!
今回は「CSS DESK」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・ブラウザ上でCSSを試したい方
・CSSの挙動をチェックしたい方
・HTML/CSSを勉強中の方
・ブラウザ上でCSSを試したい方
・CSSの挙動をチェックしたい方
・HTML/CSSを勉強中の方
「CSS DESK」って何?
「CSS DESK」とは、Webブラウザ上で「HTML」や「CSS」をサクッと試せるサービスのことです。
エディタや環境構築が不要で、ちょっとした動作をチェックしたいときや、新しいコードを試すときに便利です!(いいね!)
Application Error
![](https://osakanav.com/wp-content/uploads/2021/12/hariten-top-160x90.png)
ブログに【天気予報】を埋め込み表示できちゃう?!【ハリテン】とは?
みなさんこんにちは!おさかなです!今回は「ハリテン」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ブログに「天気予報」を埋め込みたい方・サイトを運営している方・天気予報ウィジェットを探し...
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk.png)
右上のブロックが「HTML」コードの編集ブロックです!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-html.png)
2段目にあるのが「CSS」コードの編集ブロックです!
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-css.png)
右側は「実行結果」が表示されるところになっており、既にデフォルトコードの結果が表示されています!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-jikkou.png)
試しにHTMLの編集ブロックに「<div>おさかなです!</div>」と追加してみると…?
こんな感じで結果が反映されました。(おー!)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-div.png)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-top-160x90.png)
【HTML/CSS】コードをコピーするだけで、デザイン実装できちゃう!【Nomad Code】とは?
みなさんこんにちは!おさかなです!今回は「Nomad Code」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・HTML/CSSを学習している方・Webデザインを学んでいる方・Webサービ...
CSSなど色々といじってみると、なんか可愛い感じになりました!笑
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-edit.gif)
ちなみに右上の「RESET」ボタンを押すと、コードをリセットできます。(なるほど!)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-reset.png)
メニューでは、他にも「背景色」を変更できたり…。
![](https://osakanav.com/wp-content/uploads/2022/01/css-desk.gif)
「SHARE」から、シェアURLを生成できたりします!(いいね!)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-share.png)
一番右端の「DOWNLOAD」ボタンを押すと、「.html」ファイルとしてソースコードを保存することができるので、そのまま別のサービスに使用できます!(便利!)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-dl.png)
ダウンロードしたファイルを開くとこんな感じで、編集内容がきちんと反映されています!(おめでとう🌼)
![](https://osakanav.com/wp-content/uploads/2022/01/cssdesk-file.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
ブラウザ上で試せるサービスが増えてきて、便利だね!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
運営者さん!ありがとうございます!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/01/scc-top-160x90.png)
【CSS】でそのまま使える!カラーパレット【Sorted CSS Colors】とは?
みなさんこんにちは!おさかなです!今回は「Sorted CSS Colors」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・カラーの「CSS名」を確認したい方・Webデザインに携わる方・...