2019/06/20 / 最終更新日 : 2019/07/19 ブログマスター HTML & CSS

【HTML&CSS】埋込 YouTube をレスポンシブにする

埋め込む YouTube 動画をレスポンシブに対応するには、以下のようにします。

<div class="movie">
  /* YouTube の埋込コード */
</div>

.movie{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.movie iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

2017/02/27 / 最終更新日 : 2017/02/27 ブログマスター HTML & CSS

【HTML & CSS】ＰＣ表示時にＴＥＬリンクを無効にする

ＰＣで表示した時にＴＥＬリンクを無効にするには、以下のようにスタイルを指定します。【HTML】

<a class="tel" href="tel:012-345-6789">

1	<a class="tel" href="tel:012-345-6789">

【CSS】 [crayon-5da6c1a18e0f2 […]

2014/12/08 / 最終更新日 : 2014/12/08 ブログマスター HTML & CSS

【HTML&CSS】iPhone でページが横にスライドする

原因は、ページが横スクロールすることのようです。意図せずにページ内の要素がはみ出したりしていると、なかなか原因に気づかなかったりします。

2014/09/05 / 最終更新日 : 2014/09/05 ブログマスター HTML & CSS

selectivizr

IE8 以下で css3 セレクタを利用可能にする。 selectivizr

2014/06/02 / 最終更新日 : 2014/06/02 ブログマスター HTML & CSS

PHP での Android のスマホとタブレットの判別

function is_android() {

  $ua = $_SERVER['HTTP_USER_AGENT'];

  if ( strpos($ua, 'Android') !== false ) {

    if ( strpos($ua, 'Mobile') !== false ) {

      $result = "スマホ";

    } else {

      $result = "タブレット";

    }

  } else {

    $result = "Android 以外";

  }

  return $result;

}