こんにちは。 今日はCSSに関するポストです。 まず、CSSで以下のようなプロパティを使ったこと有りますか？ clip clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 引用：clip－スタイルシートリファレンス .element { clip: rect(10px, 20px, 30px, 40px); } このような形で、通常のCSS指定どおり上から時計回りに指定します。 これはCSS2でも使えました。 ただ、通常はoverflow:hidden;にして、位置を調整するのが一般的だったように思えます。 clip-path 本日の目玉はこちら。これまでのclipでは短形で、かつ絶対的に配置されている場合のみ有効でした。 どうなるか見てみましょう。 img.sample-img{ width:300px; clip-path: circle(100px at

CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！ 最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！ グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で

進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。 SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin（ミックスイン）、loop（ループ）などCSSコーディングに動的な機能を追加すると、繰り返し処理を最小限にし、開発時間を短縮できます。 CSSの一部として動的な機能がいくつか登場しています。CSS変数（CSS variables：カスタムプロパティ）はブラウザーの対応状況もとてもよく、すでに利用可能です。「CSS版mixin」は準備段階です。 この記事では、CSS開発ワークフローにCSS変数を組み入れる方法を紹介します。スタイルシートのメンテナンス性が向上し、DRYの原則（繰り返

円の軌跡に沿って、ドットだけをさまざまなアニメーションで動かしたシンプルでセンスのあるプリローダーを紹介します。 cubic-bezier()を使用した緩急のあるアニメーションは、タイミングをずらすことで、気持ちいい動きになっています。

明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！ フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。 filter: <filter-function> [<filter-function>]* | none では、CSSフィルターを簡単に説明します。 明るさ 明るさ（Brightn

Webページ、アプリ、ゲーム、動画、紙のデザインなどに、無料で利用できるアイコン素材を紹介します。 UIデザイン用のアイコンをはじめ、異世界の魔法や武器、日本の伝統や文化、四季の風物詩をデザインしたアイコンまで、さまざまなアイコンをまとめました。 Orion Icon Library さまざまなUIデザイン用のアイコン4,500種類が無料でダウンロードできます。豊富なデザインに加え、カスタマイズにも対応しており、ストロークを鋭角や角丸にしたり、太さを変更したり、カラーを変更することもできます。 アイコンは独自ライセンスで、個人でも商用でも無料で利用できます。 ライセンスページ We Love SVG Font Awesome, Entypo, Icons8など、人気が高いアイコンセットの9,769種類のSVGアイコンを簡単に利用できます。SVGアイコンは、コードベースで簡単にカスタマイズで

インターネットテレビ局「AbemaTV」や定額制音楽配信サービス「AWA」、「アメブロ」など大規模サービスのイメージが強いサイバーエージェントですが、若手プロデューサーを中心にカジュアルゲームなどを短期間で開発し次々とリリースする「AppStudio」という組織があります。 Developers Blogでは、AppStudio プロデューサーである徳山、田熊にインタビュー。日々試行錯誤を続けているという彼らに、次々と新規サービスを立ち上げるための開発手法やその面白さについて聞きました。 徳山 泰斗 スタートアップカンパニー AppStudio プロデューサー。 2013年サイバーエージェント新卒入社。プランナー、プロデューサーとしてソーシャルゲームの運用を担当した後、2015年11月ピグカンパニーに異動。アバターコミュニティサービス「ピグパーティ」を担当後、2017年4月より現職。 田熊

失敗も後悔も振り返れば全てが成長。そんなグラフィックデザイナーがフリーランスになるまでのアウトプットブログ。 今回は、僕が今まできちんと勉強してこなかった『デザインの著作権（主にロゴデザイン）』について色々と調べてみたので、備忘録もかねてシェアしようと思います。 それでは。 普段あまり考えないけど、本当は大事なデザインの著作権 もともと、この問題について気になったのは、下のツイート記事を読んでから。 これは業界に大きな影響を与える判例ができそうだ。。。注目。 RT 外注デザイナー、「無断で改ざん」と包装フィルム会社を提訴　千葉地裁（千葉日報オンライン） – Yahoo!ニュース https://t.co/UOlN2SwxgM @YahooNewsTopics — カイシトモヤ (@room_composite) November 8, 2017 この記事を要約すると、外部のデザイナー側が『

Pantoneから来年のトレンドカラーが発表されました。 2018年のトレンドカラーは、独創的で想像力に溢れるスミレ色「Ultra Violet」です。 Pantone Color of the Year 2018 Pantone 18-3838 Ultra Violet 2018年に使用したいカラーの組み合わせ方 スウォッチ素材のダウンロード Pantone 18-3838 Ultra Violet ウルトラ バイオレットは刺激的で思慮深いパープルのシェードで、未来に向かってビジョンを指し示す先見性、独創性を伝えます。広大で無限に広がる宇宙のように、現実的な世界を超えて新たな知識を追求するという欲求を象徴しています。

2017年12月22日 インスピレーション, 色彩 毎年恒例、PANTONEによる「来年の色」が発表されました！2018年は「Ultra Violet」に決まりました。なんだかおしゃれで神秘的。そんな「Ultra Violet」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Ultra Violet」ってどんな色？ 無限に広がる宇宙のような、近未来や不思議な力、芸術的で個性的。そんな魅力がつまった色ですね。単色で使うだけでもおしゃれ度アップ！ 色の具体的な数値は以下の通り： PANTONE：18-3838 Ultra Violet カラーコード：#5f4b8b RGB：R95, G75, B139 CMTK：C71, M73, Y7, K8 グッズも販売されています 「Ultra Violet」カラーのグッズいろいろ！お気に入りの色で生活環境を彩ってみては？ ノー

写真画像にインスタ映えするフィルタを適用するスタイルシートを紹介します。 使い方は簡単で、外部スタイルシートと画像にclassを加えるだけでOKです。 42種類のフィルタが用意されており、どのフィルタでも簡単に利用できます。

「ブラウンとアップル」という記事で、デザイナー Dieter Rams（ディーター・ラムス）が提案した良いデザインの10の原則を紹介しました。1970年代に提案されたものですが、現在にも通じる普遍性のあるメッセージです。これのアップデート版のようなものを、Co.DesignのSuzanne LaBarre さんが提案しています。特にアプリや web サイトをはじめとしたデジタルプロダクトを意識した内容になっています。 良いデザインは様々な影響を考慮している 良いデザインは『スロー』である 良いデザインは正直である 良いデザインは政治的である 良いデザインはシステムを意識している 良いデザインは良いライティングである 良いデザインは多面的である 良いデザインは人とマシンのためにある この中で特に気になった「良いデザインは『スロー』である」から、今後のデザイナーの仕事についてぼんやり考えてみま

情報収集方法についておしえてください。見ている情報源、使っているツール、コツなど。 匿名さん よく聞かれる質問のひとつです。 Twitter で、平日毎日情報発信しているので不思議に思われる方もいるかもしれませんが、特別な手法で情報収集をしているというより、時間の費やし方が違うかもしれません。 80%英語です 知人のブログ、又はソーシャルメディアから流れてきた興味深い情報以外は英語中心です。自分の仕事に関わる情報収集は、日本語のを見てもだいたいが英語圏の情報の焼き回しだったり、表層的なところで終わっているところもあるのでほとんど見ていません。学生時代からずっとそうやって情報収集しているので単なる習慣なのかもしれませんが …。 以下がよく見ているサイトの一部です。 Designer News ココを押さえておけば、日本のデザイン系まとめサイトを見なくて済むようになると思います。ここ 1, 2