今朝Gunosyで流れてきた記事がおもしろかったので早速マネしてみました。
下部のCSSにカーソルを合わせて編集してみてください。
編集したスタイルがそのまま画面に適用されます。
そしてこれはJSを使わず、CSSだけで再現されています。
Sponsored Link
styleタグにスタイルあてるっておもしろい発想ですね！
contenteditable属性なんてのも初めて知りました。
Content Editable：HTML5 では、全ての要素を編集可能状態 (editable) にする事が出来ます。これはずっと以前から独自実装として存在したものですが、現在は WHATWG によって標準化されています。JavaScript の幾つかのイベントハンドラと併用する事で、ウェブページを多機能で且つ高速に動作するリッチテキスト・エディターにしてしまう事も可能です。MDN
参考：
This page does not use JS.
JSを使わずウェブ上でCSSを書き換える斬新な方法ｗ
ウェブ制作でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。
ウェブ制作のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）
06-6271-7761
ABOUT ME
- デザイナー／編集Twitter:@BILLIONPLAN_JP
- 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧
Recent Posts
2016.10.26EC楽天RMSのカスタマイズで使えるclass名の一覧。
2016.09.30WEBWordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。
2016.08.10EC注目のキッズファッション！楽天の参考デザインまとめ、子供服サイト10選。
2016.07.15DESIGNロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。
このコンテンツはフレーム内に表示できません、IEほか対応（Googleのiframe埋め込み）
flexbox（CSS3）で、レスポンシブなブログ記事一覧にする方法。
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。
