Luminous Tale.

過去よりも未来よりも「現在」を幸せに生きるために。今ここにある日常を輝かせるための“魔法”をお届け。旧「月光の狭間」。

*

CSSのお試し・勉強に!ブラウザ上でCSSを扱える「CSS Desk」

   

この記事の所要時間: 545

どうも、ブログカスタマイズを繰り返すうちに真面目にHTMLとCSSの勉強してみようかなと思い始めた怜香@Ray_mnzkです。

今までブログカスタマイズはひたすらネット上でシェアされているコードをお借りして少し弄るだけ、という形でやってきていました。正直言って何もわからずにやっているも同然

それでも色々と調べながらああだこうだと弄っていると、素人なりにも少しずつは理解ができてくるものです。「ここはこういうことだったのか!」とわかるとちょっと嬉しい。そしてそこから「ちゃんと勉強しようかな」と思えてくるのです。

さて、今回はそうやってCSSを弄る中で便利に使えそうな、「CSSDesk – Online CSS Sandbox」というWebツールをご紹介します。

Sponsored Link

ブラウザ上で手軽にCSSを試せる!まずは画面をご紹介。

さてこの「CSSDesk – Online CSS Sandbox」ですが、よくあるWebツールのような登録やログインの類は一切必要ありません。アクセスしたらすぐに使うことができます。

アクセス直後のデフォルトの画面はこんな感じ。

これでは見づらいので拡大してみますね。

左側:HTML・CSS入力欄

まずは左側。

上がHTML入力欄、下がCSS入力欄となっています。どちらもデフォルトで入力見本が表示されています。

ここにそれぞれHTML・CSSを入力していきます。

右側:入力したHTML・CSSのプレビュー画面

続いて右側。

ここは左側で入力したHTMLとCSSが反映されるプレビュー画面です。デフォルトでは見本として入力されているHTMLとCSSを反映した結果が表示されています。

左側で入力したものが実際どう見えるのかを確認できるというわけです。

右上:メニュー

さて、先程の右側画面、上のほうに何やら文字がありますね。

これ、メニューです。

それぞれ、

  1. HTMLとCSSをデフォルトの状態に戻す。
  2. 背景色変更
  3. 他のブラウザでも今編集しているHTML・CSSを扱えるように、固有のURLを発行。
  4. 入力したHTML・CSSで出来上がった(右側に表示されている)ものをひとつのWebページとして保存

となっています。

このうち、(2)の背景色変更ですが、以下のようにいくつか種類があります。

淡い色を使っているなら青や黒、濃い色を使っているなら白やベージュなど、見やすくなるような色を選択できますね。

(3)に関しては、これで発行したURLにアクセスすると、すぐに作業の続きが可能になる、という感じです。

また(4)については、ダウンロードしたファイルを開くと、編集時に右側に表示されていたものがそのまま画面全体に表示される形になります。入力したHTMLやCSSが保存されるわけではない(と思われる)のでご注意下さい。

編集がリアルタイムで反映される!

このCSS desk、何が便利なのかというと、左側で編集した内容がリアルタイムで右側に反映されることです。

ボタンをクリックしたり、再読み込みしたりする必要はありません。

1行記述することに右側に反映されていきす。CSSのほうは、きちんと閉じタグまで入力していなくても、その時点までで入力されている内容を反映してくれます。

入力するごとに内容に応じて随時右側の表示が変わっていくので、「今自分が入力した記述はどの部分に反映されるのか」といったことが一目瞭然です。これ、何気にとても便利なんですよ。

CSSのお試しに!細かいカスタマイズもお手の物!

例えば、ネット上で共有されていたコードを借りるとします。

HTML・CSSそれぞれコピーし、CSS Deskの該当欄に貼り付けると、そのコードによって出来上がるものが右側に表示されます。

さて、このようにコードを借りてきた場合、実際に使う際はそっくりそのまま使うのではなく、色などをカスタマイズして使うことが多いかと思います。

そんな時、本番用のHTMLやCSSファイルに書き込む前に、このCSS Desk上で色などのカスタマイズを済ませてしまいます。その場で色味などを確認し納得いく形に仕上げておくことができるので、「本番として採用してみたらデザインが合わなかった」という事態に陥りにくくなるはずです。

CSSの勉強に!

CSSの解説書では、説明しているコードの具体例として、実際にHTMLとCSSのコードが記載されていることが多いです。そして、「実際にどのように見えるか」の例示も。

これらを見かけたら、具体例に挙げられているコードをCSS Deskに入力してみましょう。正しく入力できていれば、解説に例示されているのと同じものが出来上がるはずです。

これ、やっていることは単純極まりないのですが……ただ解説を読みコードを眺めるだけではなく、実際に手を動かしてみることで、より理解しやすく、頭に入りやすくなります

CSS Deskは、今学んでいることをその場で実践できる「CSSの学びの場」ともなり得るのです。

ちょっとしたCSSを試すのに最適!思い立った時にすぐ使えるのが便利!

このCSS Desk、Wordpressテーマのテンプレートファイルを丸々作ってみるといったような大規模な作業には向きませんが、一部分のカスタマイズなど、ちょっとしたCSS編集には非常に向いているといえるでしょう。

私はブログカスタマイズをしていく中で、「本番用のファイルを書き換える前に、どんな仕上がりになるか確認したいなぁ」と思うことがよくありました。CSS Deskと出会ったことで、

  1. 該当部分のHTMLとCSSをCSS Deskにコピペ
  2. デザインなどをチェックし、納得いく形になるように編集
  3. 本番用のファイルにコピペして書き換え

という手順を踏めるようになり、「いざカスタマイズ確定させてみたらデザインが思っていたのと違った!」といった失敗がかなり減りました。

CSSをよく使う人は是非活用してみて下さい!登録不要なので必要な時にすぐ使うことができますよ。

今日のあとがき

というわけで、ここ最近のブログカスタマイズで非常に重宝しているCSS Deskのお話でした。

ようやくある程度カスタマイズが仕上がってきた感があるので、そろそろ「具体的にどこをどうカスタマイズしたか」なんて記事も書けたらなぁ……と思っていまして。

で、そういった記事を書く気でいるなら、このツールは是非先に紹介しておきたいなと思ったのです。私自身まだまだCSSとかは知らないことばかりなので、説明が不適切な部分があるかもしれません。その時はこっそり指摘していただけますと幸いです。

さて、肝心のカスタマイズにまつわる記事はいったいいつ書けるのか。自分でもわかりません。まあそのうち……書けたらいいな!(笑)

それでは、今回はこのあたりで。

 - Webツール , ,

Sponsored Link
Sponsored Link

  関連記事

個人的タスク管理三種の神器を紹介してみる(1)クラウドアウトライナー編
この記事の所要時間: 1120

現在、私はタスク管理に3つのツールを併用している。それらを用いてどうタスク管理を行っているかを、これから全3回にわたって解説していくことにする。今回はその第1回、クラウドアウトライナーを活用したタスク管理についてお話しする。

私の「日付トピック」の使い方。タスクもライフログも全部放り込む「今日のInbox」。
この記事の所要時間: 1146

Workflowyは、きわめて自由度の高いクラウドアウトライナーである。工夫次第で様々な用途に活用できるのが魅力の一つだ。今回は、一日ごとにその日思いついた物事を書き込んでいく「日付トピック」について、私なりの使い方をご紹介する。

いつもと一味違うアイキャッチを作ってみない?PC・スマホ・ブラウザで使える画像加工アプリ「Fotor」が便利!
この記事の所要時間: 654

PC・スマホのみならず、ブラウザでも使える画像加工アプリ「Fotor」。今回は特に豊富な設定が可能な「文字挿入機能」を中心に紹介してみることにする。(※この記事はFotorご担当者さまより依頼をいただいて執筆したものです)

iOS9にしたiPadではブラウザ版Workflowyが使いにくい。けれど新機能を使えばWorkflowyがさらに便利になる!
この記事の所要時間: 1053

先日、iPhone6sの発売に先駆け、iOS9がインストールできるようになった。このiOS9では、ブラウザからWorkflowyにアクセスした際に少々問題ある挙動をしてしまうようになっている。また、iPadでのiOS9に実装された新機能「Slide Over」「Split View」機能を使ったWorkflowy活用法も提案することにする。

「あとで読む」ツールとしてEvernoteへのWebクリップを使っていた私がPocketを導入した理由
この記事の所要時間: 107

今まで長らくの間「あとで読む」ためのツールとしてEvernoteへのWebクリップを愛用してきた私だが、この度思うところあってPocketを導入した。実際使ってみたら思いの外便利に活用できる手応えを感じたので、今回はPocket導入への経緯を含めお話しする。

わけあってWorkflowy Proアカウントに移行してみたのでPro版での機能など紹介してみます
この記事の所要時間: 858

Workflowyをがっつり使い込むようになり、今月は上限が足りないかな……と思っていた矢先のこと。あるキャンペーンの存在を知り、Workflowy Proにアップグレードをすることができた。いい機会なので、Workflowy Proについてざっくりと解説をしてみることにする。

Tile Tabsを使って、WorkflowyのInboxへの入力やタスクリストの閲覧をいつでもできるようにしよう!
この記事の所要時間: 914

Firefoxで使える数々のアドオンの中に、「Tile Tabs」というものがある。画面を分割し、複数のタブを一つの画面上に表示させるというアドオンだ。このアドオンをWorkflowy専用ブラウザにしたFirefoxで利用すると非常に便利なので、その使い方や活用法などをご紹介する。

Workflowyからたすくまにタスク転記できるブックマークレットに新作が登場!さらに転記がやりやすくなったよ!
この記事の所要時間: 731

クラウドアウトライナーであるWorkflowyでタスク管理をする場合、一日のタスクをうまく実行させていくために、たすくまを併用することも多い。その際、Workflowyからたすくまにタスクを転記する必要があるが、その作業を簡単にしてくれるブックマークレットに新作が登場したので、早速ご紹介する。

Workflowyとはひと味違うクラウドアウトライナー「Dynalist」の特徴とか機能とかを語ってみる
この記事の所要時間: 1429

Workflowyと似た見た目と機能性を持ちながら、初めから数々の便利機能が備わっているクラウドアウトライナー「Dynalist」。今回はこのDynalistがもつ様々な特徴や機能について、Workflowyとの比較も交えつつ解説していく。

Workflowyが収拾つかなくなったのでDynalistに移行してみた話
この記事の所要時間: 1136

PCでもスマホでも使えるクラウドアウトライナーといえばWorkflowyが有名だが、今はもうひとつ、Dynalistというものも存在している。見た目はWorkflowyによく似ているが高機能が謳われているDynalistを筆者が使い始めた経緯を、Dynalistの簡単な紹介を添えつつ語ってみる。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA