harada さんのアバター 3views

ブラウザのリサイズ時に特定の幅以下になったらリロードする

以下の記述でリサイズ時800px以下の場合にリロードされるようになります。 $(window).on("resize", function() { var w = $(window).width(); if(w < 800) { wi 2017年6月29日
harada さんのアバター 7views

D3.jsで、X軸の項目が表示幅より長い場合は斜めに表示する

translate(" + this.getBBox().height/2*-1 + "," + this.getBBox().height + ")rotate(-45)で斜めにすることができます。 たとえば以下のように記述します。 va 2017年6月22日
harada さんのアバター 8views

ChartJS:目盛りとグラフの間にpaddingを設定する

以下のオプションを設定することで、目盛りとグラフの間にpaddingを設定できます。 var options = { scales: { yAxes: [{//Y軸に設定したい場合 ticks: { padding: 100 } }], x 2017年6月15日
harada さんのアバター 34views

ChartJS:Y軸の目盛りに小数点を出さないようにする

こちらもオプション設定で解決するようです。 var options = { scales: { yAxes: [{ ticks: { beginAtZero: true, userCallback: function(label, inde 2017年6月15日
harada さんのアバター 28views

ChartJS:x軸の目盛りの最大表示数と表示角度を設定する

ChartJSでグラフを作成して、X軸の値の数が多い場合、自動で斜めに表示されます。 これをまっすぐのまま表示したい場合オプション設定で以下のように指定します。 var myChart = new Chart(ctx, { type: 'l 2017年6月14日
harada さんのアバター 19views

chart.js:縦のラインを全部非表示にする

Chart.jsに以下のオプションを設定することで、縦のメモリ、始まりの縦線を含めてすべて非表示にできます。 options: { scales: { xAxes: [{ display: true, stacked: false, gri 2017年6月13日
harada さんのアバター 2views

CakePHPで複数行のHTMLを指定した位置で読み込むようにする

複数行のHTMLなどを特定の位置に差し込みたい場合の記述方法です。 差し込みたい位置に以下のような記述をおきます。 <?= $this->fetch('subhead') ?> 差し込みたい内容を以下のタグで括って記述しま 2017年6月13日
harada さんのアバター 16views

D3.jsを利用したSVGにテキストを3つ並べる

表示サンプルはこちら HTML <script src="http://d3js.org/d3.v3.min.js"></script> <div id="text"> </div> Java 2017年6月8日
harada さんのアバター 4views

SVGの要素で指定できるタグのメモ

メモしておきます。 指定する要素によっては使えないこともあるかもしれません。 .attr("text-anchor", "middle")//テキストの表示位置(start,middle,end) .attr("fill", '#fff') 2017年6月7日
harada さんのアバター 52views

[VSCode]Visual Studio CodeでSassをコンパイルする方法の覚書

あらかじめ、NPM、Node.jsをインストールしておきます。 (1). VS Codeを開き、Shift+Command+P ショートカットで「コマンドパレット」を開きます。 (2). Configure Task Runnerと入力して 2017年6月5日
harada さんのアバター 19views

JavaScript:要素の高さを取得する

要素のIDを指定して、JavaScript高さを取得する方法です。 var divHeight; var obj = document.getElementById('ID名'); if(obj.offsetHeight) { divHei 2017年5月30日
harada さんのアバター 16views

JavaScript:画像のURLから高さと幅を取得する

以下の記述で画像のURLから高さと幅が取得できます。 var img = new Image(); img.src = '画像のURL';//高さと幅を取得したいURLを入力 var img_width = img.width; // 幅 2017年5月30日
harada さんのアバター 10views

CakePHPでjavaScriptとCSSファイルを指定した位置で読み込むようにする

以下のように記述すると、それを記述した位置でそのまま読み込まれてしまうため、思い通りの動きにならないことがあります。 <?= $this->Html->script('mdl-selectfield.min.js') ?& 2017年5月22日
harada さんのアバター 18views

flexboxで要素を真ん中に寄せて並べる

justify-content: center;とjustify-content: space-between;を指定する場合の例 デモはこちら CSS .flex1 { display: flex; display: -webkit-fl 2017年5月12日
harada さんのアバター 16views

CSS:background指定をまとめる場合の注意

.bg { background-color: rgba(0, 0, 0, 0.3); background-image: url("../img/bg.jpg"); background-repeat: no-repeat; backgr 2017年5月11日
harada さんのアバター 20views

D3.js:指定した範囲でrect要素を切り抜く

以下のように切り抜きたい範囲を指定して、要素に指定することで指定した範囲でrect要素を切り抜けるようです。 //切り抜く範囲を指定 svg.append("clipPath") .attr("id", "clip-rect") .appe 2017年5月1日
harada さんのアバター 229views

Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。 そのためjQuer 2017年5月1日
harada さんのアバター 28views

D3.jsのグラフを角丸にする(ドーナツグラフの場合)

角丸にしたいドーナツグラフのd3.svg.arc()などの後ろに以下を追加するだけで角丸にできるようです。 .cornerRadius(20) 追加例: var arc_simple = d3.svg.arc() .innerRadius( 2017年4月28日
harada さんのアバター 30views

MacをSierraにアップデート後にSassが利用できなくなった場合にすること

YosemiteとSierraの間にはEl Capitanがあるのですが、確かそれはまるまる飛ばしてYosemiteからSierraにアップデートしました。 するとその後しばらくたって何らかのタイミングからこれまで利用できていたSassが利 2017年4月25日
harada さんのアバター 37views

CSS:rgba指定を使わずに背景画像を透過する

<div class="bgimage">というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため以下の方法を利用しま 2017年4月20日
harada さんのアバター 25views

CSSでテキスト選択中の背景色と文字色を変更する

::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #fff; } 2017年4月20日
harada さんのアバター 88views

Material Design Liteの汎用クラス

Material Design Liteを利用することで簡単にマテリアルデザインを利用したサイトを構築することができます。 細かく汎用クラスが設定されており、よく使いそうなクラスをメモしておきます。 Material Design Lite 2017年4月18日
harada さんのアバター 21views

美しいグラデーションと幾何学模様のTrianglifyを背景に設定する方法

Trianglifyを利用して、簡単に美しいグラデーションと幾何学模様のTrianglifyを背景に設定することができます。 ファイルをダウンロードして読み込むか以下のCDNを利用することもできます。 設定例 読み込む <script 2017年4月13日
harada さんのアバター 26views

D3.jsのグラフを角丸にする

角丸にしたい棒グラフなどの.append("rect")がかいてあるところに.attr("rx", 4)と.attr("ry", 4)を追加するだけで実現するようです。 .attr("rx", 4) .attr("ry", 4) 追加例: 2017年4月11日
harada さんのアバター 133views

D3.jsを使ってラベル付きの円グラフを作成する

D3.jsを使うとさまざまなグラフがかけるようです。 さまざまなグラフ例:https://github.com/d3/d3/wiki/Gallery 試しにPie charts labelsをもとに以下のサンプルグラフを作成してみました。 2017年4月5日
harada さんのアバター 115views

chart.jsで各項目の太さを変えたグラフを表示する

項目数だけグラフを重ねることで実現できるようです。 HTML <div class="donutsChartCustom"> <canvas id="dnChart1" class="circle01" width="30 2017年4月4日
harada さんのアバター 15views

Adobe XDのショートカット

PhotoshopやIllustratorと同じショートカットもあるのですが、オリジナルのものもあるので覚えたいです。 オブジェクト系 オブジェクトをグループ化 Command + G オブジェクトをロック Command + L オブジェ 2017年3月22日
harada さんのアバター 9views

Illustratorの操作メモあれこれ

Illustratorでのドロップシャドウ 効果>スタイライズ>ドロップシャドウ Illustratorでの透明や乗算 ウィンドウ>透明 棒グラフの下に説明をつける データを入れる際に一行目に"2017年"など"でくくって記入する パーツを 2017年3月17日
harada さんのアバター 20views

Illustrator CCでマテリアルデザインのカラーパレット(スウォッチ)を読み込むメモ

Googleの公式サイトから「Download color swatches」をダウンロードして、解凍します。 Illustratorの上部メニューの「ウィンドウ」から「スウォッチ」を表示させます。 「スウォッチ」ウィンドウの右端の三本線の 2017年3月14日
harada さんのアバター 32views

ウェブページをPDFに保存した際にフォントが埋め込めれているかどうかの判断方法

Chromeで印刷画面を出して送信先を「PDFに保存」にしてウェブページをPDFに保存する際、そのウェブページで利用しているフォントが TrueTypeでない場合フォントが埋め込まれないため、一部のサービスではPDFファイルとして利用できな 2017年3月10日