2017.03.28
「CSSアニメーションを使ったボタンが作りたい！...でも、もともと設定が決められたアニメーションボタンだとつまらない...。」 そんな風にお考えの方にぴったりの「Animista」というサイトを本日はご紹介します。 このサイトでは、ブラウザ上で回転や色、向き、バウンドといった様々なアニメーションを自分の好きな設定で作った後、CSSコードの出力が無料でできるようになっています。 自分でアニメーションをカスタマイズしてオリジナルの動きを考えられる、というのがうれしいですよね。 さっそく、使い方をご紹介します。 「Animista」の使い方 「Animista」にアクセスをすると、ロゴと一緒に「TRY ME!」のボタンが表示されますので、それをクリックしましょう。 すると、次のようなアニメーシ
つづきを読む
2017.01.30
Webサイトには、作り手としてクリックを促したいボタンがいくつもありますよね。 特に、ショッピングサイトにおいては「購入ボタン」が押されなければ意味がありませんし、動画配信サイトにおいては「再生ボタン」をいかに目立たせてクリックを促すかが重要です。 クリックを促すために、ボタンデザインにおいて気をつけるべきポイントはいくつかあります。 たとえば、ボタン上の表記を分かりやすくする、とか、押しやすいサイズで作成をする、ページ内で明るく目立つ色を選ぶ、などなど。 また、最近ではボタンを画像で作成するのではなく、CSSでおしゃれで動きのあるボタンを作成するのも当たり前になってきました。CSSでボタンを作成することで、圧倒的にファイルサイズを軽くし、かつ様々なエフェクトを柔軟に適用することもできるよ
つづきを読む
2016.11.25
ダウンロードや購入ボタン、お問い合わせに資料請求など...。Webサイトには、たくさんのボタンが置かれています。 そんな中、押してほしい！という「ボタン」にこそ、ちょっとしたホバーアニメーション（マウスカーソルを重ねたときに動きがあること）をつけることで、より興味喚起をしたり、ユーザーにクリックを促すことができますよね。 そんなホバーアニメーションが作れる、CSS3のサンプルコード集「Hover.css」を本日はご紹介します。 「Hover.css」の使い方 Hover.cssは、ボタンアニメーションのCSSソースコードを集めたサイトです。なんと、その数100種類以上！！ 可愛らしい動きをするものから、クールな印象のものまで、いろんなバリエーションのホバーアニメーションが揃っています。しか
つづきを読む
2016.11.20
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義している仕様の中から、以前に「calc()」を紹介したことがあります。今回は、「vw」と「vh」の紹介をしていきたいと思います。 ビューポートユニットとは？ 「vw」と「vh」は、CSS Values and Units モジュールの中のViewport Units という項で紹介されています。ビューポートは、Webサイトを表示しているブラウザの表示領域のことを意味します。つまり、ビューポートユニットというのは、ブラウザの表示領域に対して、どのくらいの幅または高さにしたいか、ということを指定することができるものです。レスポンシブWebデザインが当然となっている現在ですが、％指定をし
つづきを読む
2016.11.18
少し前まで、ローディングアニメーションといえばGIFアニメーションでしたが、最近ではCSSのみで実装するということが増えてきました。 CSSのアニメーションは、JavaScriptを知らなくても簡単にアニメーションを作ることができる手軽さがある上、システムにも負荷をかけません。そのため、ローディングアニメーションにはぴったりの技術なのです。 実現するには、CSS3から登場したanimation プロパティをアニメーションさせたい要素に付与します。 今日は、そんなCSSアニメーションで作られたローディング素材のコードを公開しているサイトをご紹介します。ぜひ、皆様のWebサイト制作やCSS3のお勉強に活かしてください。 1. Loaders.css Loaders.css このサイトは、28個
つづきを読む
2016.10.02
キリンが飲食店向けに展開していたお酒「キリン ハードシードル」を、家庭用にこの秋発売を開始しました！ ハードシードルも美味しいですが、そのサイトがまたオシャレなんです。 メインイラストも、どこかで見たことがあるような...？？？ ぜひ、ご覧になってみてくださいね。 シードル豆知識 シードルというのは、林檎を醗酵させて作られたお酒のことです。 果実酒とか、林檎のワイン、といえばイメージしやすいかもしれませんね。 世界中で飲まれているシードルですが、「シードル（cidre）」という呼称はフランスのもの。イギリスでは「サイダー（cider）」、スペインでは「シードラ（Sidra）」と呼びます。 大抵は発泡性であることが多く、「ハードシードル」も林檎のスパークリングワインという感じで爽やかにいただ
つづきを読む
2016.09.21
ブラウザによる表示のズレに困ったことはありませんか？ そんな時、リセットCSSを使えば、ブラウザ間での差異を解消することができます。 リセットCSSでよく使われるreset.cssやnormalize.css、そしてsanitize.cssを使い分けて、Webサイト制作に活かしましょう。 リセット用CSSとは Google Chrome、Internet Explorer、FireFoxやSafariなど、世界中で様々な種類のブラウザが使用されています。 それぞれのブラウザで、HTMLのタグごとにデフォルトのスタイル（余白やフォントの大きさといった見た目）を独自に定義しています。 このデフォルトスタイルのままWebサイトを制作すると、文字サイズや余白の大きさが違ってしまうなど、各ブラウザに
つづきを読む
2016.09.11
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義しているドキュメントの中に「calc()」という関数があります。Values and Units モジュールは、2015年6月11日に勧告候補となっている仕様書ですが、この calc() はすでに多くのブラウザが対応しています。こんなことしたかった！というのが、calc() によって実現できるかもしれません。 calc() ができること calc() 関数は、ひとことで言うとプロパティに設定する値を数式で計算することができるものです。「ボックスの高さを100%にしたいけど、その高さからヘッダーやフッターのピクセル(px)分だけ除きたい」なんて考えたことはありませんか。そういう様々な
つづきを読む
2016.09.10
Webページの装飾（レイアウトや見た目）を決める言語、CSS（Cascading Style Sheet）。 その3つ目のバージョンとして今なお規格策定中の言語が、CSS3です。 そのCSS3からは、文字を縦書きにしたり、ウェアラブルデバイスなどで活躍する角丸の輪郭を表現できたり、透過、グラデーションなど、幅広い表現ができるようになりました。 そんなCSS3で新たに加わったのが、アニメーションの表現です。 従来は、アニメーションといえばFlashやJavaScriptで表現してきましたが、CSS3でアニメーションが表現できるようになったことで、より手軽にWebページ上でアニメーションを導入することができるようになりました。 今日は、手軽にCSS3アニメーションを自分のWebサイトに採用する
つづきを読む
2016.03.13
ここ最近、トップの画像のようなアイコンを使っているWebサイトを見る機会が増えていると思いませんか？フラットデザインのコンセプトに合わせやすかったり、レスポンシブWebデザインを考えたときにメリットがあったりします。 しかし、このアイコン、画像で用意するといろんなパターンを想定して数種類のサイズを作らなくてはいけなかったり、例えばフリー素材でアイコンを探そうとしてもテイストが統一されたアイコンを探すのはなかなか難しいものです。 そこで、最近、よく使われるようになってきているアイコンフォントをご紹介したいと思います。特に今回は、BootStrapでも使われている「Font Awesome」をご紹介していきます。 アイコンフォントとは 「フォント」と言えば当然、文字の書体や大きさなどを決めた文
つづきを読む
2015.08.24
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS
つづきを読む
2015.07.01
夕空には明るい金星と木星が輝く7月になりました。 今日は、国立天文台のWebサイトで公開されている『多波長で観る宇宙』というコンテンツをご紹介します。 このコンテンツは、「異なる波長で宇宙観測を行うことにどんな意義があるのか」を解説するためのスペシャルコンテンツです。 X線や電波、赤外線や紫外線などといった電磁波の波長によって、宇宙の見え方が変わることが、このサイトを見ると学ぶことができます。 アンテナ銀河から始まり、スクロールすることで、さらにいくつかの銀河の宇宙の姿も観ることができます。 技術としては、HTML5とCSS3アニメーションで作られています。 Webで気軽に、宇宙のいろいろな姿を楽しむ七夕、というのもいいかもしれませんね。 関連サイト ・国立天文台「多波長で観る宇宙」 関連
つづきを読む
2014.12.12
フラットデザイン（起伏のない2Dデザイン）が流行してから、一色べた塗りのデザインがとても多く見られるようになりました。だからこそ、最近ではグラデーションを活用するデザインに新鮮味が出てきています。グラデーションといっても、以前流行したような立体的な表現をするための使い方ではなく、あくまでもフラットデザインや画像に重ねるようにして使う、というのが今風。 たとえばこのブログのヘッダー部分なんかもまさにグラデーションを使っています（※2014年12月現在）が、さらに写真ではなくアニメーションや動画と組み合わせるとよりトレンド感が出ます。具体例をご紹介しましょう。 WinShape Camps 海外サイトですが、背景いっぱいに表示した動画の上にグラデーションをかけていて、まさしくトレンドのデザイン
つづきを読む
2014.10.20
企業の人材ニーズを把握しておくことは、就職・転職を考えている方にはとても重要なことです。 特に、WebやITのスキルを持った人材は、様々な業界でひっぱりだこですし、年々求められるスキルの幅も広がっています。そんな中、自分の理想の就・転職を実現するためにも、企業の人材ニーズをきちんと把握し、それに合わせたスキルアップを図ることが成功の鍵と言えます。 そこで、Web専門の人材サービス会社「ウェブスタッフ」で、クライアント企業のサポートを行っている宇森彩さんに今日はご協力いただき、最近のWeb系人材ニーズについてのお話を聞いてきました。 拡大し続けているWeb業界の人材ニーズ ささくら「IT専門職の求人倍率は、2011年頃は約2.8倍だったそうですが、2013年には約5.1倍へと増加し、現在も増
つづきを読む
