コーディング時のIE11のバグ

コーディング時に発生したIE11のバグのまとめです。主にflexboxで発生します。 ■ display: flexの要素にmin-heightを指定した場合、…

IE11

swiper.jsでスライドを一定速度で無限ループ

デモページはこちら swiper.jsでスライドを一定速度で無限ループさせます。スライダー全体の横幅を決めて表示スライドを1つにし、はみ出したスライドをCSSで…

swiper.jsで連動する2つのスライダーを実装

デモページはこちら swiper.jsで連動する2つのスライダーを実装します。メインのスライダーはナビゲーションボタンかスワイプでスライドさせ、それに連動して背…

swiper.jsのオプションdirectionにverticalを指定して縦方向のスライダーを実装

デモページはこちら swiper.jsのオプションdirectionにverticalを指定して、縦方向のスライダーを実装します。htmlのコードは以下の通りで…

swiper.jsのオプションslidesPerViewにautoを指定して独自で横幅設定

デモページはこちら swiper.jsのオプションslidesPerViewにautoを指定して、独自で横幅を設定します。htmlのコードは以下の通りです。ナビ…

swiper.jsのオプションbreakpointsで表示スライド数を切り替え

デモページはこちら swiper.jsのオプションbreakpointsで表示スライド数を切り替えます。 htmlのコードは以下の通りです。クラス名swiper…

Photoshopで不要なレイヤーやグループを一括削除

Photoshopで不要なレイヤーやグループを一括削除します。削除したいレイヤーやグループはレイヤーパネルで非表示にします。 メニューのレイヤー→削除→非表示レ…

flexboxでCSSのwidthプロパティにcalcを利用

769px以上：4カラム・768px以下：3カラム flexboxでCSSのwidthプロパティにcalcを利用します。以下のhtml構造でテストします。デモペ…

マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点

デモページはこちら マウスオーバー時にCSSのtransitionプロパティを実装する場合の注意点です。以下のhtml構造でテストします。 .photo01 a…

CSS疑似要素のcontentプロパティにjQueryで設定したカスタムデータ属性の値を指定

デモページはこちら CSS疑似要素のcontentプロパティにjQueryで設定したカスタムデータ属性の値を指定します。以下のhtml構造でテストします。デモペ…

jQueryプラグイン jquery.matchHeight.jsの使い方

jQueryプラグイン、jquery.matchHeight.jsの使い方です。全てのページ共通で、以下のhtml構造でテストします。デモページではクラス名bo…

CSSのtransformプロパティによるsvgの反転

デモページはこちら CSSのtransformプロパティでsvgを反転します。以下のsvgをオリジナルとし、複製してidを付与してCSSを適用します。svg以外…

CSSプロパティをショートハンドで記述

CSSプロパティをショートハンドで記述します。プロパティによって記述順や省略可・不可のルールがあります。 ■ fontプロパティfont-style・font-…

Photoshopで選択範囲の境界線を描く方法

Photoshopで選択範囲の境界線を描く方法です。以下の操作で簡単に指定した幅の枠線が引けます。 選択ツールで選択範囲を作成→右クリック→境界線を描く→境界線…

JavaScriptライブラリ swiper.jsの使い方

デモページはこちら JavaScriptライブラリのスライダー、swiper.jsの使い方です。レスポンシブ及びタッチデバイスのスワイプにも対応しています。jQ…

jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装

デモページはこちら jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装します。hoverメソッドは要素にマウスカーソルが重…

jQueryで要素を表示・非表示（show・hide・toggle・fadeIn・fadeOut・fadeToggle・slideDown・slideUp・slideToggle）

デモページはこちら jQueryで要素を表示・非表示にするメソッドのまとめです。対象要素を表示するshow、対象要素を非表示にするhide、対象要素の表示・非表…

CSSのflexbox使用時の注意点

デモページはこちら CSSのflexbox使用時の注意点をまとめました。flexboxは使い方によってレイアウトに表示崩れが発生するパターンがあります。 fle…

jQueryのindexメソッドで要素の順番を取得、eqメソッドで要素の順番を指定

デモページはこちら jQueryのindexメソッドで要素の順番を取得、eqメソッドで要素の順番を指定してタブ切り替えを実装します。 以下のhtmlの構造でテス…

CSSのfilterプロパティの使用例

デモページはこちら CSSのfilterプロパティの使用例をまとめました。filterプロパティはIE11でサポート外ですが、種類が豊富で実装が簡単です。 ■ …

Google map

Photoshopのワークスペースをカスタマイズ

Photoshopのワークスペースは「初期設定」「3D」「グラフィックとWEB」「モーション」「ペイント」「写真」の6つが用意されていて、デフォルトは「初期設定…

jQueryのattrメソッド・dataメソッドで要素の属性を取得・変更・新規設定

デモページはこちら jQueryのattrメソッドとdataメソッドで要素の属性を取得・変更・新規設定します。dataメソッドはカスタムデータ属性のみ取得・変更…

Photoshopで画像の足りない部分をコンテンツに応じて塗りつぶし

Photoshopで画像の足りない部分をコンテンツに応じて塗りつぶします。 画像の足りない部分を自動選択ツールで選択→編集→コンテンツに応じた塗りつぶし→プレビ…

svgロードアニメーションをSMILで実装【グラデーションの線を回転】

デモページはこちら グラデーションの線を回転する動作のsvgロードアニメーションを、XMLベースの言語SMILで実装します。画像読み込みの管理ができるJavaS…

SMIL

jQueryのtextメソッド・htmlメソッドで要素を取得または変更

デモページはこちら jQueryのtextメソッドとhtmlメソッドで要素を取得または変更します。textメソッドとhtmlメソッドは機能が似ていますが細かい部…