サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
買ってよかったもの
spyweb.media
SCSSにはCSSとは違う @import という拡張機能があります。また、今後SCSSを使うにあたって必須となる gulp を導入して、より楽に開発ができるようにしていきます。 @import 'foo.css'; /* ファイル名（シングルクォーテーション） */ @import "foo.css"; /* ファイル名（ダブルクォーテーション） */ @import 'css/foo.css'; /* 相対パス */ @import "foo.css" screen; /* メディアタイプ */ @import "http://foo.com/bar.css"; /* 絶対パス */ @import url('foo.css'); /* url() */ @import url(foo.css); /* url()（クォーテーションなし） */ CSSの @import を使って外部C
jQueryなしのネイティブJavaScriptで 要素をフェードイン する方法です。ここではフェードインする仕組みのみを実装していきます。 function fadeIn(node, duration) { // display: noneでないときは何もしない if (getComputedStyle(node).display !== 'none') return; // style属性にdisplay: noneが設定されていたとき if (node.style.display === 'none') { node.style.display = ''; } else { node.style.display = 'block'; } node.style.opacity = 0; var start = performance.now(); requestAnimationFra
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
<svg viewBox="0 0 200 100"> <text x="0" y="50%" dominant-baseline="central">文字</text> <rect x="0" y="0" width="200" height="100" fill="none" stroke="#12b886"></rect> </svg> // IEまたはEdgeのとき if (/*@cc_on!@*/false || ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style)) { var text = document.querySelector('text'); var textY = text.getAttribute('y
2017.12.29 jQueryのscrollTop()にhtmlかbodyどちらを指定すればよいのか？ 今まであまり深く考えていませんでしたが、 scrollTop() を使う対象要素に html を使うか body を使うか、どんな仕様になっているのか気になったので調べてみました。
Flexboxでレイアウトをしているときに、 ガター に em や px などの固定値を指定するのではなく、 % 値を指定したいときに起きる問題です。 <div class="grid"> <div class="item"> <div class="inner">1</div> </div> <div class="item"> <div class="inner">2</div> </div> </div> .grid { display: flex; width: 500px; } .item { padding-top: 10%; padding-right: 10%; width: 50%; background-color: #c4ddb9; } .inner { background-color: #a1c6e7; } 分かりやすいように簡単なHTMLとCSSを用意しました。
この記事は CSS Advent Calendar 2017 5日目の記事です。IE11/Edgeがメインの時代になったとはいえ、まだまだIEのみ表示がおかしいことがあります。そんなときに使えるCSSハックをまとめてみました。暇なときに少しずつ検証したので、以下で紹介するハックは動作確認済みです。
このページを最初にブックマークしてみませんか？
『https://spyweb.media/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
