パイチャートのSVG仕立て 〜アニメーションを添えて〜
Internet Explorer 50.86% Chrome 31.12% Firefox 11.28% Safari 5.01% Opera 1.28% other 0.45% 2015年10月の世界ブラウザシェア 出典: https://www.netmarketshare.com/ これはSVG Advent Calendar 2015の13日目の記事です。 お仕事でも個人的なものでも構いませんが、ウェブサイトにグラフを表示したいと思ったこと、またはそういう要望を受けたことはありませんか？ 私はありまます。ちょうど今もそうだったりします。まぁ、どちらもお仕事でなんですけど。 数字をビジュアル的に見せられると中身のうすっぺらいプレゼンでも妙に説得力があったりしますよね。 ウェブサイトにグラフを表示する手段のひとつとしてSVGがあります。Retinaなどの高密度ディスプレイでもキレイに
JavaScriptを使ったアニメーションが効果的！「グラフ」デザインの参考になる日本のウェブサイトをご紹介！ | 株式会社WEB企画
数字などのデータを見せる場合、表やグラフにすることにより、視覚的にわかりやすく伝えることが出来ます。ウェブサイトでは、主に統計情報を載せるようなウェブサイトや、採用情報ページでの会社の「データ見る」や「数字で見る」といったコンテンツで多用されているように思います。 そこで今回は、円グラフ、棒グラフ、折れ線グラフなどなど、グラフの魅せ方がとても上手で、しかもアニメーションと絡めてビジュアルにも富んだ日本のウェブサイトをご紹介してみます。 折れ線グラフがわかりやすい「生活定点」 http://seikatsusoken.jp/teiten/chart/1.html 「生活定点」は博報堂さんが提供する統計サイトです。とにかくたくさんの折れ線グラフが登場します。オンマウスした際に数値がわかりやすく表示されていて、しかも背景にうっすら縦棒が表示されることによって比較も簡単。直感的にデータを把握しやす
パレンテデータ | 採用情報 | 株式会社パレンテ
パレンテの福利厚生 No. 01 アニバーサリー休暇 誕生月の好きな日に1日休暇を取得できる制度です。お祝いをしたり、リフレッシュしたり。 No. 02 ハッピーウェディング休暇 入籍した日から1年以内に、連続した5日間で休暇を取得できる制度です。思い出作りに！ No. 03 弔事休暇 最大3日間の弔事休暇が取得できます。 No. 04 出産付き添い休暇 男性社員が奥様の出産日に休暇を取得できる制度です。 No. 05 コミュニケーション 促進制度 3ヶ月に1回 ひとり上限5000円で、コミュニケーション促進するイベントに補助金を支給します。飲み会であったり、食事会であったり。部門内外と円滑なコミュニケーションをとろう！ No. 06 インフルエンザ 予防接種補助 任意での受診が可能で、1年度に対して7,000円まで補助金が支給されます。 No. 07 ミネラルウォーター常備 フロア内にウ
position:absolute、margin:0 autoして左右中央配置する - not good but great
width/2だけネガティブマージンは面倒 position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。 ウンチを上下左右中央配置している。 top,left,right,leftをauto以外の値にする 上下左右中央配置にする .iconImage{ position: absolute; top:0; left: 0; right: 0; bottom: 0; margin:auto; width:145px; height:145px; background:url("http://jsrun.it/assets/2/X/4/b/2X4bJ.png") no-repeat; border-radius:10px; } top
ときどきWEB | PC各ブラウザ・スマホ・タブレットごとの動画形式についてまとめてやんよ!!!
動画コンテンツを制作するにあたってこれまでPCではFlash、スマホはMP4で設置しとけば何とかなる感がありますが、レスポンシブデザインサイトで制作する事を想定した場合、動画形式についてもブラウザ間の仕様やキャリア端末毎の問題点や把握すべき点がありそうだったので調査してみますた。 <video>タグについて webサイトにて動画コンテンツを設置する際は、HTML5で新たに追加された<video>タグを使用する。 これにより、Flash無しで動画が再生可能となる。iPhone・iPad・iPod Touchなど、Flashに対応していない端末で動画コンテンツを利用する際は、<video>タグだけが動画コンテンツに対応させられる唯一の方法となる。 <video> <source src='動画ファイル' type='video/拡張子; codecs="動画データ(MINEタイプやコーデック)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
