月別アーカイブ: 2016年3月

CSSのアニメーションanimationプロパティの使い方1 ~animationと@keyframes~

CSSのアニメーションanimationプロパティの使い方1 ~animationと@keyframes~

以前の記事でCSSのアニメーション機能のひとつ、transitionプロパティについてご紹介しました。今回からは、CSSでアニメーションを表現するもう一つの方法、animationプロパティについて数回の記事に分けてご紹介します。transitionよりも関連プロパティが多く、自分で書くにはコードが長くなりやすいのが難点ですが、transitionでは出来ない自動再生や再生回数の指定なども可能です。:hoverと合わせて使えばホバー時のみアニメーションさせることももちろん可能です。

記述方法

animationプロパティで要素をアニメーションさせるためには、どのプロパティをどのタイミングでどのように変化させるのかを指定したキーフレームの設定が必要です。キーフレームは@keyframesというCSS3の@ルールを用いて記述します。このキーフレームに任意の名前をアニメーション名としてつけておき、それをanimationプロパティで呼び出してアニメーションさせる仕組みです。

@keyframesの記述方法

まずはキーフレームの書き方です。@ルールの中に、アニメーション開始を0%、終了を100%として、どのプロパティをどのタイミングでどのように変化させるか記述します。また、「@keyframes」のあとに半角スペースを空けて、アニメーション名を付けます。アニメーション名は、ID名やクラス名のように任意の名前を付けられます。たとえば、背景色を赤→白→青と変化させるキーフレームを「sample」というアニメーション名で定義するには以下のように書きます。

@keyframes sample{
  0%{ backgtound-color: red; }
  50%{ background-color: #fff; }
  100%{ background-color: blue; }
}

「0%」は「from」「100%」は「to」と書くこともできます。

animationプロパティの記述方法

animationプロパティは複数のプロパティの値をまとめて記述するショートハンドプロパティです。まとめることができるanimation関連のプロパティには、同じCSSアニメーションのショートハンドプロパティであるtransitionの関連プロパティと同じようなものも多いので、transitionについての記事も参考にして頂けると幸いです。

具体的な記述方法は以下のようになっています。必須の値はanimation-name(アニメーション名)とanimation-duration(アニメーションにかかる時間)です。

animationプロパティの書き方

DEMO

DEMO

animationプロパティを使ったアニメーションの例です。ホバーしている間アニメーションします。(回転にはCSS3のtransformプロパティを使っています)

参考サイト

ホバー時に日本語表記になるボタンをCSSだけで作る方法2

ホバー時に日本語表記になるボタンをCSSだけで作る方法2

前回の続きで、ホバーすると日本語に切り替わるボタンの作り方についてです。今回は以下のデモファイルのコードを解説していきます。

DEMO

ホバー時に日本語表記になるメニュー

HTML

<ul>
  <li>
    <a href="#">
      <span class="en">TOP</span>
      <span class="ja">トップ</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="en">WORKS</span>
      <span class="ja">制作実績</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="en">COMPANY</span>
      <span class="ja">会社案内</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="en">CONTACT</span>
      <span class="ja">お問い合わせ</span>
    </a>
  </li>
</ul>

htmlは上のようにリストの中に英語表記と日本語表記を入れ、それぞれspan要素で囲ってあります。分かりやすいよう改行しましたが、改行無しでも全く問題ありません。

今回はスタイル指定にクラス名を使うため、英語表記を囲むspan要素には「en」、日本語表記を囲むspan要素には「ja」とクラス名をつけています。

CSS

a{
 display: block;
 position: relative; /* .enと.jaの絶対配置の基準 */
 height: 50px;
 background-color: #333;
 transition: .5s; /* 0.5秒で値をなめらかに変化させる */
}
a:hover{
 background-color: #CCC;
}
.en,.ja {
 display: block; /* position指定がある時は無くても可 */
 width: 100%;
 position: absolute; /* .enと.jaを重ねて表示 */
 transition: .5s; /* 0.5秒で値をなめらかに変化させる */
}
.en {
 opacity: 1; /* 普段は英語表記を表示 */
 color: #FFF;
}
.ja {
 opacity: 0; /* 普段は日本語表記を透明に */
 color: #222;
}
a:hover .en { /* aにホバーしたとき英語表記は透明に */
 opacity: 0;
}
a:hover .ja { /* aにホバーしたとき日本語表記を表示 */
 opacity: 1;
}

※文字の切り替えに関係の無いスタイルは一部省略しています。

span要素はpositionの絶対配置で同じ位置に表示し、ホバー時にopacityの値を変えて表示非表示を切り替えています。ここではa要素にホバーした際のaの子要素(.en.jaのスタイルを変更するので、セレクタの書き方に注意して下さい。「子要素:hover」ではなく「a:hover 子要素」です。

ホバー時に日本語表記になるボタンをCSSだけで作る方法1

ホバー時に日本語表記になるボタンをCSSだけで作る方法1

サイトのナビゲーションなどで、見た目の良さから英語などの外国語表記を使うことがあると思いますが、日本国内向けのサイトでは意味が分かりづらく不親切です。そこで、ホバー時のみ日本語表記に変更する手法がよく使われます。これなら、見た目を妥協することなくユーザービリティに配慮したナビゲーションが作れます。

ホバー時のみ日本語を表示するにはjQueryなどを使う方法もありますが、今回はCSSのみで実装する方法をご紹介します。jQueryを使う方法については下記サイトが参考になります。

参考:【jQuery】マウスオーバーでテキストを差し替える方法 | KLUTCHE

DEMO

ホバー時に日本語表記になるメニュー

仕組み

HTMLにはあらかじめ英語表記と日本語表記を書き、それぞれspan要素で囲んでおきます。これをCSSのpositionプロパティで重ねて表示し、通常時は日本語表記のopacityを0に、ホバー時には逆に英語表記のopacityを0にして表示を切り替える仕組みです。透明度を変更しているだけなので、実際は英語も日本語も(片方が見えないだけで)ずっと表示されたままになっています。

今回は文字がスムーズに切り替わるようにCSS3のtransitionプロパティを使っていますが、瞬時に切り替わるデザインでよければCSS3で追加されたプロパティは使用しません。(transitionについてはこちらの記事で解説しています。)

長くなりましたので、HTMLとCSSのコードは次回の記事でご紹介します。

CSS3のアニメーションtransitionプロパティの使い方3 ~transition-timing-functionとtransition-delay~

CSS3のアニメーションtransitionプロパティの使い方3 ~transition-timing-functionとtransition-delay~

前回の記事でtransition-propertyとtransition-durationについて書きました。今回は、transition関連の4つのプロパティのうち、残りの2つtransition-timing-functionとtransition-delayをご紹介します。

transitionの書き方

変化の緩急を調節するtransition-timing-function

transition-timing-functionでは、「だんだん遅く」「だんだん速く」「一定に」など、アニメーションの緩急を調節することができます。通常「linear(一定)」「ease-in(だんだん速く)」などのキーワードで指定しますが、cubic-bezier関数(3次ベジェ関数)というものを使って細かく数値指定することもできます。cubic-bezier関数は数学的で分かりづらいので、ここでは触れません。なにも値を指定しなかった場合はデフォルトの「ease」となり、アニメーションの開始と終了が滑らかになります。transitionプロパティでまとめて書くときは3番目に記述します。

transition-timing-functionの値
キーワード 意味
ease 開始と終了を滑らかに変化させる
linear 一定に変化させる
ease-in だんだん速く変化させる
ease-out だんだん遅く変化させる
ease-in-out 最初と最後を遅く変化させる

変化が始まるまでの待機時間を指定するtransition-delay

transition-delayでは変化が始まるまでの時間を指定でき、単位は「s(秒)」が使われます。何も指定しなかった場合はデフォルトの「0s」となり、即座にアニメーションが開始されます。transitionプロパティでまとめて書くときは4番目に記述し、必ずtransition-duration(アニメーションにかかる時間)の後に記述します。

記述例

下の例は、p要素にホバーしてすぐ横幅を一定に変化させ、2秒後に高さをだんだん遅く変化させる指定です。このように1つの要素に対してプロパティごとに別々の指定を適用したい場合はtransitionプロパティでまとめて記述します。まとめて書くときは、プロパティごとに「,(カンマ)」で区切って書いてください。

p{
  width: 200px;
  height: 200px;
  transition: width 2s linear, height 2s ease-in-out 2s;
  /*
  widthはすぐに(2秒かけて)一定変化させる
  heightは2秒後に(2秒かけて)開始と終了を遅く変化させる
  */
}
p:hover{
  width: 500px;
  height: 500px;
}

DEMO

参考サイト

CSS3のアニメーションtransitionプロパティの使い方2 ~transition-propertyとtransition-duration~

CSS3のアニメーションtransitionプロパティの使い方2 ~transition-propertyとtransition-duration~

前回に引き続きCSS3のtransitionプロパティについてです。今回は、transitionでまとめて書くことができる4つのプロパティのうち、2つを詳しくご紹介します。

transitionの書き方

変化させるプロパティを指定するtransition-property

transition-propertyでは、transitionでアニメーションさせるプロパティを指定することができます。複数のプロパティをアニメーションさせる場合は、値を「,(カンマ)」で区切って記述します。なにも値を指定しなかった場合はデフォルトの「all」となり、transitionでアニメーション可能なすべてのプロパティが変化します。transitionプロパティでまとめて書くときは1番目に記述します。

変化にかかる時間を指定するtransition-duration

transition-durationでは変化にかかる時間を指定でき、単位は「s(秒)」が使われます。何も指定しなかった場合はデフォルトの「0s」となり、一瞬で切り替わるのでアニメーションになりません。そのため、transitionを使ってアニメーションを表示する際には必須の項目です。transitionプロパティでまとめて書くときは2番目に記述します。

記述例

下の例は、p要素にホバーした際文字色をグレーから白へ、背景色を白からグレーへアニメーションで変化させる指定です。borderもホバー時に色が変化するよう指定していますが、transition-propertyの指定に含まれていないのでアニメーションにはなりません

p{
  color: #666;
  background-color: #fff;
  border: 3px solid #ccc;
  transition-property: color, background-color; /*colorとbackground-colorの値を変化させる*/
  transition-duration: .5s; /*0.5秒かけて変化させる*/
}
p:hover{
  color: #fff;
  background-color: #ccc;
  border: 3px solid #666;
}

DEMO

参考サイト

CSS3のアニメーションtransitionプロパティの使い方1

CSSアニメーションtransitionプロパティの使い方1

この記事から数回に分けて、CSS3のアニメーションtransitionの使い方をご紹介します。CSS3のアニメーションにはtransition以外にanimationもあるので、そちらもtransitionのあとに記事にしたいと思います。

transitionは、数値で指定できるプロパティを時間経過で徐々に変化させるプロパティです。自動でアニメーションが再生されるのではなく、:hover疑似クラスやjQueryなどと組み合わせることでアニメーションにする事が出来ます。

transitionの書き方

transitionは、:hoverと組み合わせて使われることが多いです。たとえばp要素をホバーした際に背景色をアニメーションで変化させるには次のように書きます。

p{
  background-color: #333;
  transition: .5s; /*通常時の指定の方にtransitionを記述する*/
}
p:hover{
  background-color: #FFF;
}

DEMO

ポイントは、transitionの指定を:hoverの方ではなく通常の指定の方に記述するという点です。:hoverの方に記述してしまうと、ホバーした後しかアニメーションが再生されないので意図した動きになりません。

transitionの具体的な書き方は次のようになっています。

transitionの書き方

transitionはアニメーションの時間的変化を指定する4つのプロパティをまとめて記述するショートハンドプロパティです。記述の順番は「transition-property→transition-duration→transition-timing-function→transition-delay」の順です。それぞれのプロパティについて詳しくは次回以降の記事でご紹介します。

 参考サイト

CSS レスポンシブデザインで役立つmax-widthプロパティの使い方2つ

CSSレスポンシブデザインで役立つmax-widthプロパティの使い方2つ

今回は、レスポンシブ対応で役立つmax-widthプロパティの使い方を2つご紹介します。レスポンシブデザインでの画像表示には、ほぼ必須のプロパティです。

画像を親要素の幅ぴったりに表示する

max-widthを使って、画像を親要素の幅ぴったりに表示することができます。この指定が無い場合、画面幅が狭くなっても画像が縮小されず、親要素からはみ出てしまいます。レイアウトが崩れてしまいますし、横スクロールしないと画像全体を見られなくなってしまうので、下記を記述しておきます。

img{
  max-width: 100%;
  height: auto;
}

PC用レイアウトの横幅が広くなり過ぎないようにする

レスポンシブデザインでは、ボックスの横幅を%で指定します。スマホ用やタブレット用のレイアウトは見やすく整うので問題ありませんが、PC用のレイアウトの場合、幅が広いディスプレイで見た際にサイトの横幅が広くなりすぎて見づらくなってしまうことがあります。max-widthを使うことで、これを防ぐことが可能です。

#wrapper{
  max-width: 1280px;
  margin: 0 auto;
}

上の例では、サイト全体を囲う#wrapperの横幅が1280pxを超えないようにmax-widthで指定しています。また、ブラウザの横幅が1280pxを超えた場合には、サイト全体が中央に表示されるように左右のmarginをautoにしています。

CSS リンクのスタイル指定 :link :visited :hover :activeの記述順

CSS リンクのスタイル指定 :link :visited :hover :activeの記述順

今回はCSSでリンクのスタイル指定をする際の、擬似クラスの記述順です。記述順を間違えてしまうと、上手く指定が反映されません。たとえば、一度リンクをクリックすると訪問済みリンクのスタイルのまま、ホバーやクリック時の指定がきかなくなったり、クリックしてもホバー時のスタイルのまま変わらなかったり、ということが起きます。

リンクのスタイル指定ができる擬似クラス

リンクのスタイル指定に使われる擬似クラスを表にしました。

擬似クラス 意味
:link 未訪問リンク
:visited 訪問済みリンク
:hover マウスカーソルが乗っている状態
:active クリック中

:hoverと:activeは<a>要素以外でも使えます。

リンクのスタイル指定記述順

リンク関連の疑似クラスは次の順番で記述します。


:link :visited :hover :active


リンクのスタイル指定はこの記述順でないと、前述したようにうまく反映されません。これは、下に書いた方が優先されるCSSのルールによるものです。「a:hover」や「a:visited」とセレクタを書くと、それぞれ別の場所にスタイル指定しているように思えますが、疑似クラスはあくまで同じ要素に対する指定なので記述順による優先度が適用されます

たとえば「a:hover」の後に「a:visited」を書いてしまうと、訪問済みリンクにホバーしてもスタイルが反映されません。これは「a:hover」の指定が「a:visited」の指定で打ち消されてしまうためです。(ホバーしているという条件と、訪問済みリンクという条件どちらも当てはまるため、下に書いた訪問済みリンクのスタイルが反映されます)

順番の覚え方

よくある覚え方に、それぞれの疑似要素の頭文字をとって「love and hate」というのがあります(l=:link、v=:visited、h=:hover、a=:active)。

サンプル

あえて間違った順番で指定したサンプルです。:activeの指定が反映されておらず、一度クリックすると:hoverの指定も効かなくなります。

link_style_bad_sample

CSS3 擬似クラス:nth-childの使い方3 ~以上・以下~

CSS3擬似クラス:nth-childの使い方3~以上・以下~

前回の記事に引き続き擬似クラス:nth-childの使い方です。前回は:nth-child(n)の「n」にキーワードや数式を入れて、偶数・奇数を指定する方法を書きました。今回は、n番目以上、n番目以下を指定する方法です。

数式での指定方法

n番目以上、n番目以下を指定するには、:nth-child(n)の()内に数式で記述する必要があります。数式で指定する際は、「+」「-」と、「○n(○は数字)」の形で掛け算が使えます。「n」は特定の数字を指すものではなく、0以上の整数が入ります。なお、「*」や「/」「×」「÷」といった記号は使えません。

n番目以上の指定


E:nth-child(n+X)


「E」には要素名やクラス名、「X」には任意の数字を入れます。「n+X」で0以上の整数に「X」を足した数という意味なので「X」以上を指定する事ができます。たとえば3以上の場合は「n+3」です。

n番目以下の指定


E:nth-child(-n+X)


「E」には要素名やクラス名、「X」には任意の数字を入れます。「-n+X」で0以下の整数に「X」を足した数という意味なので「X」以下を指定する事ができます。たとえば3以下の場合は「-n+3」です。

サンプルファイル

下のHTMLファイルは、上記の指定方法を使ってリスト項目の色分けを行った例です。:nth-childではこれ以外にも、「n個おき」など色々な指定ができます。ぜひ使ってみてください。

以上・以下の指定

CSS3 擬似クラス:nth-childの使い方2 ~偶数・奇数~

CSS3擬似クラス:nth-childの使い方2~偶数・奇数~

前回の記事に引き続き擬似クラス:nth-childの使い方です。前回は:nth-child(n)の「n」に数字を入れて、n番目の子要素のみスタイル指定する基本的な記述をご紹介しました。今回は偶数・奇数を指定する際の書き方です。偶数・奇数は、キーワードか数式で指定できます。

偶数の指定


E:nth-child(even) or E:nth-child(2n)


「E」には要素名やクラス名、( )内に「偶数」という意味のキーワード「even」を記述します。数式で書く場合は2の倍数なので「2n」です(nには整数が入ります)。

奇数の指定


E:nth-child(odd) or E:nth-child(2n+1)


「E」には要素名やクラス名、( )内に「奇数」という意味のキーワード「odd」を記述します。数式で書く場合は2の倍数に1を足した数なので「2n+1」です。

キーワードの覚え方

oddとevenは、あまりなじみのない英語で覚えづらいと思います。しかし、この2つのどちらが偶数でどちらが奇数か、簡単に覚える方法があります。単語の文字数がキーワードの意味と同じ偶数/奇数になっているのです。

つまり、oddは文字数が奇数だから意味も奇数、evenは文字数が偶数だから意味も偶数、と覚えられます。

サンプルファイル

下のHTMLファイルは、リスト項目の文字色を交互に変えた例です。

偶数と奇数の指定