脱力系備忘録BloG ホーム »HTML・CSS

Pタグにafter疑似要素を指定したら途中でタグが終了する不思議  

Pタグ「after」疑似要素セレクタを指定したらPタグ内に書かれたブロックタグの直前で強制的にPタグが閉じられるというよくわからない挙動に悩まされたのでメモしておきます。

category: HTML・CSS

パソコンでのクリックやスマホでのタッチを無効化するpointer-eventsに驚いた  

グーグル地図のような機能的なコンテンツをブログやサイトに貼り付けたとき、マウスのスクロールボタンでページを上下させてるときに突然地図がズームインして驚くことがあります。

それを防ぐため、コンテンツ上でマウス操作やタッチ操作を無効にする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%の領域を確保する方法  

CSSで画面一杯の領域を確保するのって意外と悩ましい問題。

今まで
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 を指定された要素は読み込まれないのか?  

読み込まれる。けど表示されない。

たとえば、

<img src="画像" style="display: none;">

の場合、「画像」ファイルは読まれる。けど、ブラウザ上では表示されない。

category: HTML・CSS

APIを使わずGoogle Mapを画像で取得する  

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タグに使えば画像で取得できる。

スマホ・サイトで地図を埋め込む場合はこういう画像を埋め込んで、動きのある地図を使いたい場合は別にリンクさせたりアプリを起動させたりしたほうが良いかも。
でないと、画面をスクロールさせたいのに地図を延々とスクロールする羽目におちいったりする。

category: HTML・CSS

CSSで2分割したいが片方のWIDTHの長さを可変にしたい  

CSSで横にDIVなどブロック要素を分割して並べるときには「float」プロパティーを使います。

しかし、floatを使う要素にはwidthで幅を指定しなければなりません。


(例)
<div style="width: 100%;">
<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>

簡単すぎて恥ずかしくなってしまふ。
なお、左右の間に隙間を開けたい場合はmarginの数値を大きくすればいい。


あと、clear: both;でfloatを解除することも忘れちゃいやよん。

category: HTML・CSS

プロフィール

お問い合わせ

最新記事

最新コメント

▲ Pagetop