goto_jp さんのアバター 9views

Pugでリストをループ出力する

See the Pen Pugのループ処理 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLのメタ言語 Pug (旧名Jade)の、forとeachを使ったループの書き方サンプルです。 2017年8月9日
goto_jp さんのアバター 11views

Visual Studio Code:保存時に自動フォーマットする

実は標準機能に「保存時に自動フォーマット」が存在していた。 基本設定 -> 設定 を開き、右側のユーザー設定に以下を追加する。 "editor.formatOnSave": true, これまでいちいち手動で alt + shift + F 2017年8月4日
goto_jp さんのアバター 24views

cronで複数行コマンドを叩く

*/5 * * * cd /hoge/fuge; node hoge.js 上記cronで、5分おきに /hoge/fuga にcdしてhoge.jsを実行する。 セミコロン;を入れることでコマンド行を区切ることができる。 コード内で相対パ 2017年8月2日
goto_jp さんのアバター 46views

WordPress:投稿記事のHTMLをPHPにパースして自由自在に扱う

目的: トップページのスライド画像の更新を、固定ページから簡単に行いたい。 問題: <img> ベースの画像をそのまま引っ張ってくるとレスポンシブ対応がつらい。 固定ページに下記のHTMLを書いていたとする。 <li> 2017年6月28日
goto_jp さんのアバター 41views

CSS3:Gridレイアウトで簡単に作れるモバイル用レイアウト

一昔前はヘッダーやフッターの固定にCSSやJavaScriptでやたら工夫が必要でしたが、今はGrid一つで簡単・安全にできます。 See the Pen Grid only App layout sample by Kazuyoshi G 2017年6月2日
goto_jp さんのアバター 117views

CSS3:フォントで画像をマスクする

CSSでフォントをマスク化する方法です。 マスクされてることが分かりやすいようhoverアニメーションも付けてます。 See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) 2017年5月31日
goto_jp さんのアバター 82views

CSS Gridレイアウト入門:グリッドの結合と列番号・行番号の概念

以下はGridレイアウトで画面全体をレイアウトした例です。 ブログによくあるレイアウトですが、Gridレイアウトでは列と行が要のため赤線を入れています。 See the Pen CSS Grid layout test 4 by Kazuy 2017年5月16日
goto_jp さんのアバター 223views

CSS Gridレイアウト入門:「fr」でのサイズ指定

Gridレイアウトで幅指定をする際に「fr」という値を使えます。 See the Pen CSS Grid layout test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記のグリ 2017年4月25日
goto_jp さんのアバター 146views

CSS Gridレイアウト入門:基本の3プロパティ

まずはサンプルをご覧ください。 See the Pen CSS Grid layout test 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルは10個のdivタグにGridレ 2017年4月19日
goto_jp さんのアバター 60views

IMPORTRANGE関数で外部のスプレッドシートファイルを参照する

同一ファイルの別シートではなく、別のファイルにある値を参照したい…そんな時に使えるのが IMPORTRANGE 関数。 IMPORTRANGE("abcd123abcd123", "シート1!A1:C10") 一つ目の値はスプレッドシートキ 2017年2月28日
goto_jp さんのアバター 87views

【Googleチャート】ツールチップのフォーマットを書き換える

サンプルは以下。 See the Pen Google Chat Custom Tooltip 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 同じデータのグラフですが、下のものはマウスオン 2017年1月24日
goto_jp さんのアバター 1,298views

CSSだけでSVGをアニメーションさせる

こんにちは、ゴトーです。 最近ちょくちょくロゴにSVGアニメーションを利用しているサイトを見るので、試しにやってみたところJSライブラリなど使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きました 2017年1月19日
goto_jp さんのアバター 84views

MacのEjectキーに別の挙動を割り当てる

こんにちはゴトーです。 タイピング中に delete と間違えて一番右上にある Eject キーを押すことが結構あり、さすがにストレス溜まるのでキー割り当てを変えられないか探してみたら丁度よいソフトがありました。 Karabiner 使い方 2017年1月12日
goto_jp さんのアバター 224views

HTMLでSVGを描画する

あけましておめでとうございます、ゴトーです。 子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。 新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃないで 2017年1月6日
goto_jp さんのアバター 181views

文字詰め(カーニング)をCSS1行で設定する

日本語フォントこそ指定したい自動カーニング こちらを拝見して今まで知らなかったCSSプロパティに衝撃を受けたのでサンプルを作りました。 See the Pen font-feature-settings Test by Kazuyoshi 2016年12月1日
goto_jp さんのアバター 106views

WordPressのContactform7だけで作る簡易招待システム

下記仕様の「招待システム」をWordPressのContactform7とJavaScriptのみで実装する方法です。 フォームを送信すると自分の招待コードが発行される 招待コードとフォームURLを友達に伝え入力してもらう 招待コードを入力 2016年11月18日
goto_jp さんのアバター 57views

A-Frame入門:a-cylinder(円柱)とa-sphere(球)

「A-Frame」の<a-cylinder>について紹介します。 サンプル See the Pen A-Frame Basic : cylinder by Kazuyoshi Goto (@KazuyoshiGoto) on C 2016年11月11日
goto_jp さんのアバター 34views

【PHP】特定の月の末日を取得する

echo date('Y-m-t', strtotime("2016-11-01")); 日付フォーマットの「t」はその月の日数を返すので、必然的に末日になる。 2016年11月9日
goto_jp さんのアバター 573views

【JavaScript】MutationObserverでDOMを監視する

ボタンクリックなどユーザが自発的にするイベント以外で、「ある要素がある状態になった時」にイベントを発生させたい時、その「ある要素」を監視する必要があります。そんな時にMutationObserverを使うことで解決します。 サンプル See 2016年11月4日
goto_jp さんのアバター 379views

MS Edge で placeholderが消えてしまう問題の解決

Windows10のEdgeでフォームを確認したら、inputフィールドからplaceholderが消えてしまっていた。 同じくWin10のIE11で確認したらplaceholderがちゃんと表示されていたので、何退化しとんじゃと思って対策 2016年10月31日
goto_jp さんのアバター 58views

Facebook Messengerで送るリンク

Facebookの「いいね」や「シェア」ではなく、特定の人へMessenger形式で送るためのリンク。 AppIDが必要な点に注意。 設定については公式ドキュメントを参照してください。 なお「いいね」や「シェア」と同じく、投稿本文の内容はい 2016年10月28日
goto_jp さんのアバター 171views

A-Frame入門:a-planeとa-box

最近ハマっている、HTMLだけでVR空間を作れるライブラリ「A-Frame」について紹介します。 準備 ヘッダーでA-Frameのライブラリを読み込む必要があります。今回のサンプルは下記のCDNを使っています。 https://cdnjs. 2016年10月27日
goto_jp さんのアバター 110views

ヒラギノ角ゴが太く見える問題を解決する:その2

以前下記の内容を書きました。 ヒラギノ角ゴが太く見える問題を解決する MacOSが El Capitan 以降の人ならこれで解決しますが、それ以前の人は解決しません。 旧式の「ヒラギノ角ゴPro」が当たってしまい、SafariとChrome 2016年10月20日
goto_jp さんのアバター 88views

CSSだけで数値をカウントし表示する

サンプルはこちら。 See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLにもCSSにも数値は書いておらず、連番リスト(o 2016年10月5日
goto_jp さんのアバター 94views

iOSでtextareaの余白が大きくなる

input[type=text], input[type=password], textarea { 〜 padding: 15px; 〜 } 上記のようなCSSでフォームパーツに一括して余白を指定していたところ、PCでは問題ないがiOSだ 2016年10月4日
goto_jp さんのアバター 31views

CSS3Dの基本

See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSだけで3D空間を作れます。 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパ 2016年9月29日
goto_jp さんのアバター 158views

CSSだけで作る万華鏡

See the Pen kaleidoscope by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認でき 2016年9月27日
goto_jp さんのアバター 838views

GulpでCompassのビルドとCSSの最適化&圧縮する決定版

前提 現在GulpでSassやLessやCompassを使っている人向け より最適なCSS出力をしたい人向け 下記のディレクトリ構造を仮定 project - scss - css - .csscomb.json - config.rb - 2016年9月21日
goto_jp さんのアバター 269views

ヒラギノ角ゴが太く見える問題を解決する

MacのChromeだけで妙にフォントが太く感じ、実際に font-weight:300 を指定しても500以下は無視されていたので調べたところ、下記のことが分かった font-family にこれまで「 Hiragino Kaku Got 2016年9月7日
goto_jp さんのアバター 398views

Contactform7のコンバージョンをAnalyticsで解析する

Contactform7は送信してもページ遷移せず、ボタンにonclickも含められないため、Google側が提示する方法は直接使えない。 なのでContactform7が公式に案内している下記方法を使う。 http://contactfo 2016年9月5日