タグ

ブックマーク / www.webcreatorbox.com (5)

  • ダークモード時の画像の扱い方

    2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します! ↑私が10年以上利用している会計ソフト! 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @

    ダークモード時の画像の扱い方
    naggg
    naggg 2022/11/10
  • SVG形式のファビコンを設置しよう

    2022年4月27日 SVG, Webサイト制作 つ・い・に!ファビコンもSVG形式が対応されるようになりました!SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません!やったね!少し工夫すればダークモードにも対応できますよ!さっそくみていきましょう! ↑私が10年以上利用している会計ソフト! SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと

    SVG形式のファビコンを設置しよう
    naggg
    naggg 2020/02/13
  • Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた

    2018年3月15日 XD, スマートフォン, 便利ツール 先日発表された、Adobeのプロトタイピングツール、Adobe Experience Design(Adobe XD)。Sketchライクなシンプルなグラフィックツールです。なにやら面白そうだったので、早速つついてみました。デモとして、簡単にチャットアプリのプロトタイプを作ってみたので、使用感とともに紹介します。 ↑私が10年以上利用している会計ソフト! Adobe Experience Design(Adobe XD)って何? Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。ただグラフィックが作成できるだけではなく、クリックやタップで次の画面に移動し、実際に動作しているようなプロトタイプも作成できます。それだけの機能がついて、なんと無料です! 残念ながら今のところMac専用ツールですが、今年中にWi

    Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた
    naggg
    naggg 2016/03/30
    ようやく、Adobe の Experience Design を試してみたけど、これ、クッソ便利だな・・・。プレビュー機能が、Flashと同じくコントロール+エンターとか胸熱すぐるっ・・・!
  • 商用利用OK!2015年にリリースされた無料フォント35

    2015年12月16日 フォント 2015年も残り二週間!今年も数多くの素敵フォントがリリースされました!この一年を振り返って、「これは!」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト! 日フォント はれのそら明朝 かしこまりがちな明朝体に丸っこさをプラスしてスッキリ美しく仕上がったフォント縦書きでもきれいです。 JKゴシックL 丸っこくてこじんまりとした可愛らしいフォント。少し太くなった「JKゴシックM」もあります。ちなみにフォント製作者は女子高生ではないようです。 機械彫刻用標準書体フォント 工業的な彫刻によって文字を作成するときの標準としてJISに定められたフォント。サイトではフォントの設計について詳しく紹介されています。 コーポレート・ロゴ 企業や

    商用利用OK!2015年にリリースされた無料フォント35
    naggg
    naggg 2016/03/03
  • 海外Webサイト・海外Web屋の特徴

    2013年3月23日 Web関連記事, 海外情報 以前「日向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ?」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います! ↑私が10年以上利用している会計ソフト! 追記:ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ

    海外Webサイト・海外Web屋の特徴
    naggg
    naggg 2011/03/02
  • 1