2MENUすべてのカテゴリーWeb制作93仕事効率化4Electron32016.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を作成していきます。非推奨になっていることすら知りませんでした。mysqliかPDOを使うようですね。今回は、あまり使う機会はありませんが、テーブルの存在を判定する方法を紹介します。mysqli('ホスト2016.11.06JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくすみなさん、スマホのクリックイベント遅延の対応はどうしていますか。Web制作会社の制作実績などを見ていると、スマホのクリックイベント遅延に対応していないものが結構あるようです。対応にはいろいろなライブラリがありますが、その中でも最もテストされているFastClick.jsの使い方を紹介していきます。取得するとRGB形式になってしまいます。そこで、JSを使ってRGBまたはRGBA形式からHEX形式へ変換する方法を紹介します。HEXに2016.10.31JS/jQueryでIEのバージョンを判定しクラスとして追加するJSでIEのバージョンによって処理を分岐したいとき、どんな方法があるのか調べていると、ユーザーエージェントを使った方法が一般的のようでした。ユーザーエージェントは簡単に偽装できるので、信頼性に欠けます。そこで、今回は確実性の高い方法で判定する方法を紹介します。vers2016.10.28IE6/7/8/9/10/11それぞれのバージョンのみに適用させるCSSハックまとめ最近ではIE8のサポート終了などにより使う機会が減ってきましたが、それでも一部バージョンのみに対応させたいときもあるかと思います。そんな時に便利なのがCSSハックです。以下で紹介するソースコードは仮想環境上でしっかり確認していますので、大丈夫です。この要素をCSSハックしたいと思います。2016.10.22jQueryでinputのtext/checkbox/selectなどフォームの値の取得・設定をするCSS/JSフレームワークを作るにあたって、フォーム周りの操作をする必要があったので、まとめてみました。使えばいいのですが、微妙に違いがあったりして忘れやすいです。$('input[name="textbox"]').val();2016.10.17どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。http://kenwheeler.github.io/slick/2016.10.11CSSのtransform:rotate()とjQueryを使ってシンプルな円グラフを作る最近またCSSでいろんなものを作るのにはまっています。今回は、CSSで円グラフを作りました。使えばできるのではないかと考えたのが始めです。JSを使わなくてもいけるのですが、JSを使ったほうが円グラフの変更が楽なので、自動化できるところは自動化しました。対応ブラウザ2016.10.06CSSでinputは可変幅でボタンなどは固定幅なレスポンシブ対応フォームを作るよくECサイトで見かけるレスポンシブ対応の検索フォームの作り方を紹介したいと思います。使っていくので、IE8以上対応です。検索2016.10.02CSSで均等配置・等間隔でガター幅を指定できるグリッドレイアウトを作るレスポンシブデザインが主流となった今、グリッドレイアウトは見慣れていると思います。タイルやカードデザインなどでは、グリッドレイアウトがよく使われます。今回は、等間隔でしかもガター幅を指定できる方法を2種類紹介したいと思います。