タグ

CSSとwebサービスに関するm-r-designのブックマーク (2)

  • FontAwesome を SVG で使用する【JavaScript なし】

    はじめに「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にします。そうなるのを防ぐため、 FontAwesome を JavaScript なしで使用します。または、 FontAwesome は、使用しないアイコンも含めてすべてのアイコンを読み込むため、数個のアイコンのみを使用する場合、不必要なコストが掛かります。それを回避するため、必要なアイコンのみを読み込んで使用します。 FontAwesome は、上記の方法を PNG 画像でも実現できます。ですが今回は、後述する理由により SVG を利用して実現します。 ちなみに、 JavaScript 無効環境だと次のように文字化け

    FontAwesome を SVG で使用する【JavaScript なし】
  • ブラウザー上でスタイルガイドが作れるFrontifyを試してみた

    2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します! ↑私が10年以上利用している会計ソフト! スタイルガイドとは? Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る

    ブラウザー上でスタイルガイドが作れるFrontifyを試してみた
  • 1