ローディング画像などに、以前は “アニメーションgif画像” を使っていましたが、今後は CSS3 の animation プロパティの導入するほうが、動きもスムーズで簡単に実装できるので利用する機会が増えることと思います。 ここでは仮に、回転させたい要素に class="load" プロパティを付加します。 .load { width: 50px; height: 50px; background: #1aa; -webkit-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite; animation: spin 1.5
Deliver your website's styles, faster. Plug in cssnano into your build step for modern CSS compression. Get Started What it does cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment. Input /* normalize selectors */ h1::before, h1:before { /* reduce shorthand even further */ margi
CSS Browser Selector is a very small javascript which empowers CSS selectors. You can now write code for: browser, browser version, platform, platform version, device, device version. Best part: no more hacks; all compliant code. More info: http://rafael.adm.br/css_browser_selector beta/experimental versions: https://github.com/verbatim/css_browser_selector/ Identifies browsers: Firefox; IE; Opera
Clever technique to help you on CSS hacks. Last updated: November 02, 2010 (v0.4.0) CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. EXAMPLE The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page. The color of th
Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. :fullscreen { }CSS input:-webkit-full-screen { } :-ms-fullscreen { } :fullscreen { }CSS output PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need
Sassを使ってコーディングする中で、ネストやらミックスインだけでも効率化において効果を発揮しますが、拡張メタ言語としてもっとイキイキとしてもらうためには関数が必須ですね。 compassなんかも使って効率化しましょう！というわけで、僕も忘れがちな関数とコンパイル後にCSSでどうなっているか、さらにちょっとした注釈などを殴り書きしていきます。 @mixin ifKakko($fontweight : bold){ @if($fontweight == bold){ p{ font-weight: bold; } } @else if($fontweight == lighter){ p{ font-weight: lighter; } }@else{ p{ font-style: italic; } } } @mixin ifNoKakko($fontweight : bold){ @if
Web制作を自分で行い始めたとき、たとえば、h1、a、ul、liなどが、ブラウザごとの見え方が少しずつ違っていることに気づくと思います。 リセットcss（reset css）は、その違いをあらかじめリセットして、CSS制作を効率的にすることが目的です。 自分で設定するのもよいですが、「このタグはこういう設定にリセットしたらよいよ」っていう雛形を作っている人たちがいらっしゃいます。 そこで、人気のリセットCSSをご紹介します。 リセットcssのメリットとデメリット メリット ブラウザごとの表示の違いを、最小限に抑えることができる ブラウザごとの差異を気にせず、自分がスタイルしたい必要な部分だけスタイルすれば良い デメリット CSSの分量が多くなる リセットしっぱなしで、スタイルを当てていない要素がダサくなる といった感じでしょうか。まぁ、CSSの分量が多いといってもたかが知れているとは思いま
Have you wondered if you should use px, em or rem for media queries? I had the same question too, and I never figured it out, not till now. When I first created the mappy-breakpoint library, I used rem units. Then after a conversation with Sam Richard, I quickly switched to em instead because I found out there isn’t a difference between the two. In addition to em and rem, a popular unit of choice
IE10以下ではremは使えないことがある 最近CSSのremについての記事をよく見かける。remはemと違ってroot要素のフォントサイズを継承するためemのように直近の親からの継承によってフォントサイズが変更されてしまうことがないため便利だ。 しかし、IE10以下では注意がremのフォントサイズが反映されないことがあるため注意が必要だ。 とはいっても普通にfont-sizeでremを指定すれば反映されないということはない。（ただし、IE8以下では未対応） 問題はfontプロパティ(ショートハンド)で以下のように指定したときだ。 以下のようにfont-sizeではなくfontでremを指定するとIE10とIE9では指定したフォントサイズが反映されない。 body { font-size: 62.5%; } h1 { font: 10rem Arial; } ちなみにArialが指定されて
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba. Write your CSS rules without vendor prefixes (in fact, forget about them entirely): ::placeholder { color: gray; } .image { background-image: url(image@1x.png); } @media (min-resolution: 2dppx) { .image { background-image: url(image@2x.png); } }
親ページからiframe内にCSSを適用させる方法を紹介します。 １．問題点 次のようなHTMLがあるとします。 index.html（親ページ） <iframe id="test" src="test.html"></iframe> test.html（iframeで呼び出すページ） <html> <head> <title>test</title> </head> <body> <p>test</p> </body> </html> で、iframe内に表示させるページのp要素にindex.htmlからcssを設定したいのですが、方法が分かりません。 ということで、親ページからiframe内の要素にCSSを適用させる方法を紹介します。 ネットで調べてみるとサンプルが色々出回っているのですが、情報が古かったり動作しないものが多かったので、このエントリーですぐに使えそうなものを作ってみまし
iOSのすりガラスのような効果をWebでデザインで導入したい。そんなときに便利なbackdrop-filterプロパティを知っていますか？ ブラウザーの実装はまだイマイチですが、おもしろい使い方ができそうですよ。 W3CのFilter Effects Module Level 2で導入された、CSSのbackdrop-filterプロパティについて解説します。特に構文、ブラウザーの対応、応用方法を取り上げます。 デモを含め、記事中のすべての画像の出典はPixabay.comです。 Backdrop-filterは従来のfilterプロパティとは別物 CSSフィルターのことは、よく知っているでしょう。おさらいをするなら『Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい』がおすすめの記事です。 従来のfilterプロパティは指定した要素にぼかし（blur
ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ？表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた！という話。 目次： list-stayleが表示されない！ list-staye表示された！！ display:list-itemを別の要素に当ててみる 子要素にdisplay:inline-blockを適用してみる まとめ ※参考：CSSの基本についてはこちら 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 list-stayleが表示されない！ 表示されなかったリストはこんな感じです。 li要素の中に写真とテキストがありそれを横に並べている。 ちなみにCSSにはブラウザの初期スタイルを解除する「リセットCSS」を設定している。 C
Get started any way you want Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. Read installation docs Install via package manager Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also use any demo from ou
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Overview Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at th
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
