東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

スマホ対応

【jquery】リサイズが完全に完了したらPC スマホ 画像切り替え

// スマホ画像きりかえ // 置換の対象とするclass属性。 var $elem = $('.switch'); // 置換の対象とするsrc属性の末尾の文字列。 var sp = '_sp.'; var pc = '_pc.'; // 画像を切り替えるウィンドウサイズ。 var replaceWidth = 768; function imageSwitch(…

アプリを紹介するときの公式ボタンガイドライン

https://developer.apple.com/jp/app-store/marketing/guidelines/#downloadOnAppstore https://play.google.com/intl/ja/badges/

スマホを横にしたのみスタイル適用のメディアクエリ

@media only screen and (max-device-width: 736px) and (orientation: landscape) { } 【参考URL】 https://www.gekkoseisaku.com/blog/web-design/1933/

touchmove.noscrollを使ったスマホナビ

これだと、スマホで背景は固定されるがPCではされない。まあいいや var current_scrollY; $(document).on('click', '.menu-trigger', function() { if ($(".menu-trigger").hasClass("active")) { // メニューを閉じるとき $(window).off('.noScroll'); $(th…

【レスポンシブ】親要素がrelativeで子要素のabsoluteの横幅と高さの比率を保つ

親要素のcssを以下のように設定 #box{ position: relative; width: 100%; height: 100%; padding: 75% 0 0; } 子要素のcssを以下のように設定 #box .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(丸い画像の参…

スマホサイト制作中、サイト右側に余白ができた場合

html{ overflow-x : hidden; -webkit-overflow-scrolling: touch } body{ overflow-x : hidden; -webkit-overflow-scrolling: touch } webkit-overflow-scrolling: touchでスクロールをなめらかにする。 てゆーかこれのほうが確実!! レスポンシブデザイン…

シンプルなスマホナビゲーション

もうまじ時間ねえ!!!って時にお使いください。() 【html】 <p><span class="nav-button">Menu</span></p> <nav class="nav-closed"> <ul class="g-navi"> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> <li><a href="#">test3</a></li> </ul> </nav> 【css】 .nav-button { float: right; padding: 0.5rem; /* margin-top: .25rem…

【wordpress】子テーマ作ってスマホ対応

①スマホのテーマディレクトリをアップロード wp-content/themesの中にスマホのテーマディレクトリをアップロード。【内包しているもの】 ・style.css ・index.php screenshot.jpg ・footer.php ・header.php ・page.php ・sidebar.php ・single.php※もちろん…

googlemapをレスポンシブ対応に

googlemapをレスポンシブに対応させます。 ①css記述 .google-maps { position: relative; padding-bottom: 75%; // これが縦横比 height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; heig…