harada のアーカイブ

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

2017年5月22日

以下のように記述すると、それを記述した位置でそのまま読み込まれてしまうため、思い通りの動きにならないことがあります。 ``` ``` そこで出力したい位置に以下のような指定をしておくことで、その場所に出力させることができます。 例:出力したい位置 ``` ``` 例:出力させたい内容 ``` ``` 参考:[【CakePHP】JSやCSSファイルを任意の位置で読み込む](http://www.p-
続きを読む

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

2017年5月12日

## justify-content: center;とjustify-content: space-between;を指定する場合の例 [デモはこちら](http://jsdo.it/haradaaa/uy74/edit) ### CSS ``` .flex1 { display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap
続きを読む

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

2017年5月11日

``` .bg { background-color: rgba(0, 0, 0, 0.3); background-image: url("../img/bg.jpg"); background-repeat: no-repeat; background-position: center 30%; background-size: cover; } ``` このように背景画像を指定している場合、まとめて書くと以下のような記述になりま
続きを読む

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

2017年5月1日

以下のように切り抜きたい範囲を指定して、要素に指定することで指定した範囲でrect要素を切り抜けるようです。 ``` //切り抜く範囲を指定 svg.append("clipPath") .attr("id", "clip-rect") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height",
続きを読む

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

2017年5月1日

以前は[WOW.jsを利用して簡単にアニメーションを導入する](http://hacknote.jp/archives/1122/)という記事のように、WOW.jsと[Animate.css](https://daneden.github.io/animate.css/)でアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。 そのためjQueryプラグインの[inview.js](https://github.com/
続きを読む

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

2017年4月28日

角丸にしたいドーナツグラフの`d3.svg.arc()`などの後ろに以下を追加するだけで角丸にできるようです。 ``` .cornerRadius(20) ``` 追加例: ``` var arc_simple = d3.svg.arc() .innerRadius(radius - 20) .outerRadius(radius - 10) .cornerRadius(20) .startAngle(-0.
続きを読む

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

2017年4月25日

YosemiteとSierraの間にはEl Capitanがあるのですが、確かそれはまるまる飛ばしてYosemiteからSierraにアップデートしました。 するとその後しばらくたって何らかのタイミングからこれまで利用できていたSassが利用できなくなってしまいました。 ぐぐってみるとどうやらSassとCompassがなくなってしまったようです。 参考:[Mac OS X El Capitan にしたらSassとCompassがなくなっていた](http:/
続きを読む

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

2017年4月20日

``というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため以下の方法を利用します。 ### CSS ``` .bgimage { display: block; position: relative; z-index: 1; } .bgimage:after { content: ""; background-i
続きを読む

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

2017年4月20日

``` ::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #fff; } ```
続きを読む

Material Design Liteの汎用クラス

2017年4月18日

Material Design Liteを利用することで簡単にマテリアルデザインを利用したサイトを構築することができます。 細かく汎用クラスが設定されており、よく使いそうなクラスをメモしておきます。 [Material Design Lite](https://getmdl.io/) ### テキスト色と背景色を変更する 以下の例のクラスのカラー名と数字をマテリアルデザインのパレットに当てはめることで色を指定できます。 色指定の詳細はこちらの記事
続きを読む

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

2017年4月13日

[Trianglify](http://qrohlf.com/trianglify/)を利用して、簡単に美しいグラデーションと幾何学模様のTrianglifyを背景に設定することができます。 ファイルをダウンロードして読み込むか以下のCDNを利用することもできます。 ## 設定例 ### 読み込む ``` ``` ### HTML例 ``` 背景に設定するボックス ``` ### JavaScript例 ``` func
続きを読む

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

2017年4月11日

角丸にしたい棒グラフなどの`.append("rect")`がかいてあるところに`.attr("rx", 4)`と`.attr("ry", 4)`を追加するだけで実現するようです。 ``` .attr("rx", 4) .attr("ry", 4) ``` ### 追加例: ``` var chart = d3.select("#chart") .append('svg') .append("g")
続きを読む

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

2017年4月5日

D3.jsを使うとさまざまなグラフがかけるようです。 さまざまなグラフ例:https://github.com/d3/d3/wiki/Gallery 試しに[Pie charts labels](http://bl.ocks.org/dbuezas/9306799)をもとに以下のサンプルグラフを作成してみました。 [サンプル](http://jsdo.it/haradaaa/e7eR) 変更点は以下です。 * グラフの背景色を透過色に
続きを読む

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

2017年4月4日

項目数だけグラフを重ねることで実現できるようです。 ### HTML ``` ``` ### CSS ``` .donutsChartCustom { position: relative; height: 400px; } .donutsChartCustom .circle01, .donutsChartCustom .circle02, .donu
続きを読む

Adobe XDのショートカット

2017年3月22日

PhotoshopやIllustratorと同じショートカットもあるのですが、オリジナルのものもあるので覚えたいです。 ## オブジェクト系 ### オブジェクトをグループ化 Command + G ### オブジェクトをロック Command + L ### オブジェクトを非表示 Command + ; ### オブジェクトからシンボルを作成 Command + K シンボルを作成すると、オブジェクトを一つ修正する
続きを読む

Illustratorの操作メモあれこれ

2017年3月17日

### Illustratorでのドロップシャドウ 効果>スタイライズ>ドロップシャドウ ### Illustratorでの透明や乗算 ウィンドウ>透明 ### 棒グラフの下に説明をつける データを入れる際に一行目に`"2017年"`など`"`でくくって記入する ### パーツを拡大 オブジェクト>パス>パスのオフセット ### パーツをweb用に保存 ウィンドウ>アセットの書き出し アセットの書き出しポップアップに
続きを読む

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

2017年3月14日

1. Googleの[公式サイト](https://material.io/guidelines/style/color.html#color-color-palette)から「Download color swatches」をダウンロードして、解凍します。 1. Illustratorの上部メニューの「ウィンドウ」から「スウォッチ」を表示させます。 1. 「スウォッチ」ウィンドウの右端の三本線のメニューを開きます。 1. 「スウォッチライブラリを開く」にマウス
続きを読む

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

2017年3月10日

Chromeで印刷画面を出して送信先を「PDFに保存」にしてウェブページをPDFに保存する際、そのウェブページで利用しているフォントが TrueTypeでない場合フォントが埋め込まれないため、一部のサービスではPDFファイルとして利用できないときがあります。 フォントを埋め込みできているかいないかは、Acrobat Readerの「ファイル」>「プロパティ」>「フォント」で確認できます。 ここにはPDF文書で利用されているフォントが羅列されるのですが、埋め込まれ
続きを読む

コマンドでMacのどのフォルダが重いのかを特定する

2017年2月28日

1. ターミナルを起動して以下のコマンドを打ちます。 ``` sudo du -sh /* ``` パスワードを要求されるので打ちこんでしばらくまちます。 ``` 容量 ディレクトリ名 ``` でリスト表示されるので、重いディレクトリ名を確認し再度以下のコマンドを打ちます。 ``` sudo du -sh /重いディレクトリ名/* ``` 重いディレクトリ名とは`/Users/名前/Library/*`のようなやつです。
続きを読む

UXデザインツールのAdobe XDがすばらしい

2017年2月21日

新しいアプリのプロトタイプをデザインするにあたってUXデザインツールの[AdobeXD](http://www.adobe.com/jp/products/experience-design.html)をはじめてインストールしてみました。 ### Adobe XDとは > Adobe Experience Design CC(ベータ版)(以下、Adobe XD)は、Webサイトやモバイルアプリのデザイン、プロトタイプの作成をこれ1本で実現する、まったく新しいク
続きを読む