終了位置)となっています。今回は120度の角度で、テキストの頭(0%の位置)を水色に、テキストの最後(100%の位置)を紫にしています。background-repeatは、今回は繰り返さないのでなしにしています。ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。下線っぽくするには、background-sizeで高さを調整します。高さ0.4em)としています。emのほか、pxも使用できます。ここまでの1〜3で、上から下線ができました。最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。上は90%の位置から開始)としています。これも単位は%やpxなどを使用できます。下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。90%;}ホバー時に、background-sizeの高さの方を90%にします。(100%でもいいですよ。した感じになるので、これをスムーズにするにはtransitionを使用します。underlineにcssでtransitionを設定追加します。ease-in;}ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。*0秒だと、さっきのカクカクした動作。absolute(アブソリュートと読みます)は、地図では緯度経度のようなものです。「東京スカイツリーは東経139.7713562度、北緯35.6955548度の位置にあります。地図上でスカイツリーの場所を見つけることができます。relative(リレイティブ、レラティブと読みます)は、地図ではどこかを基準点とした位置のようなものです。「東京スカイツリーは、東京駅から北東に5.1kmの距離にあります。いう風に言うと、2地点の距離と、東西南北の関係が分かります。「東京スカイツリーは、東京駅から北東に5.1kmの距離にあり、成田空港から西の方向に53kmの距離にあります。5.1kmとも、53kmとも表記することができるようになります。これがrelativeの便利な使い方です。relativeは2要素の位置関係を表すので、「相対位置」とも呼ばれます。ページをブラウザで開いたときの、左上が原点です。200pxの長方形を、原点から右下に作成したいと思います。Webでは右下が正の向きです。topとありますが、ここは場合に応じて、right(右から)やbottom(下から)としてもOKです。常に最上部、常に左端に、など固定位置に要素を置きたい場合に便利です。右下にもっと余白ができます。想定した場所に表示されないなどのケースもありえます。absolute;のお話でした。次はrelativeとabsoluteの合体技についてお話します。簡単に言えば、relativeを親要素とし、子要素としてabsoluteを入れ子にします。class="child"></div></div>次はCSSですが、親の要素に子要素をかぶせるようにしたいと思います。280px;}実際にブラウザで見るとこんな感じになると思います。今回は、JavaScriptやjQueryは使用せず、CSSのみでLINEやSkypeのようなメッセージが自動的に動くものを作ってみたいと思います。最終形態はこちらです。2つがポイントとなります。後者の変数ですが、CSSで利用するにはまだ開発中の機能であり、どのブラウザでも使えるとは限りません。開発に伴い、構文と挙動について、仕様変更の可能性もありますので、導入の際は注意してください。Variablesの、主要各ブラウザは下記のとおり、緑の箇所のバージョンが対応しています。Safari、Android対応しています。*現時点でIEは非対応、Edgeも非推奨なので、使用する際は要注意です。HTMLには、枠とメッセージを組み込みます。class="msg-receive">今起きた。