IE11 の flexbox の中央揃えが難しい : (*x).b=z->a+y/c
◆ display: flex; + align-items: center; 子要素に margin: auto; または ◆ display: flex; + justify-content: center; align-items: center; flexbox だと簡単なのですが IE11 でも見れるようにしないといけない場合は メンドクサそうです ですが 実は IE11 は display:flex; が使えます でも 使えるからといってちゃんと動くかは別問題です Chrome だと <div style=" width:300px; height:300px; background:yellow; display:flex; flex-direction:row; "> <span style="margin:auto;">a</span> </div>
LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita
ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ
精度を保ってSVGを1バイトでも小さくする - Qiita
あらまし SVGを利用するメリットのひとつは、CSSにインラインで埋め込めるほどのサイズの小ささです。 ただ、SVGは作り方を誤るといくらでもファイルサイズが大きくなるデータフォーマットでもあります。 CSSのインラインに埋め込むということは、同時にそのWebページで表示されることのないSVGもロードされてしまいがち。エンジニアとしては、ちゃんと最低限のサイズで埋め込みをすることで通信コストを抑え、CO2排出量削減に貢献したいですね！ ちなみに、ここではSVGはHTMLに埋め込めればいいや、ではなく、SVG-valid (XML-valid) なサイズ削減を目指しています。 チェック項目 軽量化する前に SVGはどう利用されるのか（どのくらいのサイズで描画されるのか、白黒でいいのか、色を塗り分けたいのか、JavaScriptで動的に制御したいのか、など）によって、パスをどう定義するべきかが
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
IE9/10から使えるCSS：calc() | briccolog
IE9からwidthやheightなどの数値を値に取る属性に対して、複数の値を組み合わせて計算するcalc()を値に取ることができるようになりました。これによって、例えば「10ピクセルの間隔で画面横幅いっぱいに要素を3つ並べる」といった表現が可能となりました。 ただし、caniuseによるといくつか不具合が報告されているようです。上記のサンプルなどはcalc()の中で入れ子の計算calc((100% - 20px) / 3)をしていますが、IE11でも正しく表示されているので、下記に当てはまるケースが全てNGというわけでは無いかと思いますが、実装時にはよく注意する必要がありそうです。 報告されている問題点 IE10でdiv要素のスタイルの値にcalc()を指定した場合、子要素の同じ属性の値にinheritを指定するとクラッシュする。 IE9からIE11でcalc()が指定された要素ではbo
javascriptでサーバーからJSON取得 - Qiita
var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.onreadystatechange = function() { if( this.readyState == 4 && this.status == 200 ) { if( this.response ) { console.log(this.response); // 読み込んだ後処理したい内容をかく } } } xmlHttpRequest.open( 'GET', 'ここにURL', true ); xmlHttpRequest.responseType = 'json'; xmlHttpRequest.send( null );
【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】 – ノーズブログ
わかった事 試してみた所、アニメーションを作る時には、まずイージングが大変だという事がわかりました。 スムーススクロールのオプションとしてイージングを色々選択できるようにしようと思うと、プレーンなJavaScriptでシンプルなコードを書くのはどうしても無理があります。 逆に、イージングさえ絞ってしまえば、後は大して難しい記述は無いので、なかなかシンプルに書くことができます。 よく考えてみたら、今までスムーススクロールごときでサイト毎にイージングを変えるような事もしなかったし、 jQueryのデフォルトのイージング”swing”で、クライアント側から文句を言われたこともありません。 という事で、jQueryのデフォルトのイージング”swing”だけに限定して、コードを書いてみました。 jQueryのデフォルトのイージング”swing”限定のスムーススクロール 念のための使い方の説明ですが、
table で左端ヘッダーを固定する : (*x).b=z->a+y/c
◆ スクロールバーの範囲外と範囲内に固定の列をつくる ◆ 範囲内の固定列分のスペースを確保するようにダミーの tr を最初に入れる ◆ 固定したい td を absolute で固定 前にテーブルでも css でいろいろできると知ったので 今回は横をスクロール固定してみます 縦スクロールの固定は HTML 構造が行単位なので thead の tr を移動するだけで簡単そうですが 横スクロールはいろいろと大変です 作ったものはこんなの なんと IE8 でも動きました 複雑な css は使ってないですし サンプル スクロールバーの外側と内側で固定する列を作ってます コードはこんなの <!doctype html> <meta charset="utf-8"> <div class="area"> <div class="wrapper"> <table> <tr class="dummy"><
swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人
これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちらにあります 以前もswiper.jsのオプションについて書いた記事を書いたんだけど、久しぶりに公式見たら一新されてて震えたから再度記事として上げる。 swiper.jsってなんぞ？ swiper.jsのダウンロードサイト 簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識してる。 このswiper.jsのメリットデメリットはこんな感じ メリット オプションが非常に多い。前に記事したbxsliderより多い。コールバック関数（タッチ、クリックなどをした時に関数を実行するもの）の数が特に多い。 jQueryが不要。なんだかんだプラグインの多くはjQueryが必要になることが多いけど、これは不要。サイ
【小ネタ】CSS だけで Table 要素をレスポンシブ対応させる方法 | Recruit Tech Blog
display－スタイルシートリファレンス display - CSS | MDN このように table は関連する各要素に対して固有の display 属性がデフォルトで設定されています。決して table という HTML タグ自体がテーブルレイアウトを実現しているのではありません。ならばこの dispaly 属性を CSS 側でどうにか制御すれば、モバイル端末といった表示領域が狭い環境にも適したレイアウトが組めるということになります。 DEMO See the Pen Blocked table - Demo of Responsive table by wakamsha (@wakamsha) on CodePen. こちらのデモをベースにしていきます。 とりあえず全部ブロック要素にしとけ 何も考えずに全てのtable 関連要素をブロック要素にしてみました。当然ですが、全てのセル
通常はスライダーで表示していない部分をスマホの時だけスライダーに変更する方法 | YARUMAE
スマホで表示する時だけスライダーで表示したいというご要望があったため、調べたところSlickというプラグインで実現できました。今回はその方法と簡単な解説をさせて頂きたいと思います。 Slickのダウンロードと使用方法についてはこちらから。 function sliderSetting(){ var width = $(window).width(); if(width <= 767){ $('#slider').not('.slick-initialized').slick(); }else{ $('#slider.slick-initialized').slick('unslick'); } } // 初期表示時の実行 sliderSetting(); // リサイズ時の実行 $(window).resize( function() { sliderSetting(); });
リストの最後の行だけ、スタイルを適用する方法 | たねっぱ！
リストの最後の行だけ、○○したいんだけど・・ と悩んでしまった人＆いつか悩むかもしれない人へのTipsです♪ ※サンプルのHTMLは、背景色付きのliを並べただけです。 最後の行だけ適用しよう（２列の場合） ２列の場合は、最後の行の要素が１つor２つの時では指定方法が変わりますよね。 １つで固定の場合はlast-childだけで大丈夫です。 どちらになっても大丈夫な指定をするなら、 last-childで一番最後にある要素を指定し、 さらに最後から２つめの要素が奇数ならその要素を選択する…という指定ができればOKです！ <style> /* 最後の要素 + 最後から２つ目のliが奇数の場合、その要素 */ li:last-child,li:nth-last-child(2):nth-child(odd) { background-color: pink; } </style> 最後行が１つ
型変換のいろいろ - Qiita
###value - 0### 数値演算のオペランドに文字列値を書くと、暗黙に数値に型変換されます。（+は文字列連結として扱われる） そのため、value - 0 ではnumが暗黙の型変換によって数値になりますが、0を引いても数値は変わらないため型変換だけが行われることになります。 ###+value### また、+演算子を単項演算子で使用すると、正の符号演算になります。正の符号演算で数値型への型変換が行われるので、+value とだけ記述すると、結果的に数値型への型変換のみを行います。 ---- 2015/05/14追記 ---- +valueに関して Airbnb JavaScript Style Guideによると +valueは //badとなっておりましたので、parceInt()やNumber()を使用するのが良さそうです。 しかし、全てが同じ挙動をするわけではなく、それぞれ微
jQuery で複数行対応の自動省略三点リーダー「...」付与修正版 - Qiita
はじめに jQuery で複数行対応の自動省略３点リーダーを付与します。わざわざプラグイン使うまでもないので、書いておきます。CSS でも可能ですが、:before や :after を使って右端に余白を設けて固定で「...」を書くなど、ちょっと見た目がださかったのでやめました。参考リンクを貼っておきますが、参考リンクの内容はウィンドウサイズを縮めたときにしか使えないですし、拡大したときに文章が枠内に収まったとしても「...」が残るなど、いろいろ未完成だったので修正しました。 参考 文字列を省略して「...」を付与する方法 意外と需要がある（泣）文字数を省略して「...」にしたい。複数行のとき！ 準備 jQuery を入れてください。 コード <script type="text/javascript"> $(function () { $(document).ready(function
iframeの親から子、子から親の操作をする
親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法をメモ。 要素の操作をする 必要箇所だけ抜粋していますので、詳細はデモページでご確認ください。 HTML(親ページ) <div id="oya"> <input type="text" /><button>実行</button> <div id="oya-result">結果がここに反映されます。</div> </div> <iframe id="child-frame" src="child.html"></iframe> HTML(子ページ) <div id="ko"> <p>子</p> <input type="text" id="" /><button>実行</button> <div id="ko-result">結果がここに反映されます。</div> </div> JavaScript(親ペー
windows10でbrowser-syncのExternalアドレスに接続できないのはファイアウォール設定が原因
01. どういう風にダメなのか こうなります（LAN内のスマホからbrowser-sync起動PCの [IPアドレス]:3000 へアクセス） ちなみに、 browser-sync を起動してあげると 設定してるファイルにブラウザから localhost:3000 or [IPアドレス]:3000 でアクセスできるようになり 本来はこのような表示になります（browser-sync起動PCのブラウザ画面） 02. LAN上のスマホからアクセスできなかった時の実行環境 Windows10 Pro Node.js v8.4.0 browser-sync v2.18.13 調べてたら browser-sync の記事は2014～2015年頃が多かった。windows10のリリース日が 2015年7月9日 だからギリギリ今の自分と同じような状態の情報が見当たらないのも頷ける。だけど割と同じような現
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/
iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 - Qiita
ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字【2017/7/28追記】 - Qiita
ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
