JSを使わずウェブ上でCSSを書き換える斬新な方法w

this-page-dose-not-use-js

twitterで流れてきたとあるサイト。
http://codepen.io/jcalifa/full/QwepvY
このサイトにアクセスすると、中央に「CSS」の入力エリアがあり、そこを変更するとリアルタイムにサイトのデザインが変わります。しかし、javascriptは一切つかっていないそうです。一体どうやって?気になって調べてみました。

styleタグにスタイルをつけテキスト入力エリアっぽくする。

まずbody内にstyleタグを設置します。通常、styleタグを置いただけでは、画面に何も表示されません。そこで、そのstyleタグに下記のスタイルをあて、無理矢理display:blockにして表示します。(styleタグにスタイルを当てるという発想がありませんでした。)

すると、body内にいつも見えないstyleタグが姿をみせ、テキスト入力エリアっぽい感じにに変化します。

styleタグにcontenteditableを追加する

先ほどのstyleタグに「contenteditable」属性を追記します。
「contenteditable」はHTML5からサポートされた新しい属性で、その要素内にあるテキストなどを編集できるようにするものです。

例)これはcontenteditableのテキストです。クリックしてみてください編集できます。

すると、見た目だけでなく挙動もテキストエリアっぽくなります。

・いつもは隠れているstyleを、スタイルで強引にbody内に表示する
・さらに、styleにcontenteditable属性を指定し編集できるようにする

こんな感じにすることで、自分自身のスタイルを編集することが、できるサイトができているようでした。すごい!

2015年に発売された、コーディングの最先端の情報が書いてある本。
HTML5/CSS3はもちろんのこと、Gitを使った制作フロー、Grunt・gulpによる自動化など最新のデプロイ方法も書いてあります。

  • このエントリーをはてなブックマークに追加
« »

デザインとカメラとロードバイクと畑

© 2017 cowcow blog