Googleにインデックスさせない！

WordPressのテストページに「インデックスさせない」設定を怠っていたため、テストページめちゃめちゃ公開される事件が発生しました。以後、このような事態を防ぐため、テストページには以下の設定を施します。 WordPress側で設定設定 → 表示設定 → 「検…

2018-07-18

PCとiPadのレイアウトを同じにする

Web技術-html,css Web技術-JavaScript,jQuery

なぜ？スマホとPCだけで手一杯。タブレットのレイアウトなんか作ってらんない！やり方タブレットで見たときにviewportを削除すればよいだけの話。 JavaScript viewportを記述しているところに以下を置換 <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > …

2018-06-08

【videoタグ】再生終了時の自動遷移

Web技術-html,css

<video onended="location.href='example.html';"> <source src="example.mp4" type="video/mp4"></source> </video> その他コントローラーの表示 <video controls></video> 自動再生 <video autoplay></video> 繰り返し <video loop></video> 無音 <video muted></video> 再生までに画像を表示させる <video poster="example.png"></video>

2018-06-07

nth-of-typeとnth-childの違い

Web技術-html,css

nth-of-type たとえば p:nth-of-type(3) { color: red; } <div> <h1>見出し</h1> <p>テキスト１</p> <p>テキスト２</p> <h2>見出し</h2> <p>テキスト３</p> <p>テキスト４</p> <p>テキスト５</p> <h2>見出し</h2> </div> 3番目のpがredになる。 nth-child p:nth-child(3) { color: red; } <div> <h1>見出し</h1> <p>テキスト１</p> <p>テキスト２</p> </div>

2018-06-06

レスポンシブの設定

Web技術-html,css

html <head> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> css @media (max-width: 480px) { スマートフォン/タブレット用 } @media (max-width: 768px) { タブレット用 }