こんにちは、WEBマーケティング部の杉尾です。 今回は、レスポンシブデザインのサイトを作るのに欠かせないCSS3 メディアクエリ（Media Queries）のお話です。 Bootstrapなどのフレームワークを使った場合は、当たり前のようにレスポンシブデザインになりますが、そういうものを使わずにレスポンシブなサイトを作る場合は必ず必要となってくる知識です。 また、それらを使う場合でも、ちょっとした改修やデザイン変更時に触ることがあるかもしれません。 是非とも覚えて、積極的に活用しましょう。 メディアクエリとは？ CSS3から導入された仕様の一つです。 よく使う指定として、「ウェブページの表示サイズがこれ以上の幅ならこういうスタイルを適用する」という指定ができます。 それ以外にも、 『表示サイズ、高さ』(height) 『画面の幅、高さ』(device-width、device-heigh

こんにちは、WEBマーケティング部の杉尾です。 今回はWEBページに動きを出してくれる、CSS3のtransitionプロパティの概要を紹介します。 transitionとは transitionプロパティのtransitionは『移り変わり、変遷、変化』という意味を持つ言葉です。 その意味通り、transitionプロパティは『時間的変化』を指定するときに使うものです。 CSS3には、transition以外にも、変形やアニメーションを表現するプロパティが他に２つあります。 それが、animationとtransformです。 ３つの違いは、 transition ⇒ 滑らかに変化させる（移動時間を調整）、ループなし animation ⇒ ページ表示後に即可動、ループあり transform ⇒ 変形（移動・拡大・回転・傾斜・遠近）が可能、ループなし です。 わかりづらいので、とても簡

こんにちは、WEBマーケティング部の杉尾です。 今回は枠内で文章（単語）の折り返しを指定するプロパティword-wrap と word-breakの使い分けを紹介します。 文章の折り返しを指定する 文字、文章の折り返しの指定をするプロパティはword-wrap と word-breakで、それらに値もいくつかありますが、現実に使用頻度が高いのは2つだけだと思います。 それが、『word-wrap:break-word;』と『word-break:break-all;』です。 word-wrap と word-breakとは どちらもCSS3のTextモジュールに属するプロパティです。 紛らわしい２つのプロパティですが、違いはというと、 ・word-wrap …… 単語の途中で改行するかどうかを指定する ・word-break …… 行の改行方法を指定する ということです。 word-wra