creatersnest123

【細部にもこだわりを】リンクをデザインしたい人のためのプロパティまとめ


CSS3が一般的になってきた昨今、画像やアニメーションソフトを使わなくても
ある程度のアニメーションやエフェクトなどがCSSで可能になってきましたね。

便利になってきたCSSですが、プロパティもたくさん増えてきました。
特にリンク関連のデザインにも幅が広がって、いろいろな表現ができるように
なってきたので、一部ですがそんなプロパティをまとめてみました。

サイト全体のリンクの色と装飾を変更するCSS/webfeelfree

サイト全体のリンクの色と装飾を変更するCSS

http://webfeelfree.com/css-link-color-and-decoration/
テキストリンクでは基本的なプロパティのtext-decorationですが、
今一度見直して使い方をきちんと押さえておくといいです。
疑似要素との関係で、使い分けをできるようにしましょう。

 

CSSの擬似要素「:before」「:after」の使い方/Web’Notes

 CSSの擬似要素「:before」「:after」の使い方

http://webnonotes.com/css/css-before-after/

:beforeと:afterは疑似要素ですが、
リンクにはかかせないエフェクトやアニメーションを行うためには
必須の要素なので取り上げました。

リンク(aタグ)をブロック要素(div)全体に効かせるCSS/JunkBlog

リンク(aタグ)をブロック要素(div)全体に効かせるCSS

http://junk-blog.com/div_a_link/

リンクタグのaは、インライン要素なので、
テキスト部分にしか適用できないのですが、
ボックスにした部分全体にリンクを効かせたい場合も多いですね。
そんなときに使うのが、positionプロパティです。

 

リンクをボタン化する/WebWorld

リンクをボタン化する

http://www.webword.jp/css-design/link/index4.html

リンクテキストをボタンの形状にするには、
displayプロパティを使います。
よく使われるプロパティなので、よく理解しておきたいですね。

 

CSSだけでここまでできる!キレイなボタンの作り方/style

CSSだけでここまでできる!キレイなボタンの作り方

http://www.hp-stylelink.com/news/2013/07/20130717.php

リンクテキストをCSSでボタンの形状にするのに必要な
border-radiusを使って解説しています。
角を丸く表示させる方法です。

 

 

CSSで、ホバーで下に沈むボタンを作る時に気をつけたいこと/できることからコツコツと

CSSで、ホバーで下に沈むボタンを作る時に気をつけたいこと

http://dekikotu.com/webtech/css-flatbtn-point/

ボタンにマウスオーバーした際に、まるで押し込んだような
表現にするには、box-shadowを利用して影をつけたり消したりします。
ブロック要素にCSSで影をつけられるようになりました。

 

CSS3 グラデーション(gradient)の指定方法/ウェブ帳

CSS3 グラデーション(gradient)の指定方法

http://www.webcyou.com/?p=238

CSS3では、画像を使うことなくグラデーションを扱うことができます。
そのグラデーションを取り扱うのがgradientプロパティです。
カラーを扱うので、構成をしっかり見ておきましょう。

 

CSS3 テキストグラデーション指定 スマフォンサイト有効/ウェブ帳

CSS3 テキストグラデーション指定 スマフォンサイト有効

http://www.webcyou.com/?p=1025

グラデーションをCSS3で扱えるようになりましたが、
テキストにももちろん使えるようになりました。
カラフルなテキストにしてみるのも、ポイントになっておもしろいですね。

 

scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード/9ineBB

scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード

http://9-bb.com/scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード/

 

テキストへのアンダーラインにはtext-decorrationを使うことがありますが、
するするっと延びてくるようなラインを作る方法を解説しています。
その動きに、scaleを使って動作するようにしています。

 

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ/coliss

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ

http://coliss.com/articles/build-websites/operation/css/css-text-shadow-comilation-by-boltaway.html

テキスト自体に影をつけるtext-shadowプロパティですが、
:hover動作時との差をつけるだけで動きを与えられます。
様々な利用の仕方があるので、かっこいいリンクにできます。

 

 

新米コーダーシリーズ(2)CSS3でつくるかわいいボタンホバーエフェクト5選/BRIDGE BLOG β

新米コーダーシリーズ(2)CSS3でつくるかわいいボタンホバーエフェクト5選

http://blog.bridge-net.jp/2015/01/coding02

CSS3で動きのあるボタンを作るときに、多く使われるのが
transformプロパティです。
様々なシーンで使われるので、いくつかのパターンを確認しましょう。

 

css3 拡大,縮小,移動,変形 transformプロパティのまとめ/ウェブ帳

css3 拡大,縮小,移動,変形 transformプロパティのまとめ

http://www.webcyou.com/?p=1904

transformプロパティについて、より詳しく解説しています。
transformで使える値について、ひとつひとつ説明していて
しっかりと身につけたい方は必見です。

 

リンクテキストや文字の色がふわっと変わるCSS3と記述位置の疑問点/webfeelfree

リンクテキストや文字の色がふわっと変わるCSS3と記述位置の疑問点

http://webfeelfree.com/css3-change-color-text/

マウスオーバーにふわっとした動作を加えるには、
transitionプロパティを使います。
その意味を使いこなせるようになれば、自在にデザインできるように
なりますね。

 

css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた/Kachibito.net

css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた

http://kachibito.net/web-design/css3-transition-sample.html

transitionプロパティを使うと、いろいろなアニメーションを
作ることができます。
そのおもしろいアニメーションを作ってみたページです。

 

transition-property【CSS3リファレンス】/Webデザインラボ

transition-property【CSS3リファレンス】

http://www.webdlab.com/css/css3-transition-property/

transition-propertyプロパティは、これで指定されたものが
時間をかけてスムーズに変わっていきます。
具体的にどのように使うか、確認してみましょう。

 

まとめ

ここで紹介した他にもまだまだプロパティはたくさんありますし、
使いようによってはもっとスゴイものができそうですね!
CSSを使いこなせるようになるには、とにかくひたすら作ってみる、直してみるを
繰り返してみることが一番の早道と考えています。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleグローバルメニューのデザインに使えるCSSテクニックまとめ