CSSで作る背景色に依存しないテキストの左右に水平線がある見出し4種類
だいぶ前からあるテクニックですが、見出しの文字部分に下地の背景色と同じ色を指定しなければならない方法が多いです。しかし、今では背景色に依存しない便利な方法が出てきているので紹介します。 overflow:hidden Heading h1 { text-align: center;
JSでcontenteditableな要素に対してテキストをドラッグで移動できないようにする
Electronで簡易エディタを作るときに便利だったので紹介します。getSelection() 関数を使い、ユーザーがドラッグして選択したテキストを移動できないようにします。 マークアップ テキスト編集可能エリア 実現したいこと たとえば、編集という部分を選択して、可能という文
CSSで内容が少ない時はブラウザ下部に固定し多い時は下に流れるStickyフッター6種類
最近流行りのStickyフッターを表現する方法の紹介です。昔ながらのネガティブマージンを使う方法から最新のテクニックを使った方法まで6種類です。 マークアップ <html> <body> メインコンテンツ Footer </body> </html>
CSSで管理画面のようなメインは中央揃えで左右背景色が違う複雑なレイアウトを作る
とある案件で、管理画面のようなUIを作る機会があったので紹介したいと思います。背景色を左右に2色分けたレイアウト手法は2017年のトレンドになる可能性もあるので、覚えておくといいかと思います。対応ブラウザは、IE9〜11、Chrome、Firefox、Safariです。 デモ コンテナ内のコンテンツ量が少ないデモ コンテ
SCSSでbackgroundにsvgを指定するときに便利なbase64エンコード関数を作る
IE9で linear-gradient を使いたいとき、IE独自の filter では実現不可能なものがあります。color stop がないため、他のブラウザと比べて表現できる範囲がせまいのです。そこで、IE9のみSVGで代用するためにSVGコードからbase64エンコードして埋め込むmixinを作ったので紹介します。 アルゴリ
jQueryで同一ドメインまたはクロスドメインなiframeの高さを自動調整する
iframeの高さを自動調整する便利な方法を紹介します。今回は同一ドメインとクロスドメインに分けて紹介していきます。 同一ドメイン parent.html <!DOCTYPE html> <html lang="ja"> <head> http://基準サイト
jQueryでpostMessage()を使ってクロスドメインな親と子iframeの間で値を送受信する
今回は親と子iframeとの間で値を送受信しますが、別にiframeでなくても通信できます。IE8から使えるので、ほぼすべてのブラウザで使えると思います。JSで postMessage() を使ったサンプルは多くありますが、jQueryのサンプルはなかったので紹介します。jQueryの場合は若干違う箇所が出てくるので注意が必要です。
PHPでDateTime型の指定日時の１か月前と１か月後を算出する
PHPに限らず日付の加算減算は注意する必要があります。今回はPHPの DateTime オブジェクトを使った日付の操作で、１か月前、１か月後を取得する方法と例外に対処する方法を紹介します。 DateTime型の使い方 // 現在日時 $now = new DateTime(); $now->setTimeZone(
jQueryでiframeの親要素から子要素と子要素から親要素の操作・関数の実行
最近iframeを触ることも少なくなりましたが、まだまだ使う場面はありそうです。jQueryで親とiframeとの間でやりとりしたいときどうすればいいのか。意外と忘れてしまうので、まとめも兼ねて紹介したいと思います。 要素の操作 parent.htmlとchild.htmlを作成していきます。 親からiframe内へ
PHPでMySQL上に特定のテーブルが存在するかどうか判定する
最近データベースを触っていなくて、mysql_connect() が非推奨になっていることすら知りませんでした。mysqliかPDOを使うようですね。今回は、あまり使う機会はありませんが、テーブルの存在を判定する方法を紹介します。 SHOW TABLES // 接続 $mysqli = new mysqli('ホスト
JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす
みなさん、スマホのクリックイベント遅延の対応はどうしていますか。Web制作会社の制作実績などを見ていると、スマホのクリックイベント遅延に対応していないものが結構あるようです。対応にはいろいろなライブラリがありますが、その中でも最もテストされているFastClick.jsの使い方を紹介していきます。 ダウンロード h
JS/jQueryでRGB(A)カラー形式をHEXカラー#ffffff形式に変換する
jQueryの css() 関数を利用して color や background-color を取得するとRGB形式になってしまいます。そこで、JSを使ってRGBまたはRGBA形式からHEX形式へ変換する方法を紹介します。 RGBからHEXへ function rgbToHex(color) { // HEXに
JS/jQueryでIEのバージョンを判定しクラスとして追加する
JSでIEのバージョンによって処理を分岐したいとき、どんな方法があるのか調べていると、ユーザーエージェントを使った方法が一般的のようでした。しかし、ユーザーエージェントは簡単に偽装できるので、信頼性に欠けます。そこで、今回は確実性の高い方法で判定する方法を紹介します。 クラスを追加 // バージョン var vers
IE6/7/8/9/10/11それぞれのバージョンのみに適用させるCSSハックまとめ
最近ではIE8のサポート終了などにより使う機会が減ってきましたが、それでも一部バージョンのみに対応させたいときもあるかと思います。そんな時に便利なのがCSSハックです。以下で紹介するソースコードは仮想環境上でしっかり確認していますので、大丈夫です。 CSSハック この要素をCSSハックしたいと思います。
jQueryでinputのtext/checkbox/selectなどフォームの値の取得・設定をする
CSS/JSフレームワークを作るにあたって、フォーム周りの操作をする必要があったので、まとめてみました。基本は val() を使えばいいのですが、微妙に違いがあったりして忘れやすいです。 テキスト 値の取得 var value = $('input[name="textbox"]').val();
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方
いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/
CSSのtransform:rotate()とjQueryを使ってシンプルな円グラフを作る
最近またCSSでいろんなものを作るのにはまっています。今回は、CSSで円グラフを作りました。transform:rotate() と overflow:hidden を使えばできるのではないかと考えたのが始めです。JSを使わなくてもいけるのですが、JSを使ったほうが円グラフの変更が楽なので、自動化できるところは自動化しました。対応ブラウザ
CSSでinputは可変幅でボタンなどは固定幅なレスポンシブ対応フォームを作る
よくECサイトで見かけるレスポンシブ対応の検索フォームの作り方を紹介したいと思います。display:table-cel を使っていくので、IE8以上対応です。 レスポンシブ ラベル 検索 ラベル 検索