読者です 読者をやめる 読者になる 読者になる

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

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

スマホ対応

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…