2MENUすべてのカテゴリーWeb制作93仕事効率化4Electron32016.12.01Macでウィンドウごとや影付きなどスクリーンショットを撮る方法まとめ今まで普通にスクリーンショットを撮る方法は知っていましたが、ウィンドウごとにも撮ることができると知ったので紹介します。ウィンドウの影ありなしまで指定できるとは。デフォルトでここまでできるのは非常にありがたいですね。撮影したスクリーンショットは、デフォルトではデス2016.11.30CSSだけで見出しに使えるIE9+対応で高品質なリボンを作るCSSでIE9+対応なリボン見出しを作るときのメモです。以下に紹介する方法ではグラデーションを使っていますが、IE9でグラデーションを使いたい場合はSVGを使うようにしましょう。2016.11.29CSS/jQueryでoverflow-y:auto/scrollなエリアのスクロールバーを非表示にするスクロールバーを自作で表示させたいとき、デフォルトのスクロールバーが邪魔だったので非表示にする方法をまとめました。Webkit(Chrom2016.11.28CSS/jQueryでのブラウザのスクロールバーの幅を取得するスクロールバーの幅を取得する方法を紹介します。最近ではスクロールバーの幅を扱う必要性がなくなってきたのであまり使う機会はありませんがメモしておきます。CSSではこれでスクロールバー分の幅が取得できます。{2016.11.27IE11でlinear-gradientのcolor-stopにcalc()を使うと効かない場合がある久しぶりにハマったので忘れないように記事にしておきます。IE9から使える便利なCSS関数なのですが、グラデーションで使うときには注意が必要かもしれません。bac2016.11.25CSSで作る背景色に依存しないテキストの左右に水平線がある見出し4種類だいぶ前からあるテクニックですが、見出しの文字部分に下地の背景色と同じ色を指定しなければならない方法が多いです。今では背景色に依存しない便利な方法が出てきているので紹介します。center;2016.11.24JSでcontenteditableな要素に対してテキストをドラッグで移動できないようにするElectronで簡易エディタを作るときに便利だったので紹介します。関数を使い、ユーザーがドラッグして選択したテキストを移動できないようにします。最近流行りのStickyフッターを表現する方法の紹介です。昔ながらのネガティブマージンを使う方法から最新のテクニックを使った方法まで6種類です。</html>2016.11.22CSSで管理画面のようなメインは中央揃えで左右背景色が違う複雑なレイアウトを作るとある案件で、管理画面のようなUIを作る機会があったので紹介したいと思います。背景色を左右に2色分けたレイアウト手法は2017年のトレンドになる可能性もあるので、覚えておくといいかと思います。対応ブラウザは、IE9〜11、Chrome、Firefox、Safariです。実現不可能なものがあります。ないため、他のブラウザと比べて表現できる範囲がせまいのです。そこで、IE9のみSVGで代用するためにSVGコードからbase64エンコードして埋め込むmixinを作ったので紹介します。アルゴリ2016.11.17jQueryで同一ドメインまたはクロスドメインなiframeの高さを自動調整するiframeの高さを自動調整する便利な方法を紹介します。今回は同一ドメインとクロスドメインに分けて紹介していきます。http://基準サイト2016.11.15jQueryでpostMessage()を使ってクロスドメインな親と子iframeの間で値を送受信する今回は親と子iframeとの間で値を送受信しますが、別にiframeでなくても通信できます。IE8から使えるので、ほぼすべてのブラウザで使えると思います。使ったサンプルは多くありますが、jQueryのサンプルはなかったので紹介します。jQueryの場合は若干違う箇所が出てくるので注意が必要です。2016.11.14PHPでDateTime型の指定日時の1か月前と1か月後を算出するPHPに限らず日付の加算減算は注意する必要があります。オブジェクトを使った日付の操作で、1か月前、1か月後を取得する方法と例外に対処する方法を紹介します。最近iframeを触ることも少なくなりましたが、まだまだ使う場面はありそうです。jQueryで親とiframeとの間でやりとりしたいときどうすればいいのか。意外と忘れてしまうので、まとめも兼ねて紹介したいと思います。parent.htmlとchild.htmlを作成していきます。親からiframe内へ2016.11.12Electronでnodeモジュールのrequireができる環境でjQueryを使うたぶん最初につまづくのがElectronでjQueryを使いたいときだと思います。jQueryも使いたいけど、nodeモジュールも使いたいなんてときどうすればいいのか。公式FAQページにも載っていますが、解決方法を紹介します。window.nodeRequire2016.11.10ElectronでネイティブアプリっぽいUIを実現するために必要なHTMLとCSSElectronではUI設計はHTML/CSSを駆使して作ります。ネイティブアプリのようなレイアウトを実現することは意外と難しいです。苦労しましたが、汎用性のあるレイアウトのテンプレートができたので紹介したいと思います。あるアプリケーションの雛形ですね。前から導入が簡単でHTML/CSS/JSの知識だけでクロスプラットフォームなアプリケーションが作れてしまうと有名なElectronでしたが、なかなかアプリケーションを作る機会もなくて、触っていませんでした。非推奨になっていることすら知りませんでした。mysqliかPDOを使うようですね。今回は、あまり使う機会はありませんが、テーブルの存在を判定する方法を紹介します。mysqli('ホスト2016.11.06JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくすみなさん、スマホのクリックイベント遅延の対応はどうしていますか。Web制作会社の制作実績などを見ていると、スマホのクリックイベント遅延に対応していないものが結構あるようです。対応にはいろいろなライブラリがありますが、その中でも最もテストされているFastClick.jsの使い方を紹介していきます。取得するとRGB形式になってしまいます。そこで、JSを使ってRGBまたはRGBA形式からHEX形式へ変換する方法を紹介します。