タグ

ブックマーク / uxmilk.jp (4)

  • CSSで文字列の折り返しをさせない方法

    セルの中が思ったより長文になってしまった場合や、表示する範囲が狭まってしまった時に、文字列が勝手に折り返してしまい、レイアウトが崩れることがあると思います。 そんな時は、今回ご紹介する方法を利用することで、簡単に文字列の折り返しを禁止することができます。 white-space: nowrapを利用する white-space: nowrapは、改行を強制的に禁止するとができるプロパティです。 例を見てみましょう。 これは、何も指定していない時の表示テストです。2行目が幅が足りなくて改行してしまっているのがわかるかと思います。 ここで、改行したくない要素に

    k75mix
    k75mix 2021/03/22
  • 【2018年春】今チェックしておきたいデザインツール12選

    JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob

    【2018年春】今チェックしておきたいデザインツール12選
  • Webデザインのスタイルガイドの作り方

    Webサイトの制作はどんどん複雑化しており、1人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

    Webデザインのスタイルガイドの作り方
  • Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選

    みなさんはChrome拡張機能を活用していますか? 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChrome拡張機能を紹介します。 1. FireShot ダウンロードURL:FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL:PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ

    Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
  • 1