CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。 Use conic gradients to create a cool border まずは、実際のデモをご覧ください。 conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。 See the Pen Conic Gradient Border by Adam Argyle (@argyleink
フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！
まさかまさかの朗報です！ MORISAWA BIZ UDゴシックとMORISAWA BIZ UD明朝がGitHubにオープンソースのOFLで公開されています！！！ アップデート情報 4/1 Google Fontsで利用できるようになりました！ Morisawa Inc. -Google Fonts 3/29 v1.001, v1.002がリリースされ、不具合が修正されました。 3/24 HTMLやCSS、JavaScriptなどコードを書く人にどうぞ。 仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース MORISAWA BIZ UDフォントとは GitHubで公開されているMORISAWA BIZ UDフォント MORISAWA BIZ UDフォントのダウンロード MORISAWA BIZ UDフ
UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
Webページやスマホアプリなど、UIデザインで使用されるシャドウをより美しく実装するテクニックを紹介します。 シャドウをぼんやりとしたグレーにするだけでなく、美しく最適化して実装します。また、シャドウのサイズで要素に標高差をつけ目立たせたり、彩度と明度の関係など、UIデザインに効果的なテクニックも詳しく解説されています。 CSSでシャドウを実装する前に、一読をお勧めします。 Designing Beautiful Shadows in CSS by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、当記事では画像にしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに シャドウをなぜ使用するのか 一貫性のある環境の構築 美しいシャドウの実装方法1: レイヤー化 美しいシャドウの実装方法2: 色
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
この写真、実はApple Watch！ 完成度高すぎの「G-SHOCK風カスタム」の秘密を投稿者に聞きました。
【あわせて読みたい】 本物のG-SHOCKのスマートウォッチもカッコいい！現行主要モデル＆セール品の紹介記事はコチラ！ 一体どうカスタムしているのかご本人に聞きました！ どうでしょう？どの写真のApple Watchも本当にカッコいいし、「ホントにこれApple Watchなの？」というくらい見た目も雰囲気も大きく変わっています。 またよく見ると、Apple WatchなのにCASIOっぽい文字盤もあり、「これは一体……？」という疑問も湧いてきます。 そこで投稿主であるwide_shallowさんに直接メールで質問。回答をもらいました！ まずCASIO風の文字盤については、Clockologyというアプリを使ってダウンロードしたデータを取り込んだものだそう。 「Clockology」をApp Storeで ちなみにこちらのアプリでは、オリジナルの文字盤を作ることも可能です。 「（自分で）
デザインと行動心理学｜nagaimen
情報設計やコミュニケーションに役立ちそうな、人の無意識な行動心理のキーワードをイラスト付きでまとめてみました。 視線解析 目は脳とつながっていて、視線と心理状態は結びつきやすい。記憶に関することは左に、未来に関すること右に視線が向く傾向がある。視覚に意識を集中すると上、聴覚に意識を集中すると真ん中、体全体で感じようとするときは下らしい。なので、嘘をつくときは右上をみてしまう傾向がある。ユーザーインターフェイスにおいても「戻る」ボタンが左、「進む」ボタンは右に配置されている。 アフォーダンス アフォーダンスとは、環境や形状が与える意味のこと。例えば、ドアの取っ手は前後に開けるものと認識するし、ドアにくぼみがあればスライドして開けると認識する。そういえば、線香花火はヒラヒラに火をつけたくなるので 反対かもと思い調べてみると、ひらひらを持つことで揺れを吸収し火球が落ちにくくなるらしい。線香花火の
CSSのみで実装するボタン、テキストリンク、hoverスタイル19選 | Pulp Note
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
最近のデザインのアイデアが満載！この1冊でさまざまなデザインがよく分かる -イメージを形に変えるデザイン大全
デザインのイメージが湧かない、アイデアがうまく出せない、そのアイデアを形にできない、苦手なデザインがある、そんなデザイナーのよくある悩みを解決するデザインのアイデア帳・解説書を紹介します。 アイデアだけではありません！ それをデザインとして再現するテクニックを写真・色・レイアウト・文字ごとに詳しく解説されています。 こういう新しいデザイン本が欲しかった！ という人も多いと思います。 本書は、本日（1/22）発売！ デザイナー・ディレクター向けの解説書で、デザインのアイデアを見つけたい人、デザインの見本帳を持っておきたい人、ありとあらゆるテイストのデザインの作り方を知りたい人、デザインのヒアリングやプレゼンが苦手な人に特にお勧めします。
デザインを「存在論的」に捉えるとは - Kamihira_log at 10636
最近、デザインと人類学の両側から構成されているような「デザイン人類学」の議論が海外の研究界隈で活発に起こっている。近年起こった人類学の存在論的転回の潮流の影響だと僕は解釈しているが、なかでも重要なポイントとなるのが、この「存在論」という言葉だ。ごく簡単に言えば、具体的な「モノのあり方」や「実行のされかた」それ自体を通して考えていこうとするものである。 そしてこの観点を取り入れることによって、我々がよく知っているデザインもまた再定義されようとしている。それが非常にエキサイティングなのだが、つかめるようでなんだかつかみきれず、捉えることがなかなか難しいので、僕自身、人に説明しながら勉強中である。研究室の学生たちを交えながら、ファッション（昨年度）や、メイク（本年度）というテーマを存在論的な観点から解釈してみたりしている。 僕も勉強中のテーマながら、いつのまにか人前で話す機会をもらうようになって
ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
商品の見せ方にこだわりのあるECサイト5選 | Fashionsnap.com
こんにちは。デザイナーのぺちこです。 突然ですが、みなさんはどのくらいの頻度でネットショッピングを利用していますか？ ネットショッピングの利用者がどんどん増えていく中で、ECサイトもいろんな工夫をしてきているなあ！と最近実感しています。 そこで今日は、ただ商品を並べて売るだけじゃなく、ユーザにとって嬉しい工夫を凝らしてあるECサイトをいくつかご紹介したいと思います！ 商品の見せ方にこだわったECサイト5選 OVER https://overclothing.com/ セルビアのアパレルブランド「OVER」。 近頃、商品を部分的に拡大した画像があったり、クリックすると拡大画像が表示されたり、という見せ方がよく増えてきたなあと思います。 このサイトはそれだけでなく、マウスカーソルを置いた周辺エリアの拡大画像が、全体像の横に並んで表示されます。 操作がしやすく、全体像を確認しながら布の素材感やス
ITエンジニアがUI/UXを確実に学べるコンテンツ11選 - paiza開発日誌
Photo by Dan Zen こんにちは。谷口がお送りします。 ここ数年、Webサービスの開発において「UI」「UX」という言葉がよく聞かれるようになりました。 「UI」とはUser Interfaceの略で、簡単に言ってしまうと、パソコンやスマートフォン等を操作する際のの画面表示やメニューに表示される言葉など、情報の表示様式や操作感のことです。 対して「UX」は、User Experienceの略です。UXは、ある製品やサービスを利用したり、消費した時に得られる体験全般のことを指し、個別の機能や使いやすさだけでなく、ユーザーが製品やサービスを利用したときに得られる利用体験、満足感の向上を目指すのがUXデザインになります。 ※UXとはISO 9241-210[2]において「製品、システム、サービスを使用した、および／または、使用を予期したことに起因する人の知覚（認知）や反応」と定義され
ページが見つかりません | 挑戦する20代の転職サイト - キャリトレ
お探しのページは見つかりませんお探しのページは一時的にアクセスできない状況にあるか、移動もしくは削除された可能性があります。 また、URL、ファイル名にタイプミスがないか再度ご確認ください。
マンガや同人誌に無料で使える、吹き出しの素材300種類
マンガや同人誌に無料で使えるかわいい吹き出し素材をご紹介。 いつもは読むばっかりですが、いろいろなデザインがあるんですね。
こんなにたくさんある！Illustratorが楽しくなる無料のブラシ素材のまとめ
IllustratorのブラシはPhotoshopに比べて数は少ないですが、探してみると高品質で面白いものが揃っています。個人や商用で無料利用できるIllustratorのブラシ素材を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
めっちゃ読みやすいモリサワの「BIZ UD」フォントが「GitHub」に／縛りの比較的緩い「SIL OFL- 1.1」ライセンスでカスタムフォントのベースにピッタリ？【やじうまの杜】
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://www.smaroomch.net/photoshop-kiso/