harada さんのアバター 2views

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

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

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

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

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 さんのアバター 13views

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

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

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

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

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

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

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

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

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

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

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

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

Material Design Liteの汎用クラス

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

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

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

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

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

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

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

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

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

Adobe XDのショートカット

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

Illustratorの操作メモあれこれ

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

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

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

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

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

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

ターミナルを起動して以下のコマンドを打ちます。 sudo du -sh /* パスワードを要求されるので打ちこんでしばらくまちます。 容量 ディレクトリ名 でリスト表示されるので、重いディレクトリ名を確認し再度以下のコマンドを打ちます。 s 2017年2月28日
harada さんのアバター 154views

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

新しいアプリのプロトタイプをデザインするにあたってUXデザインツールのAdobeXDをはじめてインストールしてみました。 Adobe XDとは Adobe Experience Design CC(ベータ版)(以下、Adobe XD)は、W 2017年2月21日
harada さんのアバター 9views

Font Awesomeでサイトに載っているアイコンが出てこない時はファイルを更新する

Font Awesomeをパソコンにインストールして、Cheatsheetに載っているアイコンをコピーして利用しようとしたときに、化けて出てこない場合があります。 それは単純にファイルが古くなっている場合です。 以下の手順でフォントファイル 2017年2月17日
harada さんのアバター 25views

FirefoxとAdobe Acrobatを利用してPDF/X-1aでwebページを出力する

覚書です。 Firefoxでの操作 印刷したいページで「Command + p」のショートカットで印刷プロパティを表示します。 サイズなどを調整します。 左下の「PDF」とあるプルダウンから、「Save as Adobe PDF」を選択しま 2017年2月14日
harada さんのアバター 80views

スマホでjQueryUIのautocompleteを2回タップしなければならない現象を解消する

.autocompleteのところに以下のオプションを付与するとスマホ版でも1回のタップで選択できるようになります。 $("#input").autocomplete({ open: function(event, ui) { $('.ui 2017年2月8日
harada さんのアバター 95views

WordPressで画像アップロードで自動生成される画像サイズの種類が増えていた

WordPressのメディアアップロードで画像をアップロードすると、オリジナルファイルの他に、「設定>メディア」で設定したサムネイル・ミディアム・ラージ各サイズの画像が自動で生成されます。 ……と、思っていたのですが、uploadsフォルダ 2017年2月3日
harada さんのアバター 116views

スマホでのスクロールがスムーズではないときに設定するCSS

webページをスマートフォンで開いたときに、表示はおかしくないのにスクロールが遅いというか突っかかるような感じがするときは、以下のCSSをまずは設定してみるといいようです。 html { -webkit-overflow-scrolling 2017年2月2日
harada さんのアバター 11views

WP_Queryのパフォーマンスを上げられるかもしれない指定

以下の動きが不要な場合はそれぞれ以下の指定をWP_Queryに加えるとパフォーマンスがあがるかもしれないようです。 'no_found_rows' => true ページャー機能が不要な場合 'update_post_meta_cac 2017年2月1日
harada さんのアバター 13views

SQLで条件分岐するCASEステートメント

p.meta_valueに値が入っていて、その値がNULLの場合は0にし、値が入っている場合はその値をそのまま利用する。 CASE WHEN p.meta_value IS NULL THEN 0 ELSE p.meta_value END 2017年1月25日
harada さんのアバター 30views

jQueryUIのautocompleteをフォームクリックで表示する

通常の記述だと下カーソルか、何か入力した際にしか表示されないのですが、フォームをクリックするだけで候補リストを出したいとおもい調べたところ以下の方法でできました。 var stationsList = [ '東京駅', '上野駅', '品川 2017年1月24日
harada さんのアバター 12views

プログラムでカスタムタクソノミーの項目を一気に追加する

プラグインを利用すること無く、カスタムタクソノミーに複数の項目を一度に追加したい場合などは以下を実行すると追加できます。 ex.WordPressでcourseというカスタムタクソノミーを追加している場合 addCourse(); func 2017年1月19日
harada さんのアバター 22views

number_format関数は小数点以下を四捨五入する

数字を3桁区切りにしてくれるnumber_format関数。 これに小数点込みの数字を含めると、四捨五入になるようです。。 知ってて利用しているのならいいのですが、無意識だと危ないですよね・・・! 四捨五入・切り捨て・切り上げにはそれぞれ以 2017年1月16日