CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
CSSのプロパティの値に「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど
CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便利なautoの使い方、overflowにおけるautoなど、実用的なテクニックが満載です。 Everything About Auto in CSS by Ahmad Shadeed はじめに widthプロパティにおけるauto width:auto; の使いどころ heightプロパティにおけるauto marginプロパティにおけるauto 絶対配置された要素におけるmarginのauto Flexboxにおけるauto Flexboxのプロパテ
CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック
WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for more than just CSS transitions by Kilian Valkhof 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アニメーションとトランジションに組み込まれているイージング グラデーションをCSSでより美しく実装するテクニック シャドウをCSSでより美しく実装するテクニック 見栄えのよいWebサイトを制作する はじめに アニメーションの実装にイージング曲線を使用して、より繊細
IE8以下を切り捨てれば使える便利なCSSプロパティー＆セレクター
2016年2月1日 CSS Webサイトを制作するにあたって、Internet Explorerのどのバージョンに対応させるかは、制作を始める前に話し合っておいた方がいい問題点のひとつです。私の場合2013年に入ってからはIE6やIE7に対応させる機会は皆無となり、IE8・IE9に対応させるかを議論しているところですが、皆さんはいかがでしょうか？今回はもしIE8を切り捨てる（IE9〜のサポート）なら使える便利なプロパティーやセレクターを紹介します。-ms-filter で対応できるものもありますが、filter の説明は割愛します :P ↑私が10年以上利用している会計ソフト！ IE8のシェア StatCounter Global Statsの調査によると、日本のブラウザバージョン別シェア（2013年10月）はIE10が30.78%で1位、Chromeが17.79%で2位、IE8は10.7
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sublime Textをとことん使いこなしたい！ウェブ制作に役立つノウハウ満載のオススメ本 -Sublime Textの教科書
