SublimeなLife日記

少しでも素晴らしい生活をおくるために、日々、気になったことを。

Web制作とか

chromeで印刷しようとすると日本語が消えて印刷できないときの対処法

Macのchromeで印刷しようとしても日本語が消えて印刷できないときの対処法です。print.cssや印刷プレビューで上手くいかないときは試してみてください。

drawer.jsのスクロールがおかしくなっているのを直す対処法

レスポンシブサイトでハンバーガーメニューをつけるときに便利なjQueryライブラリ「drawer.js」のスクロールがおかしくなったのを直す方法。

QRコード作成サービスで、最小サイズかつベクターでも生成できるジェネレーター「QR Code Generator」

名刺やチラシなどを作るときに一番小さいサイズのQRコードをベクターで作成できるオススメのジェネレーター「QR Code Generator」が超便利。読み取りもバッチリ!

Font Awesome 5で擬似要素にアイコンを表示させるときのcssの指定方法

Font Awesome 5がリリース。Font Awesome 4系から変更になったcssのcontentプロパティ疑似要素でのfont-familyの指定方法のご紹介です。

MacBookが突然Wi-Fiと繋がらなくなったときに試したい簡単な対処法

MacBook Proを使用中、突然WIFIに接続できなくなった! 会社で作業中に、MacBook Proが突然Wi-Fiから切れてしまい、繋がらなくなりました。購入したばかりのMacBook Pro2017、OSはHigh Sierraです。 手元のiPhone、他の無線LAN接続のPC、有線接続のPCは問題…

Edgeのみに適用させるcssハックが効かないときに試す最新の記述方法【2017年】

@supports (-ms-accelerator:true)のEdge向けcssハックは、もう効かない Windows10のデフォルトブラウザ「Edge」のみに適用させるcssハックが必要になりました。 しかし、Edgeのバージョンが新しくなり、2017年2月現在、検索で上位に出てくる以下のようなハ…

safariのみに適用させるcssハックが効かないときに試す最新の記述方法【2017年】

i-block-chromeのsafari向けcssハックは効かない 化石のような旧時代のhtmlのページの修正をしていて、どうしてもsafariのみに適用させるcssハックが必要になりました。 しかし、2017年2月現在、検索で上位に出てくる以下のようなハックは効かないです。 @me…

jQueryプラグイン「slick」で自動再生しつつ最後のスライドで停止するカルーセル

kenwheeler.github.ioイメージスライドで、自動再生しつつ最後のスライドで停止する、という事案がありました。 こんなもの"the last carousel”こと「slick」先生なら楽勝だろうと思ったら、案外オプションに用意されていなかったので往生しました。

Windows10でも使えるキーボード配列変更ソフト「Change Key」

Windowsでキーボード配列を変更したい 仕事でやむを得ずWindowsを使っているのですが、キーの配置が気に入らず、配列を変更しています。今朝方Windows10の強制アップデートが来て、1時間以上かかった挙句キーボード配列まで元に戻されてしまいましたので、…

FileZillaやFFFTPで文字化けして消せなくなったファイルの削除方法

WinSCPでOK いきなり結論から書くと、WinSCPでサーバーにログインすると、ファイル名やディレクトリ名が元の日本語で表示されていて、普通に削除できる。 もちろんリネームもできる。 FileZillaやFFFTPの場合はクライアントの設定で「文字セットをUTF-8に変…

ブロック要素全体をクリック領域にすることについて、ふと気になった

html5がメインストリームとなり、スマホ案件やレスポンシブ案件で、ブロック全体をクリック領域にしてほしい、と言われることが増えてきました。 もちろん自分でもそうすることも、ままあるのですが、ふと気になったのが「3D Touch(3Dタッチ)」の存在です。…

Lightroomで「前の設定」ボタンが出ない時の対処方法

同じ設定、同じ構図で撮影した写真を、LightroomでサクサクRaw現像したい時に便利なのが「前の設定」。 このボタンが表示されず、代わりに「同期」ボタンになってしまって往生することがある。 これは、ライブラリモジュールで写真が複数選択されているため。…

仕事用のPCをWindows10にアップグレード際のまとめ、思い出など

数日前に、仕事用のWindows機を8.1から10にしました。 心が躍らない作業ですが、Edgeの検証も無視できないですし、無料になる前に済ませておかなければなりません。

埋め込みGoogleマップをjQueryのタブに入れるとうまく表示されない件の意外な解決策

jQueryのタブでGoogleマップを切り替えたい 複数の埋め込みGoogleマップを、タブで切り替えて表示させたい。 支社や支店、地方工場などが複数ある会社や団体のサイトを作る時などに持ち上がりがちな事案だが、デザイナーやディレクターが安易に考えていると…

Sublime TextでShift-JISが文字化けした時に入れる「ConvertToUTF8」で、さらに文字化けしたら

Sublime TextでShift-JISを文字化けせずに開けるプラグイン「ConvertToUTF8」 Sublime TextでShift-JISを扱う日が、いつかやってきます。そんな時は「ConvertToUTF8」というプラグインを入れると、文字化けをしなくなります。

レスポンシブサイトで定義リスト(dl,dt,dd)を横並びにした時に高さを合わせる

レスポンシブでdt ddを横並びに レスポンシブサイトで高さが可変のDLリストの横並びがしたい。 さらに行に背景色を指定したい。

FileZillaでsftp接続ができない時の対処法

FileZillaで、あるクライアントだけsftp接続ができずに、しばらく往生していました。 原因は意外なところでした。

はてなブックマークができなくなった時の対処法

申し訳ありません、以下の URL のブックマークに失敗しました。しばらく時間をおいていただき、再度ブックマークください。 1週間くらい前から、どうやってもはてなブックマークができなくなりました。 普段利用しているWindowのChromeの拡張、MacのSafariの…

ヘッダーの上の隙間は&#65279が紛れていないか疑え!

ページのヘッダー上部に隙間が出たら ごくまれに、ページの一番最初のコンテンツの上、普通はヘッダーだと思うけど、とにかくページの一番上に隙間ができてしまうことがある。 ソースを見てみても何も記述されていない。 そんな時は、Chromeの「要素の検証」…

cssのcalc()プロパティで相対値からpx値を引く計算ができる

calcプロパティを使うとCSSで四則計算ができる。 いつも忘れるので。 .box { widht: -webkit-calc(100% - 140px); width: -moz-calc(100% - 140px); width: calc(100% - 140px); }レスポンシブサイトでサムネイルの横にキャプションを書く、とか、 .icon { l…

Bootstrapのカルーセルスライダーが自動で動かない時にオートプレイにする設定

jsに以下の記述を追加すると、ページを読み込みはじめると同時にスライドがはじまります。 $('.carousel').carousel({ interval: 2000 })bootstrap.min.jpを読み込んだあとに記述する必要があります。 スライドを切り替える時間の変更は、intervalの値を変更…

jQueryプラグイン「slick」で矢印が出ない時の対処法

kenwheeler.github.ioカルーセルのプラグインは、2015年現時点で、軽量でfadeにも対応しているslick.jsがベストだと思います。導入時につまずいたことをメモ。

infinite scrollが動かない!と思ったら、めちゃくちゃくだらない理由だった件

ピンタレストみたいなタイル上のレイアウトとスクロール自動読み込みを同時に実装するために、jQuery Masonryとinfinite scrollを粛々と実装していました。 Masonryのデモページを見ながらプラグインを設定して、いざプレビュー。 動きません。 調べること1…