position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
localStorageで複数のデータを保存する ｜ Tips Note by TAM
localStorageにデータを保存する場合、1つのキー（key）に対して1つのデータしか保存できませんが、 複数のデータを保存・取得したいときの方法をまとめておきます。 localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、 データは、キー（key）と値（value）の組み合わせで保存されます。 ●保存方法 localStorageにデータを保存するには、setItem()メソッドを使います。 localStorage.setItem(key, value); //keyとvalueをペアにしてデータを保存 ●取得方法 localStorageからデータを取得するには、getItem()メソッドを使います。 localStorage.getItem(key); //keyに対応するvalueを取得 ●複数データの保存 localStorageに
Google AnalyticsでABテストをやってみる ｜ Tips Note by TAM
GoogleAnalyticsでは、ページを最適化するためのABテストの機能が備わっています。 ※GoogleAnalyticsでは「ウェブテスト」と呼びます。 ウェブテストでは、複数の異なるパターンを検証する事によって ユーザーに、より効果的なキャッチコピーやボタン、サイト内の導線を検証する事ができます。 今回はその「ウェブテスト」をご紹介していきたいと思います。 1.検証用のページを作成する オリジナルページから検証したい場所を1箇所変更したテストページを作成します。 ※テストする際は、複数箇所を変更してしまうと効果が見えにくくなってしまう為、 変更箇所は1箇所にする事をおすすめします。 （ウェブテストでのパターンは9つまで設定できます。） 今回は、下記のようにボタンの色を変えたものを作成しました。 2.検証用のページを正規化する テストページがクローラーにインデックスされないように、
ページ読み込み時に実行するjavascriptについてのTips | Tips Note
ページ読み込み時に実行するjavascriptは 指定方法がいくつも存在するため、 複雑になりやすく、度々エラーの原因になります。 【指定方法の種類】 ■onloadイベント ページ読み込み時に実行したい処理がある場合、 通常はjavascriptのonloadイベントを使用します。 BODY要素にonload属性を追加したり、 下記のようなjavascriptの指定を追加する方法がよく見られます。 window.onload = function(){ // ページ読み込み時に実行したい処理 } ■jQueryのreadyメソッド ライブラリとしてjQueryを使用している場合は、 readyメソッドを使用して、ページ読み込み時にjavascriptを実行することができます。 $(document).ready( function(){ // ページ読み込み時に実行したい処理 }); 【
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
