実は簡単！3分で分かるSVGアイコンの作り方 | WebNAUT by Beeworks
※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。 スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。 SVGとは？ “Scalable Vector Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。主に下記のようなメリットがあります。 スマホ対応・Retina対応も1つのファイルでOK 同じデザインなら、スマホ用、hover用、色違い…、などいくつもpng画像を用意する必要はありません。また、結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。 後からサイズや色の調整が
favicon大解剖 〜必要サイズから検証時の注意点まで〜 | WebNAUT by Beeworks
※この記事は2016年3月8日時点で執筆された記事です。現在では仕様が異なる可能性があります。 faviconって何？どのサイズまで用意すればいいの？Windowsのカスタムタイルって？Androidでうまく映らないんだけど？ 単純なように見えて調べだすときりがないfaviconについて、基礎知識から説明いたします。 目次 favicon（ファビコン）とは？ faviconファイルの基礎知識 どのサイズを用意すればいいの？ 透過・非透過などデザイン時の注意点 Android対応の注意点 favicon実装確認の注意点 favicon.icoファイルの作りかた まとめ favicon（ファビコン）とは？ faviconとはfavorite iconの略で、主にブラウザのタブや履歴、お気に入りに表示されるアイコンや、スマホでサイトをホーム画面に置いたときの表示アイコンなどのことを指します。 ほ
あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ | WebNAUT
あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ こんにちは！ディレクターの田川です。みなさんはモバイルのアプリやWEBサイトを設計するときに、プロトタイピングツールをお使いでしょうか？ ビーワークスでも、モバイルのアプリやWEBサイトを設計するときは、実機でのUIの見え方や使用感をチーム全員で共有するために、できるだけプロトタイプをつくるようにしています。 プロトタイプを作成するツールは色々ありますが、株式会社グッドパッチ様が提供している「Prott」は、操作が直感的で使いやすく、弊社ディレクターやデザイナー陣など多くのメンバーが使っています。 今回はProttのご紹介とグッドパッチ様がユーザーレビューでご来社くださいましたので、その様子をレポートします。 Prottのおすすめポイント Prottは今年4月にベータ版がローンチさ
2時間でSassを習得！Sass初心者向け講習スライド大公開！ | WebNAUT by Beeworks
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
