SVGとcanvasのレスポンシブ対応
以前にSVGのレスポンシブ対応の記事を投稿したことがありますが、その時の方法より簡単に対応できそうかつcanvasでもレ...
レスポンシブの記事一覧
CSSでスマホ時のみ電話番号にリンクを設定する
スマホでの閲覧時のみ電話番号にリンクを張りたいということがあったので、CSSのメディアクエリで判別して一定の画面幅以下の...
スマホとタブレットでviewportを出し分ける
以前にレスポンシブWebデザインでタブレット版がないときの対応の記事を書きましたが、最近viewportを出し分けたい時...
クリッカブルマップをレスポンシブ対応するプラグイン「jQuery RWD Image Maps」を使ってみる
クリッカブルマップをレスポンシブ対応する機会があったので、jQueryプラグインの「jQuery RWD Image M...
Facebookページプラグインのレスポンシブ対応で表示されない場合
以前にFacebookのページプラグインをレスポンシブに対応する方法の記事を書きましたが、画面幅によって表示されない現象...
レスポンシブサイトでスマホ時のみ電話番号にリンクを張る
レスポンシブサイトでスマホ時のみ電話番号にリンクを張りたい場合がたまにあるので、実装方法をメモ。...
matchMediaを変数に入れて複数箇所で使用する
matchMediaを変数に入れて複数箇所で使用としたときに少し詰まったので、やり方をメモしておきます。...
CSSで指定した縦横比を維持する
要素をpositionで絶対配置にした場合、その要素は親要素の高さに含まれなくなります。 親要素の高さを固定値で指定して...
SVGをレスポンシブに対応する
SVGをレスポンシブに対応させる際に少し手間取ったので、対応方法をメモしておきます。...
レスポンシブで要素の比率を保持する
画面サイズを変更した際に、要素のアスペクト比を保持する方法をメモ。...
HTML5のpictureを使ってみる
HTML5のpictureタグを使ってみます。...
HTML5のsrcset属性を使ってみる
srcset属性を使って画像の出し分けを試してみます。...
PCとスマホで画像とテキストを出し分ける
data属性とCSSのcontentを使って、PCとスマホで画像とテキストを出し分ける方法をメモ。...
レスポンシブでブレークポイント毎に画像を出し分ける
レスポンシブでブレークポイント毎で画像を出し分ける処理を実装してみます。...
Facebookのページプラグインをレスポンシブに対応する
Facebookのページプラグインを埋め込むときに、レスポンシブに対応する方法を調べたのでメモしておきます。...
横並びのナビゲーションでレスポンシブに対応する
PC時は横並び + プルダウン + レスポンシブでスマホ時にナビゲーション切り替え という形でナビゲーションを実装してみ...
レスポンシブサイトを印刷するときにレイアウトが崩れる
レスポンシブサイトで印刷時にレイアウトが崩れることがあったので、その対応方法を調べてみました。...
CSSのvwやvhを使ってみる
vwやvh,vmin,vmaxといった単位を使ってみます。...
floatした要素が複数行になった時に、レスポンシブ対応で中央揃えにする
floatした要素が1行の時の中央揃えの方法は以前記事を書いたのですが、今回は2行以上に対応する方法を考えてみました。...
Masonry.jsを使ってみる
レスポンシブ対応のグリッドレイアウトを実装できるjQueryのプラグイン「Masonry.js」の使い方をメモ。 今回は...