knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

水平方向のスクロール量を取得する

javascript

jQueryを用いた場合

垂直方向はscrollTopで取得できますが、水平方向のスクロール量はscrollLeftによって取得します。

var scrollLeft = $(ELEMENT).scrollLeft();

引数に数値を与えれば、その数値だけ水平方向にスクロールします。

たとえば左に200pxスクロールさせたい場合は次のように指定します。

$(ELEMENT).scrollLeft(200);

ページ全体のスクロール量も、overflow:scrollを指定された要素のスクロール量も取得できます。

ちなみにページ全体のスクロール量を取得するにはdocumentに対してメソッドを実行します。

$(document).scrollLeft();

バニラJavaScript用いた場合

jQueryのようなメソッドはないのですが、DOMオブジェクトのプロパティを参照することでスクロール量の取得/設定が可能になります。

var ELEMENT = document.getElementById('element');
var scrollLeft = ELEMENT.scrollLeft;

ページ全体に対してスクロール量を取得/設定する際にブラウザごとに実装が違ったため(documentのscrollLeftを参照できる場合とそうでない場合がある）、jQueryを用いることをおすすめします。

空白・全半角を判定するロジック

javascript

※inputValという変数に、チェック対象の文字列が代入されていると仮定します。

空白チェック

空文字、半角スペース、全角スペース、タブを検知。

if(inputVal == '' || inputVal.match(/^[\s\u00A0\u3000]+$/g)){
    console.log('空白');
}else{
    console.log('空白ではない');
}

全半角チェック

文字列を一文字ずつ検証し、ASCII文字コードで全角または半角を検査します。

for (var i=0 ; i < inputVal.length; i++){
    var code = inputVal.charCodeAt(i);
    if ((48<=code && code<=57) || (65<=code && code<=90) || (97<=code && code<=122)) {
	  console.log('半角文字');
    }else{
	  console.log('全角文字');
    }
}

現在開いているページの URLを出力

WordPress PHP

本来ならばページの種別ごとに条件分岐をすることで、WordPressのテンプレートタグを利用して取得できます。

もし条件分岐をせず、ワンライナーで書きたい場合は以下の方法で可能です。

<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>

clipを利用したテキストの非表示方法

CSS

CSS2から対応しているclipというプロパティを利用して、テキストを非表示にします。

.visibilittyHidden{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
}

理屈はいたってシンプルで、0px四方に切り抜いているだけです。

テキストの非表示方法はtext-indentに大きな値を指定するといった方法がありますが、その分の描画領域を保持してしまうブラウザもあります。

こちらは膨大な領域を確保することもなく、古い環境から対応しているので、より汎用性の高いものかと思います。

もちろんモバイル端末でも使用できます。

最新版IEでセレクトボックスの矢印を消す

CSS

このような矢印です。

f:id:ShinImae:20160106160443j:plain

Chrome/Safari/FireFoxならば、次の方法で非表示にすることが可能です。

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

ところが、IEではこの矢印のみが残ってしまいます。

IE10以上になってしまいますが、次の指定をすることで非表示にすることができます。

select::-ms-expand {
    display: none;
}

iOS版Safariで明朝体表示になってしまう

CSS

まずは下記をご覧ください。

f:id:ShinImae:20160106162425j:plain

この部分は本来ゴシックでなければいけないのに、明朝体で表示されてしまっています。

フォントの指定をひも解いてみると次のように書いてあります。

body{
   font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka";
}

どうやらiOS版Safariは指定されたフォントがすべて見つからないと、デフォルトである明朝体を指定してしまうようです。

そこで、どうしてもゴシック体にしなければいけないときは、必ずsans-serifを最後に付け加えましょう。

body{
   font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka", sans-serif;
}

f:id:ShinImae:20160106162438j:plain

これで、正しくゴシック体で表示できるようになりました。

iOS版Safariで郵便番号にリンクが設定される

HTML

format-detectionを利用

iOS版Safariでは、電話番号だけでなく、IPアドレスや郵便番号にまでリンクが自動で貼られてしまうという性質があります。

しかも郵便番号に貼られたリンクをタップしても、特に何か起きるわけではないので、ユーザーの方を混乱させてしまう結果になります。

そこで、電話番号にはリンクを貼るが、それ以外のものにはリンクを貼らないような設定方法を行います。

まずmeta要素で、意味がある（とブラウザが判断する）数字にリンクを貼らないよう設定します。

<meta name="format-detection" content="telephone=no">

これで郵便番号だけでなく電話番号、IPアドレスなどにリンクが貼られなくなりました。 そして、電話番号の部分にのみリンクを貼ります。

a要素のhref属性で指定します。 形式は番号の先頭に「tel:」という文字列を追加して、リンク先に電話番号を書くだけです。

<a href="tel:03-0000-0000">03-0000-0000</a>

この方法で、電話番号にのみリンクが貼られます。

Androidでも対応可能です。

※ただし、PCでは通常のリンク同様にクリックできてしまうので、別途対応が必要になります