2016年 12月 の投稿一覧

iframeを使用したyoutubeの埋め込み

今回はiframeを使用してyoutubeの埋め込みをする方法をご紹介する。

尚、動画のIDとはは下記URL例の「?v=」以降の箇所になる。

https://www.youtube.com/watch?v=Ye_J4fIAV2A

<iframe width="幅" height="高さ" src="https://www.youtube.com/embed/動画のID"></iframe>

また動画IDの後に「?」を記述し、パラメータを記述することで、あらゆる表示の操作ができる。

一部パラメーター例

  • コントロールバーを隠す → autohide=1
  • 全画面表示ボタンを非表示 → fs=0
  • タイトルバーを非表示 → showinfo=1
  • 関連動画を非表示 → rel=0
  • 自動的に動画を表示 → autoplay=1

また、連続してパラメータを利用するときは、下記のようにセミコロン「;
」を挟んで記述する。基本的に「1(表示)」「0(非表示)」。

url例

https://www.youtube.com/embed/Ye_J4fIAV2A?autohide=1;fs=0;showinfo=1;rel=0;autoplay=1

iOSでフォントが明朝体になってしまった時の対処方法

iphoneで表示すると、ゴシックで指定していたハズのフォントが明朝体に変わっていることがある。

どうやら厳密にCSSでフォント指定をしていないと、自動的に明朝体になってしまうようだ。

その場合は以下のようにCSSsans-serifを追加することで解決できる。

body {
    font-family: ”ヒラギノ角ゴ Pro W3”,”Hiragino Kaku Gothic Pro”,Osaka,”MS Pゴシック”,”MS PGothic”, sans-serif;
}

JavaScriptでコピーガード

ページ内の写真や文章をコピーされたくない時があります。

下記を実装すれば右クリックしたときに表示されるコンテキストメニューが表示されなくなります。

document.body.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

また、下記を記述すれば、キーボードを使ったコピペソースコードの表示ができないようになります。

document.onkeydown = function(e) {

    if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117 || e.keycode === 17 ) {
        return false;
    }
};

以下が禁止しているキーコードです。

  • 67 = C
  • 86 = V
  • 85 = U
  • 116 = F5
  • 17 = Ctrl

もちろん技術的に詳しい方であればコピーできてしまいますが、一般の知識の方に対する対策であればこれで十分かと思います。

CSSのみで改行する方法

brを利用せずにスタイルシートのみで改行してみましょう。

まず改行した直後の文言にクラスを指定します。

<p>スタイルシートで<span class="br">改行</span>します。</p> 

そして下記のCSSを指定します。

 

.br:before {
  content: "\A";
  white-space: pre;
}

IE8からのclearfix

IE8からの実装で問題ないのであれば、clearfixはこれを使用すれば問題なさそうです。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

IEに互換表示させないX-UA-Compatibleの指定

下記を記述しておけば、IE10ではIE10のレンダリングモード、IE9ではIE9のレンダリングモードで表示されます。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

上記コードはcssやjsなどの外部のファイルへのリンクを記述している箇所よりも上に記述しましょう。
なぜなら、外部ファイルの読み込みがあると、そこで表示モードが決まってしまうからです。

Media Queriesでレスポンシブ

Media Queriesはcss3で画面サイズや解像度などに応じて、スタイルを切り替える機能でrす。
これは端末の種類に応じてスタイルの適用対象を限定すMedia Typeの使用を拡張したもの。

以下のように細かな条件指定ができます。

<link rel="stylesheet" href="phone.css" type="text/css"
 media="screen and (max-width: 320px)">
 <link rel="stylesheet" href="phone.css" type="text/css"
 media="screen and (min-width: 321px) and (max-width: 767px)">
<link rel="stylesheet" href="pc.css" type="text/css"
 media="screen and (min-width: 768px)">

また単位はpxだけではなくて、em等も利用ができます。

@media screen and (max-width: 30em) {
   /* 1行の文字数が30文字以下の場合に適用する */
   div#sideArea { width: 20%; }
}

1つのCSSソース内で分岐させたい場合には以下のように記述できます。

/* 全てに適用 */
div#sideArea { width: 20%; }

/* 横幅が321px以上で767以下に適用 */
@media screen and (min-width: 321px) and (max-width: 767px){
   div#sideArea { width: 40px; }
}

/* 横幅が768px以上に適用 */
@media screen and (min-width: 758px) {
   div#sideArea { width: 100px; }
}

また適用する範囲の指定には2種類方法があります。
これまでご説明したようにandを使用して条件を絞る方法とカンマ「,」を使用して複数の条件を一括で指定する方法です。

/* 横幅が321px以上で767以下に適用 */
screen and (min-width: 321px) and (min-width: 767px)
 
 /* 横幅が321px以上または767以下に適用 */
screen and (min-width: 321px) , screen and (max-width: 767px)

Media Queriesで条件分岐に利用できる指定方法ですが、以下になります。

  • width
  • height
  • device-width
  • device-height
  • orientation

widthheightに関しては問題ないと思いますし、device関連もPCならディスプレイの幅や高さ、スマホならブラウザの下層的な解像度の幅や高さになります。

ではorientationとは何でしょうか。

こちらは端末の向きを条件にした制御になります。
指定できる値は2種類で、縦置きがportrait、横向きがlandspaceとなります。

例えば以下のような使い方になります。

@media screen and (orientation: portrait) {
   /* 縦置き */
}
@media screen and (orientation: landscape) {
   /* 横置き */
}

PCに関して注意点ですが、IE8以下では、基本的にMedia Queriesを利用することはできません。
しかし、Google Codeで公開されているJavaScriptを利用することで使用できるようになります。

css3-mediaqueries-js

以下のように記述しておけば、IE9未満限定でスクリプトを読み込むことができます。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

またRetinaディスプレは解像度が2倍になります。なので、もし実装の時にちょうどの大きさの画像を用意してしまうと荒く表示されてしまうのです。

下記はメディアクエリ用の記述になります。

@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx){
/* Retina ディスプレイ */
}

是非このMedia Queriesを活用してレスポンシブサイトを構築していきましょう。

特定のページへリダイレクトする

metaタグを利用することで、指定した数秒後に特定のページへ遷移させることが可能になります。
古いサイト上で新しいサイトのurlを知らせるときに使用するケースが多い。

下記サンプルの秒数の場所に半角で秒数、ページのURLのいところに遷移先のURLを記述することが重要である。
また念のため、自動的にジャンプしない環境を考慮して、JavaScriptでさらにページ遷移の処理を記述しておくとよい。

 
<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="refresh" content="秒数;URL=ページのURL">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
(function (){
    location.pathname.replace('ページのURL');
}());
</script>
<title></title>

</head>
<body></body>
</html>

スマホの送信ボタンをCSSで改善する

スマホで送信ボタンを見ると表示が変になります。

このデザインをcssを活用して修正しましょう。

デザインの変更は下記のようにしましょう。

input[type="submit"] {
 -webkit-appearance: none;
 ここにデザイン内容
}

iphoneでスクロールをさせない処理をする

PCサイトでスクロールを禁止させるには、bodyoverflow: hidden;をかけることでスクロールができなくなります。
一部Android端末ではこの実装で問題ありませんが、iOSで困ったことにスクロールができてしまうのです。

ここでjQueryの出番です。

スマホの独自イベントのtouchmoveイベントを切ってスクロールを止めることができます。

方法は下記になります。

$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});

また、途中のタイミングでスクロールさせたくなったら、off()すればいいのです。

$(window).off('.noScroll');

イベント名に、.noScrollとありますが、これはイベントに名前をつけたものです。

名前を付けるこで、他の部分でtouchmoveイベントを使っていたとしても、そのtouchmoveイベントまでイベントをoff()してしまうこともなく、.noScrollの名前のイベントのみをoff()することができます。