Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

cssだけで、グラデーション入りのラインを作る!

使用ソフト: Dreamweaver  

cssの擬似要素を使った、グラデーション入りのボーダーラインを作りましょう。

Webサイトの装飾は重要!けれど、htmlに画像を書き加えるとごちゃごちゃする・・・。
cssも、ボーダーや背景くらいしかできないんじゃない?

そんな風に思われがちなcssですが、実は思っている以上に、いろんな装飾ができるんです。

今回は、sccで「擬似要素」を使ったちょっとした工夫をして、文字の後ろに、グラデーションの入った細いラインを作ってみましょう!

他のことにも応用できるので、知っておくと、以外と便利ですよ。

文字の後ろに、グラデーション入りのラインを作る

1 cssで、要素に背景をつける。

ラインを作るだけなら、boderで良いのですが、今回はグラデーション入り。cssでグラデーションが入れられるのは背景です。

htmlとcssには、このように記述してみましょう。

linear-gradientの後ろ、〇〇degがグラデーションの角度、rgbaの後ろ、かっこの中がカラーrgbと、透明度のa、かっこの後ろの%が、スライダーの位置になります。

作例通りだと、虹色のグラデーション背景ができるはずです。

好きなように変更してみましょう。

納得いくグラデーションが作れない場合は、数値を変える以外にも、グラデーションエディター等のサイトを検索してみたり、イラレを使って作ってみてもいいかもですよ。

2 擬似要素のbeforeタグ ポジションを作る。

次はこのグラデーションのかかった背景を、ライン状にするための準備です。

ここで出てくるのが、cssに記述する擬似要素、beforeタグかafterタグです。擬似要素とはhtmlで書かれた要素を擬似的に装飾するものです。

一見難しそうですが、装飾を変更する際、htmlを書き換えなくていいので、後で変更するときも簡単です。

そのなかの、beforeタグやafterタグとは、文字通り要素の囲いの前や後に装飾を追加するものです。図解するとこんな感じです。

今回はbeforeタグを使ってみましょう。

cssにbeforeを使った擬似要素のタグを書きます。

そして、要素の中に position:relative; 擬似要素タグの中に、content:””; と position:absolute; と入れて、反応するようにします。

これだけだと、ウェブ上の見た目はまだ変わりません。

3 幅高さ、位置を指定し、変形させる。

それではようやく、見た目をライン状にしていきましょう。

まずは擬似要素の中に、作ったグラデーションをカットアンドペーストしましょう。

すると、あれ? 背景が消えてしまいました。

けれど、ご安心ください。擬似要素の中に、widthとheightで、幅と高さを指定してみましょう。

グラデーションのかかった、細いラインが出てきたはずです。widthで長さ、heightで太さを指定できます。

でも、なんか位置がおかしいですね。文字にかぶってもいます。

その場合は、bottomやleftを指定して、任意の場所に動かしてみましょう。文字の背景にする場合は、z-index:-1; を入れましょう。

これができるのが、擬似要素beforeやpositionなのです。

これで、グラデーションのかかったラインができました!

今回は簡単な線でやってみましたが、要素の上下や左右に自由に装飾できる擬似要素を使えば、htmlで書き換えなくても、アイコンや吹き出しを作ったり、小さな英字を、全ての要素に簡単につけることができます。

興味があれば、是非調べて、活用してみてくださいね。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  2. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

  3. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

  4. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

  5. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  6. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP