alter.js BLOG
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。

【D3.js講座】D3.jsで折れ線グラフを描画する(前編)

 今回は、D3.jsを使った折れ線グラフの描画をご紹介します。 前回は簡単なsvg描画を紹介しましたが、今回はデータビジュアライゼーションを目的としているD3.js本来の利便性を感じられるかと思います。 さっそく実装を紹介します。 日本のオリンピックにおけるメダル取得数の推移グラフ 今回もオリンピック …

【D3.js講座】D3.jsを使用した図形の描画

 アナトミーではD3.jsを使用しsvgタグでタイルを描画しています。 データごとに属性の値を変更する処理は複雑ですが、D3.jsを使用すると比較的簡単に描画できます。 簡単なデータの可視化 前回に引き続き、リオ・オリンピックの国別メダル獲得数のデータを使用し、データごと描画する図形の大きさ、色を変え …

SVGで作るスマホ用チェックボックスの基本

  • 2016.09.05
  • CSS

 前回はCSSだけで作る角丸ボタンの基本を紹介しました。 今回はSVGを使ってきれいに チェックボックス を作る作り方を紹介します。 チェックボックスもスマホサイトではよく見かけると思います。 同意を求めるときや、最終確認の際に チェックボックス は必需品だと思います。 目立たせたい場合もあると思うの …

【D3.js講座】 D3.jsとは?

NO IMAGE

 アナトミーでは、webサイトの情報を俯瞰するというコンセプトで開発しており、多量のデータをブラウザの1画面に収める必要がありました。 そこで利用したのが D3.js です。 D3.jsはデータの可視化のためのJavaScriptライブラリです。(公式サイト:https://d3js.org/) アナ …

CSS だけで作る角丸ボタンの基本

  • 2016.06.29
  • CSS

 CSS だけで角丸ボタンを作る作り方 こんにちは! 我々は弊社の製品ジーンコードを使って日々PCサイトのスマホ最適化に向けて変換を行っています。 実際に仕事の中で使ったマルチデバイス対応におけるちょっとした技術を、このブログに書き留めておきます。 今回はCSSだけで角丸ボタンを作る作り方です。 スマ …

スマホサイトで横長のテーブルをどう扱うか

 PCサイトでよくみる横長のテーブルですが、同じ情報をスマホサイトに組込む場合、その限られた表示幅ゆえに見せ方を工夫する必要があります。 (PCサイトによくある横長のテーブル) 今回は弊社が構築したサイトの中から、複雑なテーブルをスマホ用に組み替えた変換例をご紹介します。 テーブルの見出しを固定し、ペ …

window.openerがiOS版Chromeで使えない問題に対処するには?

 こんにちは!エンジニアの宇都宮です。 普段はジーンコードを利用したスマートフォンサイトの構築を担当しています。今回はiPhoneのGoogle Chrome(以下、iOS版Chrome)でポップアップウィンドウがあるサイトを変換する際のTipsをご紹介したいと思います! 「ポップアップの住所検索画面 …

attachEvent 関数をスマホで動作させるには?

 業務システムがiPadで見れない!? 社内業務システムなどIEをターゲットとしたWebサイトをスマホで見ると、JavaScriptエラーが発生してサイトが正しく動作しないことがあります。PCの場合なら「IEを互換モードで使用する」といった回避策がありますが、AndroidやiPhone/iPadの場 …

スマホ入力フォームを最適化する4つの方法 (後編)

 「スマホ版:入力フォーム改善メソッド(後編)」です。 今回は入力エラーを未然に防ぐ4つのメソッドを解説し、スマホサイトのフォーム離脱を防ぐUI改善施策(EFO)を紹介します。 ▼前回の記事はこちらから スマホ版入力フォーム改善メソッド(前編)〜膨大な項目数と情報量をもつ入力フォーム〜 /archiv …

Page Top