1. /
  2. CSS

CSS

CSS

CSSでもっと魅力的に！動きのある下線をグラデーションで作ってみよう

  • by support
  • 0

今回作りたいもの テキストにグラデーションで下線を引き、マウスオーバーでグラデーションが縦方向に伸びる動きをつけたいと思います。 HTMLの準備 表示したいテキストを自由に書きます。 今回は、h1タグとpタグでそれぞれ書きました。 タグは自由です。divでもh2でも。

下線を引きたいテキスト部分にクラス名をつけます。 ここでは class=”underline” としました。 クラス名も自由です。 テキストにCSSで下線を引く テキストにグラデーションの下線を引くには background を利用します。

1. 背景色はlinear-gradientを使用し、中身は(角度, 開始色 開始位置, 終了色 終了位置)となっています。 今回は120度の角度で、テキストの頭（0%の位置）を水色に、テキストの最後（100%の位置）を紫にしています。 2. background-repeatは、今回は繰り返さないのでなしにしています。 ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。↓↓↓ 3. 下線っぽくするには、background-sizeで高さを調整します。 background-sizeは(横のサイズ 縦のサイズ)となっているので、 今回は(横100% 高さ0.4em)としています。 ここでは単位は%, emのほか、pxも使用できます。 ここまでの1〜3で、上から下線ができました。↓↓↓ 4. 最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。 background-positionは(左からの開始位置 上からの開始位置)となっており、 今回は(左から開始 上は90%の位置から開始)としています。 これも単位は%やpxなどを使用できます。 動きをつけよう せっかくなので、下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。

ホバー時に、background-sizeの高さの方を90%にします。（100%でもいいですよ。） するとこんな感じ↓↓↓ カクカクした感じになるので、これをスムーズにするにはtransitionを使用します。 transitionは動きをスムーズにできる underlineにcssでtransitionを設定追加します。

ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。 ＊0秒だと、さっきのカクカクした動作。 そして完成。 […]

CSS

CSS学習中の方からの質問「position: relative; とposition: absolute; の違いが分かりません！」

  • by support
  • 0

地図で東京スカイツリーの位置を考えてみよう absolute（アブソリュートと読みます）は、地図では緯度経度のようなものです。 例えば 「東京スカイツリーは東経139.7713562度、北緯35.6955548度の位置にあります。」 と言えば、スカイツリーがまったくどこにあるのか分からない方も、 日本の位置も知らない海外の方も、 地図上でスカイツリーの場所を見つけることができます。 一方、relative（リレイティブ、レラティブと読みます）は、地図ではどこかを基準点とした位置のようなものです。 例えば、 「たかし君の家は、郵便局から２軒先にある」 というのも分かりやすい例のひとつですが、 「東京スカイツリーは、東京駅から北東に5.1kmの距離にあります。」 という風に言うと、２地点の距離と、東西南北の関係が分かります。 さらに、 「東京スカイツリーは、東京駅から北東に5.1kmの距離にあり、成田空港から西の方向に53kmの距離にあります。」 となると東京スカイツリーは基準とする地点を変えることで、 5.1kmとも、53kmとも表記することができるようになります。 これがrelativeの便利な使い方です。 絶対位置のabsolute、相対位置のrelative このように、absoluteは原点からの位置を表すので、「絶対位置」と、 relativeは２要素の位置関係を表すので、「相対位置」とも呼ばれます。 Web上の原点はどこ？ Webサイトの原点とは一体どこでしょうか？ ページをブラウザで開いたときの、左上が原点です。 absoluteで四角形を描いてみよう ではこのページで、300px x 200pxの長方形を、原点から右下に作成したいと思います。 Webでは右下が正の向きです。

left, topとありますが、ここは場合に応じて、right（右から）やbottom（下から）としてもOKです。 absoluteの使いやすい点・そうでない点・特徴 position: absolute; は、スクリーンのサイズがいくつであっても、 常に最上部、常に左端に、など固定位置に要素を置きたい場合に便利です。 上の四角形の例の場合、スクリーンサイズが大きなユーザーの場合、 右下にもっと余白ができます。 また、常に原点を基点としているので、ページの真ん中あたりに任意のコンテンツを配置したい場合は、 topやleftの値が大きくなったり、またスクリーンサイズによっては 想定した場所に表示されないなどのケースもありえます。 ここまではposition: absolute;のお話でした。 relativeは親、absoluteは子として使う 次はrelativeとabsoluteの合体技についてお話します。 簡単に言えば、relativeを親要素とし、子要素としてabsoluteを入れ子にします。 まずはHTMLで２つのdivを作り、 子を入れ子にします。

次はCSSですが、親の要素に子要素をかぶせるようにしたいと思います。

実際にブラウザで見るとこんな感じになると思います。 relativeとabsoluteは組み合わせで使うと便利 このように、親relativeに対し、子absoluteは親の原点からに対して、 […]

CSS

CSSだけで動かしてみよう！メッセージアプリのようなチャットUI

  • by support
  • 0

作るもの 今回は、JavaScriptやjQueryは使用せず、CSSのみでLINEやSkypeのようなメッセージが自動的に動くものを作ってみたいと思います。 最終形態はこちらです。 デモページはこちら（http://sample.creativeflake.com/blog/chatui.html） 事前準備 今回使用するCSSは動作のためのキーフレーム @keyframes そして、CSSで変数を利用する var() の２つがポイントとなります。 CSS Variablesのブラウザ対応状況 後者の変数ですが、CSSで利用するにはまだ開発中の機能であり、どのブラウザでも使えるとは限りません。 また開発に伴い、構文と挙動について、仕様変更の可能性もありますので、導入の際は注意してください。 CSS Variablesの、主要各ブラウザは下記のとおり、緑の箇所のバージョンが対応しています。 （2017年8月時点) FirefoxやSafari、Chrome等のPCブラウザ、スマホブラウザでもiOS Safari、Android対応しています。 ＊現時点でIEは非対応、Edgeも非推奨なので、使用する際は要注意です。 参考: http://caniuse.com/ HTMLを作っていこう HTMLには、枠とメッセージを組み込みます。

特に気にすることなく、枠とメッセージ本文を書いていけばOKです。 ここで、それぞれのメッセージには、ID名をつけてあげましょう。 クラス名のmsg-receiveとmsg-sendは、スタイルシート用の色分けです。 CSSを書いてみよう 下記がCSS全文です。 長いですが、解説はCSSの下のとおりです。

ルート :root と変数 １行目 :root 疑似要素は、タグと同じことを意味しています。 タグよりも上位（親、外側）の要素です。 ２行目〜９行目 –（ハイフン２つ）は変数を表します。 たとえば、–msg-content-height: 510px; は変数名「msg-content-height」は510pxだということを、 変数名「msg-spacing」は30pxだということを表しています。 変数の名称は一般には、好きな名前をつけることができます。 ここでは、rootに対してそれぞれの変数を定義しているので、このWebページ内の任意の場所で、宣言した変数を呼び出すことができるようになりました。 アニメーションの基本設定 12行目〜40行目 ＊クラス名 msg-send と クラス名 msg-receive の装飾に関する部分は省略します。 […]

CSS

【CSS】横並びリストで高さを持たない＜ul＞に高さをつけよう

  • by support
  • 0
【CSS】横並びリストで高さを持たない＜ul＞に高さをつけよう

グローバルナビや、メニューで、横並びリストをCSSで書くときに

で横並びにする人、多いかと思います。 これは正しいのですが、 困ったことに親要素のulタグが高さ0になってしまうこと、 ありませんか？ ▼ 個々のリスト要素は高さがあるのに ▼ 親要素のulタグの高さが0になってしまう これは非常によくあるあるCSSで、マークアップをやっていく段階で 必ずといっても過言でないほど、当たる壁です。 【回避策 その1】親要素にoverflowを指定する 手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を 指定してあげます。

本来、overflow: hidden; は、 「要素（ボックス）からはみ出たコンテンツをカットして表示しない」 という意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。 「【回避策 その1】親要素にoverflowを指定する」の場合のCSSソースコード例

【回避策 その2】:before, :after を利用する ulにoverflow: hidden;を使用してもよいのですが、 例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、 overflow: hidden;により表示されなくなってしまう場合があります。 そうなると回避策 その1は利用できなくなるため、別の回避策として 疑似要素を利用します。 具体的には次のサンプルコードの通りです。

ul本体には何も指定せず、 ul: before　と、ul: after に 空の要素を置いてあげます。 空の要素の指定方法にも様々ありますが、ここでは、 ・中身が空（content: “”;）で、 ・回り込みを解除（clear: both;）し、 ・ブロック要素、つまり横幅100%（display: block;）の 要素を空要素としています。 そうすることで、なんということでしょう […]