CSS フレックスコンテナ内の主軸方向の配置方法を指定する
フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを指定するのがjustify-contentプロパティです、このプロパティはフレックスコンテナに対して適用します。初期値は「flex-star...
2016-03
CSS CSS フレックスアイテムの幅の増減を個別指定
フレックスアイテムを配置したとき、フレックスコンテナの主軸方向に余白ができてしまうときや、逆に入りきらずはみ出してしまうときがあります。そんなときに、アイテムの幅を調整することで、コンテナ内にぴったり収めることができます。
サンプルコ...
CSS フレキシブルボックスレイアウトでアイテムの並び順を指定する
フレックスアイテムはソースコードに書かれた順番でフレックスコンテナ内に普通は配置されます。アイテムの配置順序をしたいときは、それぞれのアイテムがどの順序グループに属するのかをorderプロパティで指定します。グループを表す値を整数で指定する...
CSS フレックスコンテナでアイテムを複数行に配置する
フレックスコンテナ内の全てのフレックスアイテムは、１行で配置されますが、flex-wrapプロパティを利用すると、コンテナ内のアイテムを、複数行に配置できます。
フレックスアイテムが複数の行に分割されると、それぞれの行は独立して配置されま...
CSS フレキシブルボックスレイアウトを使う
久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます。ボックスのサイズや配置を柔軟に設定したり、調整したりできる方法をフレキシブルボックスレイアウトといいます。以前説明したpositionプロ...
D3.js D3.js サーバーのログを読み込んで、OSのシェアを表示してみる
D3.jsを利用して、サーバーログを読出して、情報を得ることができます。
サンプルコードの実行結果はこちら
D3.js フィッシュアイプラグインを使ってみる
今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利用します。
フィッシュアイプラグインはこちら
まずは上記のプラグインをダウンロードします。今回は、jsフォルダ内にfisheye.j...
D3.js グラフをソートして表示する
以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけではなく、インタラクティブに表現したいことがあります。たとえば、棒グラフで商品別の売り上げを表示する時、売れている順番に並び替えたいときです。
...
D3.js 鶏頭図(けいとうず)を表示する
D3.jsでは円グラフに一工夫を加えることで鶏頭図を表示できます。鶏頭図は円グラフと似ていますが。それぞれの扇形の中心角は一定で、量は中心からの半径で表示されます。
サンプルコードの実行結果はこちら
D3.js ツリーレイアウトを表示する
D3.jsにはツリーレイアウト(樹形図・木構造といったりもします)を生成することができます。ツリーレイアウトは以前の記事で書いたツリーマップと似ています。データセットに必要なプロパティ(キー名)も同一です。今回のサンプルコードでは会社の組織...