レスポンシブ

css

レスポンシブ対応がカンタンに!CSS aspect-ratioプロパティの使い方

レスポンシブ対応がカンタンにできる、CSSのaspect-ratioプロパティの使い方です。YouTubeの動画を埋め込む場合でもレスポンシブ対応できます!css関連記事aspect-ratioプロパティとはaspect-ratioは、要素...
WEB制作

Googleカレンダーの埋め込み方法やカスタマイズ、レスポンシブ対応にする方法

Googleカレンダーの埋め込み方法やカスタマイズ、レスポンシブ対応にする方法をまとめました。WEB制作関連記事GoogleカレンダーとはGoogleカレンダーは、Googleが提供するオンラインのスケジュール管理ツールで、個人やグループで...
jQuery

bxSliderの使い方と、オプションでのカスタマイズ方法

超簡単に設置できるjQueryの画像・スライダープラグイン「jquery.bxslider.js」の使い方と、オプションでのカスタマイズをまとめています。jQuery関連記事bxSliderは、オプションでカルーセルやレスポンシブ対応にでき...
css

Bootstrapのグリットスタイルで横並びのカラム同士の高さを揃える

Bootstrapのグリットスタイルで、cardや画像などの横並びコンテンツで、それぞれの高さが違う場合に、高さ指定しないでカラム同士の高さを揃える方法css関連記事カラム同士の高さを揃えるhtmlこんな感じでレイアウトしているときにカラム...
jQuery

指定時間に自動タイマーで切り替わる!楽天のバナーをcsvで管理する【jQuery】

jQueryで、csvの指定時間に自動で切り替わる、現在開催中のイベントのみ楽天のエントリーバナーを表示させることで、管理を楽にする方法。楽天Tips関連記事やりたいこと・複数のバナーを現在開催中のものだけ表示したい。・PCのみ表示のバナー...
jQuery

スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】

jQueryとcssで、スマホでスクロールできちゃう横からスライドして出てくるドロワーメニューのサンプルを自作してみました。ナビゲーションメニュー関連記事ドロワーメニューの作り方ブラウザで見える範囲の外にメニューを隠しておいて、ボタンを押し...
css

【css】スマホでツイッターの埋め込みがはみ出る時の対処法

スマホサイトにTwitterのツイートを埋め込んだ時にiPhoneで見るとはみ出しちゃう現象の対象法。Media Queriesを使うcssとりあえずできたが固定値で指定しているので融通が利かないのが気に入らない。cssのcalc()もパー...
css

cssでレスポンシブに幅や高さを計算できるcalc()が便利

レスポンシブにコンテンツの幅をwidth:100%で指定するとpaddingやborder分はみ出るのを簡単に防げるcalc()の使い方css関連記事なぜ幅をwidth:100%で指定するとはみ出るのか?cssの決まりで、ボックスモデルとい...