Pタグにafter疑似要素を指定したら途中でタグが終了する不思議
2020/03/28 Sat.
Pタグに「after」疑似要素セレクタを指定したらPタグ内に書かれたブロックタグの直前で強制的にPタグが閉じられるというよくわからない挙動に悩まされたのでメモしておきます。
category: HTML・CSS
パソコンでのクリックやスマホでのタッチを無効化するpointer-eventsに驚いた
2019/01/25 Fri.
グーグル地図のような機能的なコンテンツをブログやサイトに貼り付けたとき、マウスのスクロールボタンでページを上下させてるときに突然地図がズームインして驚くことがあります。
それを防ぐため、コンテンツ上でマウス操作やタッチ操作を無効にするCSSがあることを知りました。
pointer-events: none;
です。
これだけで石化します。
もうJavaScriptもいりません。
APIを使わず、簡易的に地図を表示したいだけの時には、このCSSが便利です。
※ブラウザが対応していないとだめです。
Chrome、Firefox、iPhone5のsafariで動作確認できました。
Chrome、Firefoxはまさに完璧な石化状態でしたが、safariは通常の画像のような動きをしました。
一応タッチ機能やズームなどは機能しないのですが、ピンチ操作をすると画像が拡大縮小するような動きをします。
【使用例】
<iframe style="pointer-events: none;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d104118.68078739633!2d138.66097155029453!3d35.362873083187765!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDIxJzQ2LjMiTiAxMzjCsDQzJzUxLjYiRQ!5e0!3m2!1sja!2sjp!4v1548411225836" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
それを防ぐため、コンテンツ上でマウス操作やタッチ操作を無効にするCSSがあることを知りました。
pointer-events: none;
です。
これだけで石化します。
もうJavaScriptもいりません。
APIを使わず、簡易的に地図を表示したいだけの時には、このCSSが便利です。
※ブラウザが対応していないとだめです。
Chrome、Firefox、iPhone5のsafariで動作確認できました。
Chrome、Firefoxはまさに完璧な石化状態でしたが、safariは通常の画像のような動きをしました。
一応タッチ機能やズームなどは機能しないのですが、ピンチ操作をすると画像が拡大縮小するような動きをします。
【使用例】
<iframe style="pointer-events: none;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d104118.68078739633!2d138.66097155029453!3d35.362873083187765!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDIxJzQ2LjMiTiAxMzjCsDQzJzUxLjYiRQ!5e0!3m2!1sja!2sjp!4v1548411225836" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
category: HTML・CSS
CSSで画面一杯高さ100%の領域を確保する方法
2017/12/08 Fri.
CSSで画面一杯の領域を確保するのって意外と悩ましい問題。
今まで
html,body { height: 100%; }
ってやって、
div { height: 100%; }
とかやってましたが、これって領域を入れ子で複数用意するとずれたりするんですよね。
しかし、すっごくかんたんに解決する方法がありました。
「Viewport units」という単位です。
ええ、すっげーいまさらな話です。でも、私は今日知ったので仕方がない。
使い方はきわめて簡単。
以下の例を試してください。
<html>
<body>
<div style="height: 100vh; background-color: #000000;"></div>
</body>
</html>
お勉強は常にせなあかんね。
今まで
html,body { height: 100%; }
ってやって、
div { height: 100%; }
とかやってましたが、これって領域を入れ子で複数用意するとずれたりするんですよね。
しかし、すっごくかんたんに解決する方法がありました。
「Viewport units」という単位です。
ええ、すっげーいまさらな話です。でも、私は今日知ったので仕方がない。
使い方はきわめて簡単。
以下の例を試してください。
<html>
<body>
<div style="height: 100vh; background-color: #000000;"></div>
</body>
</html>
お勉強は常にせなあかんね。
category: HTML・CSS
CSSの display none を指定された要素は読み込まれないのか？
2016/04/07 Thu.
読み込まれる。けど表示されない。
たとえば、
<img src="画像" style="display: none;">
の場合、｢画像｣ファイルは読まれる。けど、ブラウザ上では表示されない。
たとえば、
<img src="画像" style="display: none;">
の場合、｢画像｣ファイルは読まれる。けど、ブラウザ上では表示されない。
category: HTML・CSS
APIを使わずGoogle Mapを画像で取得する
2015/05/07 Thu.
http://maps.googleapis.com/maps/api/staticmap?center=32.452962,139.768131&zoom=15&format=png&sensor=false&size=640x480&maptype=roadmap&markers=32.452962,139.768131
パラメータの意味は見たまんま。
これでIMGタグに使えば画像で取得できる。
スマホ・サイトで地図を埋め込む場合はこういう画像を埋め込んで、動きのある地図を使いたい場合は別にリンクさせたりアプリを起動させたりしたほうが良いかも。
でないと、画面をスクロールさせたいのに地図を延々とスクロールする羽目におちいったりする。
パラメータの意味は見たまんま。
これでIMGタグに使えば画像で取得できる。
スマホ・サイトで地図を埋め込む場合はこういう画像を埋め込んで、動きのある地図を使いたい場合は別にリンクさせたりアプリを起動させたりしたほうが良いかも。
でないと、画面をスクロールさせたいのに地図を延々とスクロールする羽目におちいったりする。
category: HTML・CSS
CSSで2分割したいが片方のWIDTHの長さを可変にしたい
2015/01/22 Thu.
CSSで横にDIVなどブロック要素を分割して並べるときには「float」プロパティーを使います。
しかし、floatを使う要素にはwidthで幅を指定しなければなりません。
（例）
<div style="width: 100%;">
<div style="width: 200px; float: left;">左っぽい</div>
<div style="width: 300px; float: left;">右っぽい</div>
</div>
こうです。
<div style="width: 200px; float: left;">左っぽい</div>
<div style="width: 300px; float: left;">右っぽい</div>
</div>
こうです。
ちなみに、（例）の3行目のfloatはleftでもrightでもどっちでもいいです。
さて、今回、この「右っぽい」の部分を可変にしたいと思いました。
いろいろ「あーだこーだ」やりましたが、うまくいく場合いかない場合ありまして、最終的に決着した方法が凄く簡単なやり方だったので備忘録。
（解決）
<div style="width: 100%;">
<div style="width: 200px; float: left;">左っぽい</div>
<div style="margin-left: 200px;">右っぽい</div>
</div>
<div style="width: 200px; float: left;">左っぽい</div>
<div style="margin-left: 200px;">右っぽい</div>
</div>
簡単すぎて恥ずかしくなってしまふ。
なお、左右の間に隙間を開けたい場合はmarginの数値を大きくすればいい。
あと、clear: both;でfloatを解除することも忘れちゃいやよん。
category: HTML・CSS
| h o m e |
