タグ

ブックマーク / liginc.co.jp (4)

  • 簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは? 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整(カーニング)ができます。 はじめに:ベタ組みと文字詰め 日フォントは基的にベタ組み(等幅)で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」

    簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    seal2501
    seal2501 2022/06/09
    デフォのNoto Sansで使えないのか…
  • Vuexライクなノンコンポーネント用ステート管理ライブラリ「Vanix」をつくってみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうも、フロントエンドエンジニアのヒガです。 ここ最近の案件でNuxtを使っていたんですが、とっても素敵なフレームワークで恋に落ちちゃいそうでした。 でも、僕の対応する案件はそれらのフレームワークを使えないことも多く、フレームワークを使ったあとにそういった案件にとりかかると正直めんどうだなと感じることがあります。ですので、一部の機能だけでもいい感じにつかうことはできないかなと思いました。 目をつけたのはステート管理に関する機能です。NuxtでいうとVuexですね。公式サイトを引用するとこのように書いてあります。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 (引用元:https://vuex.

    Vuexライクなノンコンポーネント用ステート管理ライブラリ「Vanix」をつくってみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    seal2501
    seal2501 2019/05/09
  • 「え?それそんなかかるの?」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    多! そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度:★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ!うちもこんなんやりたい!と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法(CSSのtransformとJSを組み合わせるなど)で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ

    「え?それそんなかかるの?」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    seal2501
    seal2501 2019/03/04
    セールスとかマーケの人が見てくれればいいんだけどほとんどは見てくれないのでエンジニア側が腐臭を感じるしかないつらみ
  • Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする! そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

    Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    seal2501
    seal2501 2018/02/07
  • 1