Webサイトをダークモードに対応させよう
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ ↑私が10年以上利用している会計ソフト！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわ
重要ではないCSSファイルを後から遅れて読み込ませる方法 - スタイルシートTipsふぁくとりー
《2017年10月14日 16:05 公開/更新》 重要ではないCSSファイルを後から遅れて読み込ませる方法 [基本] CSSファイルによっては後から遅れて読み込ませたい場合もあります。後から読み込まれるJavaScriptだけで使われるCSSとか、ユーザが何らかのアクションを起こさない限り参照されないCSSとか。そのような「先に読んでも仕方がない」(＝事前に読み込んでもウェブページの表示待ち時間を増やしてしまうだけ)なCSSファイルを、できるだけ後回しにして読み込ませる方法を紹介。 重要ではないCSSファイルを後から読み込ませたい HTMLソースの末尾でCSSファイルを読み込ませる方法 (参考) Googleが紹介しているCSSの遅延読み込みソースは rel=”preload”を使って非同期にCSSファイルを読み込ませる(未来の)方法 重要ではないCSSファイルを後から読み込ませたい 画
httpからhttpsにJavaScriptでリダイレクトさせる方法 - takekoshi's blog
webサーバに手出しできない、かつ、httpとhttpsで出し分けができない場合にhttpからhttpsにリダイレクトする方法です。 webサーバもmetaタグも使えないので、JavaScriptを使います。 コード<script type="text/javascript"> if(location.protocol == 'http:') { location.replace(location.href.replace(/http:/, 'https:')); } </script> ポイントlocation.replace()を使うJavaScriptのリダイレクトをググるとlocation.hrefを使う方法が出てきますが、この方法ではブラウザのHistoryに残ってしまいます。つまり、外部サイトから遷移してきた場合に 外部サイトhttp://自分のサイト/https://自分のサ
HTTPやHTTPSの判別サンプル
location.protocolにてページのprotocol情報を取得 location.protocolはhttp:やhttps:で返す var protocol = location.protocol; 判別 var protocol = location.protocol; if(protocol == 'http:'){ //httpの場合の処理 }else if(protocol == 'https:'){ //httpsの場合の処理 } 処理の実行結果
日本人にしか読めない難読化ツールつくってみた - KAYAC engineers' blog
はじめに ※ この記事は Tech KAYAC Advent Calendar 2015 10日目の記事になります 初めまして。フロントエンドエンジニアの@butchi_yです。 いやー、SUSHI食べたいですよねー。 たまらなくて今日のランチはお寿司にしました。 つくったもの のっけから成果物をどうぞ。 Sushify オンライン寿司難読化ツールです。 (function(win) { var hoge = 5; var piyo = 3; var fuga = 8; console.log(hoge, piyo, fuga); })(window); こんなコードが !function(鮨){var 鮭=5,鯛=3,鯖=8;console.log(鮭,鯛,鯖)}(window); こんな風に変換されます。 このように、変数等の名前に漢字（しかも日本人のソウルフードである寿司ネタ）を用い
JavaScript つい忘れてしまう配列のソート方法 - Qiita
var a = [5,3,9,1,10] a.sort(function(a,b){ if( a < b ) return -1; if( a > b ) return 1; return 0; }); 結果:1,3,5,9,10 var a = [5,3,9,1,10] a.sort(function(a,b){ if( a > b ) return -1; if( a < b ) return 1; return 0; }); 結果:10,9,5,3,1 //フルーツの名前と価格。価格でソートする var fruits = [ {name:"apple",price:100}, {name:"orange",price:98}, {name:"banana",price:50}, {name:"melon",price:500}, {name:"mango",price:398} ]
グローバルナビをスクロール時に固定する方法 – mororeco
グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。 まずはサンプルを確認してみてください。 DEMO スクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。 サンプルを見ながら確認していきましょう。 HTMLを記述 まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。 <div id="globalNavi"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2
Element.id
<p><a href="./dummy.php" id="target">SYNCER</a></p> <p><pre><code><a id="<span id="id">target</span>">SYNCER</a></code></pre></p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="get" class="button">取得</button></p> <p><button id="set" class="button">変更</button></p> <p><button id="reset" class="button">リセット</button></p> .output { color: #
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
JavaScript製FlashPlayer「swf2js」って？ ある日、ある会社(Apple)の偉い人が言いました。 「僕たちFlashサポートしないよ。」 そして、世はスマホ時代へ突入。 本当にFlashがサポートされないまま突入。。。 困る！！ っということでJavaScript製FlashPlayerを作ってみました。 完成品 swf2js/swf2js サンプル提供 GAMEDESIGNさんのサイトからご提供していただきました。 ありがとうございます！ GAMEDESIGN 対応バージョン FlashLite 1.x, 2.x, 3.x, 4.x ActionScript 1.0, 2.0, 3.0 「swf2js」の使い方 ベーシックな使い方 応用的な使い方 ベーシックな使い方 <html> <head> <script type="text/javascript" src=
「シェアさせていただきます」が不快な方へ。 - ねこの森へ帰る
「シェアさせてください」「シェアさせていただきます」のコメントの羅列さえ目に入らなければすごくいい記事、というのがfacebookには結構ある。 というわけで、「シェアさせてください」「シェアさせていただきます」というコメントを非表示にするjavascriptがあればすごく需要があると思うのだ。誰かつくってくれまいか。 ……とTwitterに書いたら、結構な賛同をいただいた。 まあ、需要があるならつくりましょう、ということで、簡易的にブックマークレットをつくりました。 シェアよさらば 上のリンクをブックマークにドラッグアンドドロップなどして登録してください。 Facebookで不快な「シェアさせてください」の羅列を見たら即座に押していただければ、見ているページの全部の「シェアさせてください」が「愛撫させてください」に置換されます。 （というか、全部の「シェア」が「愛撫」に置き換わります）
ENTEREAL
最近、固定回線、モバイル回線等の接続速度が速くなり、昔の56kや64kbpsの頃のように画像のサイズやページの表示レスポンスに気を使う事が少なくなりました。今や普通のブログ等であれば、体感で1秒あれば表示が出来る時代です。 でも、ひとたび、高精細な画像や、Youtube動画などを複数並べるページになると、まだまだ環境的に厳しい方も多いと思います。 そんな時、制作側で出来る事というと、まずは画面に表示されている画像だけを先に読み込んで表示し、それ以外は、スクロールして画面に表示された段階で読み込むなど、体感速度を上げる方法が一般的です。 よく出来た Lazy Load Plugin for jQuery その手のスクリプトで一番使われているのは、おそらく「Lazy Load Plugin for jQuery」では、無いでしょうか？ 使い方も簡単で、jQuery本体と、ダウンロードしたjqu
本をめくるように画像をみせるjQueryプラグイン「FlipPage」
本をめくるように見せる方法は、以前はFlashを使ったり、複雑なJavaScriptでプログラムを組んだりと面倒でしたが、簡単にjQueryで表現できるようになりました。 div要素を本のページをめくるようにみせたい場合は、この「Flippage」を利用すると実現できます。 サンプルを作ってみました。 本をめくるようにみれるjQueryプラグイン「FlipPage」の使い方は、続きをご覧下さい。 「FlipPage」の設置方法 まずは、Flippage by marcbuilsのサイトから、Download.zipをダウンロードします。 ダウンロードしたzipファイルを解凍します。いろいろなファイルが入っていますが、実際に使うのは以下のファイルになります。 jquery.flippage.cssjquery.flippage.jsjquery.min.js（jQuery CDNを使うときは
Litebox- Same great taste, less calories
Litebox Check out the front page If you haven't been to the front page in some time, check it out. I've started blogging about some tips and tricks. Expect some full featured scripts some time soon. What is it? Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving
Javascriptでiframeとして表示されているか否かを判断する
ウェブページを作成していて、推奨されないタグとされていても未だにiframeを用いるときもある。 特定のページがiframeとして埋め込まれたときに、そのページの要素を削除・追加したい。 iframeで埋め込まれることを前提としたページをブラウザから直接閲覧してほしくない。 といった場合、iframeとして埋め込まれるページの側で「iframeで埋めこまれているのか否か」を判断する必要がある。 方法はいたってシンプル。 Bodyのonloadなどで、 if(window!=parent){ //iframeで埋めこまれた場合の処理 } else if (window==parent){ //通常表示された場合の処理 } を実行すればいい。 シンプルだが、各種ブラウザでの動作も確認済み。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動的にJSを実行する方法 - Qiita
