goto_jp のアーカイブ

文字詰め(カーニング)を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プロパティで解決しました。
続きを読む

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

2016年10月5日

サンプルはこちら。 See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLにもCSSにも数値は書いておらず、連番リスト(ol)も使っていません。 ### 変数をカウントする ``` h2 { counter-increment: x; counter-reset: y; } h3 { counter-incr
続きを読む

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

2016年10月4日

``` input[type=text], input[type=password], textarea { 〜 padding: 15px; 〜 } ``` 上記のようなCSSでフォームパーツに一括して余白を指定していたところ、PCでは問題ないがiOSだけSafari、Chromeともにtextareaの余白が2pxほど大きくなる現象にぶつかった。 原因は不明で情報も特に見当たらなかったので下記のような大雑把な対応をしました。
続きを読む

CSS3Dの基本

2016年9月29日

See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSだけで3D空間を作れます。 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認できます。 ## CSSの3D表現に必要なプロパティ ### perspective ``` perspective: 1000px; ``` サンプルでは```body```タグ
続きを読む

CSSだけで作る万華鏡

2016年9月27日

See the Pen kaleidoscope by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認できます。 用いてるテクニックとしては以下2点。 * CSS Animation * CSS 3D この万華鏡は1つの本体(parent)の中に3つの面(c1〜3)で構成しています。 本体はただ画面中央に鎮座
続きを読む

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

2016年9月21日

# 前提 * 現在GulpでSassやLessやCompassを使っている人向け * より最適なCSS出力をしたい人向け * 下記のディレクトリ構造を仮定 ``` project - scss - css - .csscomb.json - config.rb - gulpfile.js - package.json ``` # モジュールインストール ``` npm i gulp-plumber -D npm i gulp
続きを読む

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

2016年9月7日

MacのChromeだけで妙にフォントが太く感じ、実際に `font-weight:300` を指定しても500以下は無視されていたので調べたところ、下記のことが分かった * `font-family` にこれまで「 **Hiragino Kaku Gothic Pro** 」を指定していたが「 **Hiragino Sans** 」に変える * `@font-face` を使うことでより確実にウェイトを操作できる(当然Mac限定にはなる) See the Pe
続きを読む

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

2016年9月5日

Contactform7は送信してもページ遷移せず、ボタンにonclickも含められないため、Google側が提示する方法は直接使えない。 なのでContactform7が公式に案内している下記方法を使う。 [http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/](http://contactform7.com/ja/tracking-form-submissions
続きを読む

CSS3 : 画面サイズで相対指定できる「vh」と「vw」

2016年8月26日

まずはサンプルから。 See the Pen Full window contents by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. Box1〜3と書かれた3つの``で構成しています。 この``には以下のように縦幅が設定されています。 ``` section { // vh,vw使ってるところだけ抜粋 height: 100vh; // 100vh = ウィンドウの縦幅100%
続きを読む

flexboxの順序を入れ替える

2016年8月10日

一昔前は左右逆なレイアウトを作る時は float を使うことが多かったですが、CSS3のflexboxを使えば簡単にできます。 See the Pen CSS3 Flexbox : 左右並び替え by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記レイアウトはいずれも同一のHTMLで、2つ目のボックスをプロパティ一つで要素の順序を入れ替えています。 ``` .flex2 { flex-flow: ro
続きを読む

Vagrant環境にWordPressを簡単にインストールできる「VCCW」を試してみる

2016年7月14日

ローカル環境でWordpressを久々に作るにあたってXAMPPかMAMPで…という考えはもう古いと思ったところ、案の定VagrantでWordpress環境を作れるパッケージがあったので使ってみた。 [VCCW - A WordPress development environment.](http://vccw.cc/) 「Getting Started」に沿って進めるだけですが、自分がやった手順で紹介します。 ## VCCWでWordpressを起動す
続きを読む

IE11で、フレームを使ったページでFontAwesomeが表示されない時の対策

2016年3月29日

IE11に限り、フレームを使っているサイトで片側のフレームだけでFontAwesomeが表示されないことがあった。 どちらかのフレームが必ずなるわけではなく、左がなったり右がなったりする。 ググるとキャッシュの話などが出てくるが、フレームに関しては情報が皆無。 ピンときたのはHTML描画とファイル読み込みなどの完了タイミングがフレームごとにズレていること。 いずれかのフレームの描画が完了したら、他のフレームはフォントの読み込みが止まっているのでは?と推測し
続きを読む