safariでbuttonタグにdisplay:flexが効かない問題

buttonタグを使って表現する時に困った事です。このようなボタンを表現する時に <button>さらに記事を見る</button> のように作るとしてcssで button { width: 100%; height: 50px; display: flex; align-items: center; justify-contente: center; } のようにテキストを上下…

2017-09-01

ページネーションによるcanonicalタグの対応

ページネーションは一連の長い記事を複数のページに分けたり、いくつかのまとまりに分けたりするときによく使われます。例えば 1ページ目はhttps://hogehoge?page=1 2ページ目はhttps://hogehoge?page=2 のようなURL設定する場合があるとします。このよう…

2017-08-30

運動しましょう！

今日はケータイからの投稿です。中学高校でやってたバスケしてきました！定期的にやってます！社会人になってから風邪で本格的に休んだのは2日ぐらしかないのでいたって健康です。適度に運動して健康を維持する事はとても大事ですね！仕事のパフォーマン…

2017-08-29

cpコマンドでハマった事

cpコマンドを使ってファイルやフォルダをコピーしようとした時にハマった事です。 cp hoge/assets build のようにやると、もともとbuildフォルダが存在しないのでエラーになってしまいます。 buildフォルダが作成されbuildフォルダの中にhogeの中のassetsフ…

2017-08-28

ステータスコード1xx系3xx系

Webを支える技術 ── HTTP，URI，HTML，そしてREST（WEB+DB PRESS plusシリーズ）｜gihyo.jp … 技術評論社先日購入した本から１つ。よく見るステータスコードは 2xx系のリクエストの成功 4xx系のクライアントエラー 5xx系のサーバエラー他に1xx系の処理中…

2017-08-25

sketchで透明度を簡単に変更する

あるレイヤーのopacityを調節する時にinspector内にあるopacityを設定する箇所でいじれます。ここで設定することもできますが、やっぱりショートカットキーを使ってさくさく操作したいところ。そこで1~9のキーを押すことで簡単にopacityを変更することが出…

2017-08-24

sublimeText 戻るショートカットキー

こんばんは。chocotakaです。コーディング中に入力した内容を無かったことにしたかったり、入力前に戻りたいに使うショートカットキーは cmd + Z このキーはとてもよく使います。しかし過去に戻りたい時にたまにあるのが、cmd + zで戻りすぎてしまう時。 …

2017-08-23

cssでカスタムイージング

cssでアニメーションをしたい時にはtransitionを設定したりanimationを設定したりします。さらにアニメーションにイージングを細かく指定したい時にcubic-bezierを使うととても便利でした。トランジションの変化が進行する時間をX軸、変化の度合いをY軸と…

2017-08-21

sketchで要素間の幅を測る

sketchである要素間のマージンが何ピクセルあるか調べる時にとっても便利なショートカットキーがあります。それは調べたい要素にフォーカスをあてた状態でaltを押し続けるだけです。あとはカーソルを動かしてみると、数値が表示されます。とても便利でデ…

2017-08-15

URIとURLとURN

Webを支える技術 ── HTTP，URI，HTML，そしてREST（WEB+DB PRESS plusシリーズ）｜gihyo.jp … 技術評論社先日購入した本から１つ。世間一般的に使われている言葉でURLがあります。 URLはサイトのアドレスを指す時に使ったりしますが、正しい名称はURIです…

2017-08-10

【css】クラスの付け替えで擬似要素は上書きできない？(解答編）

先日書いたこちらの記事【css】クラスの付け替えで擬似要素は上書きできない？ - chocotakaの日記こちらchromeの仕様のようで、safariやfirefoxで検証した結果上書きする事が出来ていました。もしこのような実装にぶつかることがありましたら、気をつけ…

2017-08-09

【css】クラスの付け替えで擬似要素は上書きできない？

cssの擬似要素でよく使う:beforeと:afterがあります。クラスを付け替えてスタイルを指定しようとしていたのですが、擬似要素のcssは上書きできませんでした。最強の!important攻撃ですら効きませんでした。cssは奥が深い。

2017-08-08

【css】特定の属性を持つ要素に適用する

cssで表現できる事がどんどん増えていますが、意外と知られてなかったり知っておくと便利な方法があります。今回はその中の１つの、特定の属性を持つ要素にcssを適用する。 a[title] { color: red; } 見慣れない書き方の人もいると思いますが、この指定の仕…

2017-08-08

sublimeText 関数の定義元を検索

使用している関数等の定義元のコードを探すときに便利なショートカットキーがありました。検索したい関数名にカーソルを合わせて cmd + shift + I で、参照元のファイルが一覧で表示されます。 sublimeText3ではホバーさせるだけで表示されるようになってい…

2017-08-04

sublimetext 行選択ショートカットキー

今日も作業効率の上がるショートカットキーです。行をコピーするショートカットキーです。 cmd + Lでカーソルのある行全部を選択することができます。そのまま cmd + Lを続けて押すと次の行、次の行と選択される範囲が広くなっていきます。その行をコピー…

2017-08-02

sublimeTextで小文字⇄大文字

エディターはsublimeTextを愛用してかれこれ5年以上経つのですが、ずっと無料版で使っていました。そして購入しました。無料版いままでありがとう。有料版これからよろしくお願いします。せっかく購入したので意欲的にショートカットキーを覚えようと思い…

2017-08-02

sketchで色をすぐ調べる方法

sketchである要素の色を調べたい時に、レイヤーからその要素をクリックしていって調べる方法もありますが、階層が深い場合手間になります。そこで簡単な方法で、ctrl + cでカラーの抽出が可能になります。このようにカーソルが丸い円になりその範囲内にあ…

2017-07-31

テキストをCSSで縦書き表示

テキストは基本横書きで、文字は左から右へ表示されます。縦書きで表示する案件がなかったので、縦書きで表示する場合はどうしたらいいか調べました。 writing-mode これをcssで定義すれば縦書きになります。 writing-mode: vertical-rl なら右から左へ wri…

2017-07-27

コミットログを修正

こんばんは、chocotakaです。 gitのコミットログは、自分で過去のコミットを参照するときにも大事ですし、他の人がチーム加わった時にもログを辿るために大切な要素になります。先ほど作業した内容をコミットしたときに、内容が不十分だったり書き間違えた…

2017-07-26

axiosでbasic認証を設定をする

axiosでget処理やpost処理をする時にbasic認証を設定をすることができます。 axios.get('/user?ID=12345', { auth: { username: abcd password: 1234 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(er…

2017-07-25

brotliについて

先日紹介したzopfli。今回はさらに圧縮率が高いbrotliについてです。 https://github.com/google/brotli brotliはzopfliと同じくGoogleが開発した圧縮アルゴリズムです。自分の中ではzopfliの上位互換？？のような印象。 zopfliでの圧縮率は3〜8%程と先日…

2017-07-24

zopfliについて

zopfliはGoogleが開発した圧縮アルゴリズムです。よく使われているgzipと比較して、圧縮率は3〜8%程度向上するみたいですが、圧縮時間がそれなりにかかってしまうのが欠点です。 zopfliは圧縮処理を何度も繰り返します。回数が多い程圧縮率は上がるみたいで…

2017-07-21

expressのPOST処理時のrequest.bodyがundefined

nodemailerを使ってメール送信の実装をしていた時にexpressのPOST処理時のrequest.bodyの中身がundefinedになって困っていました。解決方法はbody-parserを使う事でした。 GitHub - expressjs/body-parser: Node.js body parsing middleware expressの.use(…