JSを使わずCSSを書き換える~をマネしてみた。

JSを使わずCSSを書き換える~をマネしてみた。

今朝Gunosyで流れてきた記事がおもしろかったので早速マネしてみました。
下部のCSSにカーソルを合わせて編集してみてください。
編集したスタイルがそのまま画面に適用されます。
そしてこれはJSを使わず、CSSだけで再現されています。

Sponsored Link

styleタグにスタイルあてるっておもしろい発想ですね!
contenteditable属性なんてのも初めて知りました。

Content Editable:HTML5 では、全ての要素を編集可能状態 (editable) にする事が出来ます。これはずっと以前から独自実装として存在したものですが、現在は WHATWG によって標準化されています。JavaScript の幾つかのイベントハンドラと併用する事で、ウェブページを多機能で且つ高速に動作するリッチテキスト・エディターにしてしまう事も可能です。MDN

参考:
This page does not use JS.
JSを使わずウェブ上でCSSを書き換える斬新な方法w

ロゴはSVGにして使いまわそう!簡単スマホ対応。

ウェブ制作でお悩みの方へ。

BILLIONPLAN JAPAN Co, Ltd

ネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

おむおデザイナー/編集Twitter:@BILLIONPLAN_JP
大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧
Sponsored Link

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

コメントを残す

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