今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックス

2017/06/08 248 users border-radius CSSプロパティー CSS 四隅

要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸 border-radius は... 続きを読む

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

2017/03/13 661 users object-fit Photoshop CSS 縦横比 画像

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画... 続きを読む

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

2016/11/30 1086 users font-feature-settings CSS DTP

「Webでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つされています。 そんな文字詰めですが、HTMLでも実はCSSの font-feature-settings プロパティーを指定するだけで 自動カーニングができます 。ほとんどのブラウザがサポートしており、実務で... 続きを読む

CSSスプライトとstepsを使ってアニメーション画像を作ろう | Webクリエイターボックス

2015/11/17 257 users steps CSSスプライト CSS アニメーション 動作

CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 steps の記述方法 steps は animatio... 続きを読む

@supportsを使ってCSSのみでスタイルの条件分岐をする方法 | Webクリエイターボックス

2015/10/27 332 users supports filter CSS 条件分岐 スタイル

Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 @supports とは？ 指定した (プロパティー:... 続きを読む

CSSの簡略プロパティー - Weblog - Hail2u.net

2014/08/13 43 users Weblog hail2u.net ショートハンド CSS

CSSの標準仕様では一部のプロパティーに簡略(ショートハンド)プロパティーが用意されている。marginやbackground、fontプロパティーなどがそれ。うまく使うとCSSをかなり短くできるので、積極的に使いたいけど、なかなかの複雑さでそうもいかない。かといって機械的に処理するのも、CSSは人が簡単に書けることを想定して仕様が作られている節がある(根拠はない)のでまた難しい。 先日知ったCS... 続きを読む

SVGよりアイコン・フォント！な理由 - Weblog - hail2u.net

2012/07/12 25 users SVG Weblog hail2u.net アイコン CSS

両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。 CSSとの親和性 特に以下の3つのCSSプロパティーは効果... 続きを読む

[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ - バニデザノート

2011/11/21 153 users Photoshop 点線 バニデザノート ドット ブラシ

photoshopでドットのラインを描く方法をまとめてみます。 さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とすると きれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。 ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法で やってましたので、その方法をご紹介。 ブラシを使う（... 続きを読む

この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ

2010/11/20 486 users プロパティ CSS クロスブラウザ IE7 セレクタ

そろそろIE6はいいかなーという今日この頃。これからクロスブラウザを目指すならIE7に標準をあわせてもいいかも。今までは使えなかったIE7からのセレクタやプロパティーをまとめてみました。IE7からならいろいろ効率的にCSSを書けそうですね！そろそろIE6のことは忘れて、IE7からのクロスブラウザを目指せばいいのかなーという気がしています。 CSSには今まではIE6のことを考えて使わなかったセレクタ... 続きを読む