goto_jp のアーカイブ

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

2017年6月28日

* **目的:** トップページのスライド画像の更新を、固定ページから簡単に行いたい。 * **問題:** `` ベースの画像をそのまま引っ張ってくるとレスポンシブ対応がつらい。 固定ページに下記のHTMLを書いていたとする。 ``` ``` ただ表示するだけならこのままでもいいが、前述の **問題** がある。この画像を、何とかしてCSSの `background-image` で扱うように変更したい。 ### スライドを呼び出すWo
続きを読む

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

2017年6月2日

一昔前はヘッダーやフッターの固定にCSSやJavaScriptでやたら工夫が必要でしたが、今はGrid一つで簡単・安全にできます。 See the Pen Grid only App layout sample by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### HTML ``` header ... ... foo
続きを読む

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

2017年5月31日

CSSでフォントをマスク化する方法です。 マスクされてることが分かりやすいようhoverアニメーションも付けてます。 See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### CSS マスクに関わる箇所は以下の部分です。 ```css h1 { 〜 color: transparent; background: url("{画像}
続きを読む

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

2017年5月16日

以下はGridレイアウトで画面全体をレイアウトした例です。 ブログによくあるレイアウトですが、Gridレイアウトでは**列と行**が要のため赤線を入れています。 See the Pen CSS Grid layout test 4 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### HTML ```html ヘッダー メイン ナビゲーション 広告 サイド
続きを読む

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

2017年4月25日

Gridレイアウトで幅指定をする際に「fr」という値を使えます。 See the Pen CSS Grid layout test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記のグリッド指定のCSSは以下のようにしています。 ``` grid-template-columns: 1fr 2fr 3fr 1fr; grid-template-rows: 1fr 2fr 3fr; ```
続きを読む

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

2017年4月19日

まずはサンプルをご覧ください。 See the Pen CSS Grid layout test 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルは10個のdivタグにGridレイアウトを適用したものです。 今回はGridレイアウト用プロパティを3つ使っています。この3つだけ覚えれば一般的なWebデザインなら実用に耐えうるレイアウトができます。 * grid-template-c
続きを読む

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

2017年2月28日

同一ファイルの別シートではなく、別のファイルにある値を参照したい…そんな時に使えるのが **IMPORTRANGE** 関数。 ``` IMPORTRANGE("abcd123abcd123", "シート1!A1:C10") ``` 一つ目の値は**スプレッドシートキー**で、GoogleスプレッドシートのURLの下記赤字部分に当たります。 https://docs.google.com/spreadsheets/d/**********/ QUERY 関
続きを読む

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

2017年1月24日

サンプルは以下。 See the Pen Google Chat Custom Tooltip 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 同じデータのグラフですが、下のものはマウスオンしたときのツールチップに「個」と書き加えています。 グラフ描画の直前に下記コードでフォーマットを書き換えています。 ``` var formatter = new google.visualizatio
続きを読む

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

2017年1月19日

こんにちは、ゴトーです。 最近ちょくちょくロゴにSVGアニメーションを利用しているサイトを見るので、試しにやってみたところJSライブラリなど使わず簡単にできたのでご紹介します。 「[HTMLでSVGを描画する](http://hacknote.jp/archives/24634/)」でSVGの描画について書きましたが、この描画方法にCSSを加えてアニメーションさせます。在りし日のFlashを彷彿とさせる動きができます。 See the Pen SVG A
続きを読む

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

2017年1月12日

こんにちはゴトーです。 タイピング中に delete と間違えて一番右上にある Eject キーを押すことが結構あり、さすがにストレス溜まるのでキー割り当てを変えられないか探してみたら丁度よいソフトがありました。 [Karabiner](https://pqrs.org/osx/karabiner/index.html.ja) ### 使い方 1. [Karabiner](https://pqrs.org/osx/karabiner/index.htm
続きを読む

HTMLでSVGを描画する

2017年1月6日

あけましておめでとうございます、ゴトーです。 子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。 新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃないですか。SVGで楽しましょう。 SVGの使い方は3つあります。 * IMGタグでsvgファイルを呼び出す * SVGタグで直接記述する * USEタグで使いまわす 1つ目は従来の画像の使い方と変わらないので、
続きを読む

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

2016年12月1日

[日本語フォントこそ指定したい自動カーニング](https://ics.media/entry/14087) こちらを拝見して今まで知らなかったCSSプロパティに衝撃を受けたのでサンプルを作りました。 See the Pen font-feature-settings Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. カーニング調整がされている方に指定しているCSSは下記のみ。 ```
続きを読む

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

2016年11月18日

下記仕様の「招待システム」をWordPressのContactform7とJavaScriptのみで実装する方法です。 * フォームを送信すると自分の招待コードが発行される * 招待コードとフォームURLを友達に伝え入力してもらう * 招待コードを入力してもらうことで何らかのインセンティブを得られる ネタばらしからすると、JavaScriptで乱数を生成してそれを招待コードに使うごく簡易なものです。   ### 1. Contactform7の機能
続きを読む

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

2016年11月11日

「[A-Frame](https://aframe.io/)」の``````について紹介します。 ### サンプル See the Pen A-Frame Basic : cylinder by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ### a-cylinderの基本 ``` ``` [前回で「a-box」を紹介しました](http://hacknote.jp/archive
続きを読む

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

2016年11月9日

``` echo date('Y-m-t', strtotime("2016-11-01")); ``` 日付フォーマットの「t」はその月の日数を返すので、必然的に末日になる。
続きを読む

【JavaScript】MutationObserverでDOMを監視する

2016年11月4日

ボタンクリックなどユーザが自発的にするイベント以外で、「ある要素がある状態になった時」にイベントを発生させたい時、その「ある要素」を監視する必要があります。そんな時に```MutationObserver```を使うことで解決します。 ### サンプル See the Pen MutationObserver Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リンクをクリックするとアラートが出てbox
続きを読む

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

2016年10月31日

Windows10のEdgeでフォームを確認したら、inputフィールドからplaceholderが消えてしまっていた。 同じくWin10のIE11で確認したらplaceholderがちゃんと表示されていたので、何退化しとんじゃと思って対策を調べたらバッチリとEdgeのバグでした。 https://connect.microsoft.com/IE/feedback/details/1627778/microsoft-edge-placeholder-bug
続きを読む

Facebook Messengerで送るリンク

2016年10月28日

Facebookの「いいね」や「シェア」ではなく、特定の人へMessenger形式で送るためのリンク。 AppIDが必要な点に注意。 設定については[公式ドキュメント](https://developers.facebook.com/docs/sharing/reference/send-dialog)を参照してください。 なお「いいね」や「シェア」と同じく、投稿本文の内容はいじれません。 ``` Messenger ``` 正式には「送信ダ
続きを読む

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

2016年10月27日

最近ハマっている、HTMLだけでVR空間を作れるライブラリ「[A-Frame](https://aframe.io/)」について紹介します。 ### 準備 ヘッダーでA-Frameのライブラリを読み込む必要があります。今回のサンプルは下記のCDNを使っています。 ``` https://cdnjs.cloudflare.com/ajax/libs/aframe/0.3.2/aframe.min.js ``` ### サンプル See the
続きを読む

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

2016年10月20日

以前下記の内容を書きました。 [ヒラギノ角ゴが太く見える問題を解決する](http://hacknote.jp/archives/22066/) MacOSが El Capitan 以降の人ならこれで解決しますが、それ以前の人は解決しません。 旧式の「ヒラギノ角ゴPro」が当たってしまい、SafariとChromeでデブって見えてしまうのですが、一部サイトでは「ヒラギノ角ゴPro」のまま細身に見えていたので、調べたところ下記のCSSプロパティで解決しました。
続きを読む