タグ

2019年5月31日のブックマーク (5件)

  • FireFoxでinline-blockがカラム落ちする - knowledge base

    inline-blockとletter-spacingを同時指定すると崩れる たとえば下図のようなレイアウトを実装すると想定します。 リストを横並びにした、シンプルなレイアウトです。 これをinline-blockを用いて横並びにすると、なぜかFireFoxだけカラム落ちしてしまいました。 実はこれ、inline-block間の隙間を削除するためにlette-spacingで調整をしています。 HTMLは下記の通りです。 <ul class="menu"> <li class="menu__item">Nav Lorem</li> <li class="menu__item">Nav Lorem</li> <li class="menu__item">Nav Lorem</li> <li class="menu__item">Nav Lorem</li> </ul> そして、CSSは下記の

    nknkt
    nknkt 2019/05/31
    “inline-blockとletter-spacingを同時指定すると崩れる ”
  • 【初心者向】Visual Studio CodeでCSScombを設定する方法

    のようなスタイルシートがあるとします。 marginの記述がバラバラの位置にあったり、単位が不要な0にpxが付いていたりと、サイト表示には問題無いけれど、どうも汚いソースとなっています。 これにCSScombを使うと、

    【初心者向】Visual Studio CodeでCSScombを設定する方法
  • 文字や背景にピュアブラックを使ってはいけない理由

    UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか? 統計によると、「アメリカの成人の58%」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100%の明度であり、黒は0%の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

    文字や背景にピュアブラックを使ってはいけない理由
  • [CSS]pointer-eventsプロパティですごい便利に!クリックやホバーのターゲットになる要素を変更するテクニック

    CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

    [CSS]pointer-eventsプロパティですごい便利に!クリックやホバーのターゲットになる要素を変更するテクニック
    nknkt
    nknkt 2019/05/31
  • 【文字ツール】ワープテキストによる変形 - 文字の入力と編集

    【Photoshop基操作】[ワープテキスト] とは、文字をさまざまな形に変形できる15種類のワープスタイルと、数値でゆがみをコントロールするスライダーが搭載された、テキストレイヤー限定のオプション機能です。 [ワープテキスト] のメリットは、ユニークな変形を維持したまま、テキスト内容が変更できることです。しっかり組んだロゴタイプやタイトルの訂正では大助かりですね。ダイアログには、3つの調整スライダーがありますが、最も影響力があるのは [カーブ] です。ワープスタイルを選んだら、まずは [カーブ] で調整してみましょう。

    【文字ツール】ワープテキストによる変形 - 文字の入力と編集