ブラウザごとに異なるHTMLの各要素のスタイルを消去（Reset）するのではなく、スタイルを正常化（Normalize）するNormalize.cssが、2017年3月26日にアップデートされました。 2016年10月3日リリースされたv5.0.0から、いくつか重要な変更点があります。 Normalize.css Normalize.css -GitHub Normalize.cssの特徴 Normalize.css v6.0.0のアップデート内容 v5.0.0からの変更箇所 Normalize.cssの特徴 Normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用
![[CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6dbc7de996dcce21643a2558cdfa5f6a275b9f9/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017033001.png)
normalize.css 6.0.0 のリリースで、それまで入っていた、純粋なブラウザ間の差異を吸収する目的からは少し外れた "opinionated" なスタイル定義がすべて削除されました。 所謂、リセット CSS （Reset CSS） の一種である 「normalize.css」 は、Web 制作界隈の方々にとっては馴染みのあるスタイル定義集で、お世話になっている方も多いのではないでしょうか。 先日、この 「normalize.css」 の最新版として、「6.0.0」 がリリースされましたが、作者である Jonathan Neal 氏の意見的意味合いが強かったスタイル定義がすべて削除されるなど、比較的大きな修正が入っています。 Normalize.css : Make browsers render all elements more consistently. necolas/n
box-shadowはボックスの周りにふわりとしたシャドウをつけることができますが、それを少しアレンジして、立て看板風のシャドウをつけるテクニックをBloomから紹介します。 まずは、通常の周りにふわりとシャドウをつけてみます。 HTML img要素をdivで包みます。 <div class="css-box-shadow"> <img src="logo.png" alt="" /> </div> CSS ボックスの四辺にシャドウを適用します。 .css-box-shadow { width:133px; position: relative; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5); box-shadow: 1px 1px 4px rgba(0
当ブログの本文下部にあるソーシャルボタンの装飾についてよくお問い合わせいただきます。 そんなわけで、ソーシャルボタンの背景をカッコ良く装飾する方法をご紹介します。 僕が実践してる方法なのでアレンジが必要ではありますが、参考になれば幸いです。
hint.css - A tooltip library in CSS JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」。 指定位置にカーソルを合わせるとポップアップするツールチップヒントを次のようにCSSだけで実装できます。 ヒント位置も上下左右と自由に配置でき、カラーなどもCSSでカスタマイズできるみたい シンプルで軽量なのがメリットでしょうか。 関連エントリ いろんな種類のツールチップを簡単実装できる「Opentip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
使い勝手の良さそうなプラグイン だったので備忘録的にご紹介。 ツールチップを実装するjQuery のプラグインです。マウス追従、 不動タイプの選択が可能、デザ インもCSSのみで作ります。 各ブラウザにも対応、HTMLタグも利用可能、マウス追従の有無の選択、軽量、などの特徴が有ります。 Sample 動作サンプルです。 マウス追従への変更も可能です。圧縮版で5KBほどとなかなか軽量です。 コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.tooltipster.min.js"></script> 本体とプラグインを読み込み。
新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1. link要素、そのmedia属性、dataスキーマ コード： <link rel="stylesheet" type="text/css" media="screen and (max-width: 200px)" href="data:text/css,.test.a{color:green}"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 200px)" href="data:text/css,.test.b{color:green}"> ビューポートの幅が200ピクセル以下なら、この行が緑になる。 ビューポートの幅が200ピクセル以上なら、この行が緑になる。 2. link要素、そのmedia属性 コード： <link rel="stylesheet" type="text/cs
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
