昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第7弾は、テキストや要素をより分かりやすく魅せるデザインのテクニックです。 UI & UX Micro-Tips: Volume Seven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは分かりやすく簡潔に 2. 長文コンテンツには、20ptを試してみてください 3. エラーメッセージは色だけで情報を伝えないように 4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成 5. 見出しは文字間隔と行の高さを小さくする 6. 要素をよりはっきりと魅せる はじめに 次のプロジェク
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スマホアプリではタブバーを常に表示する 2. ウェイトを使用するだけで、強調と階層を作ることができます 3. スマホではタップ可能な領域を広くする 4. サイト内のナビゲーションは一貫性のあるものにする 5. コンテンツが豊富なサイトでは検索を目立たせる 6. 適当にフォントサイズを選ぶのではなく Typ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル(Web Vitals)を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル(Core
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
当サイトでは、Illustratorの新しい機能テクニックをつかった最新チュートリアル、作り方を定期的にまとめて紹介しています。 この記事では、2020年のあいだに公開された、特に確認しておきたいIllustratorのデザインチュートリアル、つくり方をまとめてご紹介します。 Photoshopのチュートリアルと合わせて確認しておくと良いかもしれません。 【総まとめ】2020年公開のすごいPhotoshopチュートリアル、作り方厳選まとめ 【総まとめ】2020年公開のすごいIllustratorチュートリアル、作り方厳選まとめ グラフィティ・アーティストのシェパード・フェアリー風ベクターアートのつくり方 オバマ元大統領の選挙で有名になった、「HOPE」ポスターを再現できるチュートリアルで、お好みの写真に応用できるテクニック。 ファッション向けイラストレーションを作成する方法 重なり合うライ
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示(複数行テキストの切り捨て) ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
フォトショップでの写真の色の置き換え、変更は特に要望の多い重要なテクニックのひとつです。 しかし、用途に応じてツールを使い分け、色の置き換えを行っているひとは、どれだけいるでしょう。 今回は、どんな写真にも応用できる、色の置き換え・変換のお手軽Photoshopテクニックを、実践のデザインサンプル例と一緒にまとめてご紹介します。 これらの方法を試してみることで、どんなデザインでもお手軽に色の置き換えを行うことができるようになります。 コンテンツ目次 色を変換・調整する方法 特定の色だけを置き換える方法 「モデルが着用しているドレスの色を変更したい。」 「車の色を背景に合わせて変更したい。」 「白色のドレスの色を変更したい。」 「背景の壁の色を変更したい。」 「ブランドカラーに合わせてソファーの色を変更したい。」 さいごに、 どんな写真にも応用できる、色の置き換え・変換のお手軽Photosh
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
ロゴデザインは、会社やウェブサイト、ブランドなどにおいて顔とも言える重要なデザイン要素です。この記事では、毎年目まぐるしく変化するロゴデザインの最新トレンドを分析した「2017 Logo Trends」を各ポイントごとに詳しく見ていきましょう。 2017年のロゴデザインはこれ!確認しておきたい要注目のトレンド7個まとめ 2017年決定版!人気ロゴデザインのトレンド15個まとめ Shadow Breaks シャドウ・ブレイク これまでは潜在的な現実感のあるグラフィック表現は、デザイナーにあまり受け入れられませんでした。このシャドーブレイク(英: Shadow Break)は、ある要素が別の要素と交わるときに、立体的な影を組み合わせるテクニック。 フラットカラー以外のデザイン方法を必要としますが、特に難しいことではなく問題はないでしょう。奥行き感を表現できるこの新鮮な方法によって、立体感をうま
Photoshopって知れば知るほど、使えば使うほど、便利で欠かせないツールですよね。そんなPhotoshop CCの実作業が快適になる時短テクニックを紹介します。 例えば一時的にスポイトツールを使う時、どのように操作していますか? 「I」を押してスポイトツールに切り換える時に「I」を長押しで使うと、「I」を離した時に元のツールに戻すことができます(全ツール対応)。戻せるのはスペースバーの時だけではないんですね。 まだまだ知らないことばかりです。 28 Powerful hidden tips, tricks 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 command = Ctrl option = Alt delete =
2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く