JavaScriptでCookieを扱いたい時のメモ｜くろひつじのメモ帳
昨年末は、あれ？私コーダーだったっけ？ってぐらいにHTMLとCSSとJavaScriptとPHPの勉強と作業しかしていませんでした。 その頃作業していたお仕事は要求されるレベルも予想以上に高く、作業しつつも勉強勉強という感じで、振り返るとなかなかに充実したお仕事だったなぁと思います。 そんなお仕事で改めてCookieについてきちんと勉強したのでメモしておきます。 そもそもCookieとは Webサイトの提供者が、Webブラウザを通じて訪問者のコンピュータに一時的にデータを書き込んで保存させるしくみ。 （引用元：http://e-words.jp/w/Cookie.html） 例えば、初めて訪問したサイトで名前を入力したら、次回訪れた際に入力した名前で呼ばれたり。 例えば、訪問した回数を記録していて、訪れる度に何回目の訪問か教えてくれたり。 そういうことができます。 JavascriptでC
window.matchMedia を用いたブレイクポイントイベント - Qiita
最新版 こちらの記事での実装方法は古いものですので、下記事にて完成版を解説しています。 【続々】window.matchMedia を用いたブレイクポイントイベント ここから古い内容 2016.10.05 20:39 ちょっとだけバージョンアップしました # ブレイクポイントのオプションを設置 # 配列として渡すことで複数のイベントをリッスン出来るように ず〜っと某JSを用いて window.width() でブレクポイントのイベントをリッスンしていました。 IE10から window.matchMedia が使えるようになったので、ちょっと考えてみました。 やっていることは簡単で、window.load と window.resize を見て、ステータスが変わるとイベントをリッスンする形です。 ついでにクラス化してカスタムイベントを作成してみます。 概要はこう if ( window.m
window.matchMedia をそろそろ活用してもいい頃
レスポンシブなページを作っていると、JavaScriptもPC向けとスマホ・タブレット向けで動作を分けたいという事はよくあります。 JavaScriptでレスポンシブ対応させるとしたら以下のような方法があるかと思います。 jQuery(window).width() の値から判定 window.innerWidth の値から判定 window.matchMedia で判定 あと、ここでは Internet Explorer 8 以下に関してはないものとして扱います。 それぞれの動作を見てみる それぞれにメリット/デメリットがあるのは世の常です。 jQuery(window).width() の値から判定 はっきり言うとこの方法はダメです。何がダメかというと、jQuery(window).width() はスクロールバーを含めないウィンドウの横幅になるからです。 CSSのメディアクエリの m
VimeoやYouTube動画をプラグイン無しで背景全画面に中央配置する方法 - STAND-4U
2017年2月12日 WEBサイトを作成する際、Vimeo動画やYouTube動画を背景いっぱいに表示したくなる事があると思います。そんな時にプラグインに頼らずに設定したいですよね。今回はシンプルなコードで、Vimeo動画やYouTube動画をアスペクト比を保ちながら全画面背景に設定する方法を解説したいと思います。 VimeoやYouTubeの動画コードを貼り付ける まずは任意のVimeo動画やYouTube動画のiframe形式のコードを取得してhtmlに貼り付けます。サンプルはyoutubeですがVimeoも同様にiframe形式でコードを取得する事ができます。 <div id="video"> <iframe src="https://www.youtube.com/embed/testtest?playlist=testtest&autoplay=1&loop=1" framebo
【CSS】背景だけ斜めにする at softelメモ
問題 スタイルシートで、背景だけ斜めにできますか？ 斜めに2色で区切ったりできますか？ 答え スタイルシートで回転させたりゆがめたりは可能。 transform の skew や rotate を使う。 要素全体を10度ゆがめると以下のようになる。 <div style="border:1px solid #000; width:300px; overflow:hidden;"> <div style="padding:100px 50px; transform:skew(0deg, -10deg); background:#00c; color:#fff;">テキストテキストテキスト</div> <div style="padding:100px 50px;">テキストテキストテキスト</div> </div> 中身はゆがめたくないので、中身だけ逆向きにゆがめて元に戻す。 <div st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
