今回は、JavaScriptやjQueryは使用せず、CSSのみでLINEやSkypeのようなメッセージが自動的に動くものを作ってみたいと思います。最終形態はこちらです。2つがポイントとなります。後者の変数ですが、CSSで利用するにはまだ開発中の機能であり、どのブラウザでも使えるとは限りません。開発に伴い、構文と挙動について、仕様変更の可能性もありますので、導入の際は注意してください。Variablesの、主要各ブラウザは下記のとおり、緑の箇所のバージョンが対応しています。Safari、Android対応しています。*現時点でIEは非対応、Edgeも非推奨なので、使用する際は要注意です。HTMLには、枠とメッセージを組み込みます。class="msg-receive">今起きた。