企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。

こんにちは、ぺちこです。 何か気のきいたオープニングトークをしようと思いましたが、びっくりするほど何も思いつかなかったので割愛します。 突然ですが、「あのフォントをWebフォントとして使いたい。でも、それにはライセンスの壁が・・・。」という悩ましいとき、ありますよね。 欧文フォントに関しては数も多いので代替のWebフォントを探すかと思いますが、これがまた時間がかかる。探している間に素敵なフォントに出会うこともありますが、短縮できるものはなるべく短縮したい！ というわけで、「Google Fonts」と「Font Squirrel」から有名なフォントにそっくりなフォントを探してみました。 比較するときの基準 探したとき、主に重視した部分は以下です。画像で比較しているアルファベットだけが似ていても仕方ないので、ある程度の基準を設けています。 「a」「b」「c」「d」「o」の丸み 「a」「g」の

※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se

2013年11月28日 Webサイト制作, 便利ツール 病院の待合室で何時間も待たされ、「暇だしWebサイトでも作ろっかなー」なんて思った事はありませんか？きっとあまりないと思いますが、今年にはいっていろいろあった私はそんな機会がたくさんあったので、いくつかのiPadアプリを使って作ってみました。作ったHTMLテンプレートは無料配布しています！そうです、アレ、iPadで作ったものだったのです。ふふ。 ↑私が10年以上利用している会計ソフト！ あると便利なスタイラスペン スタイラスペンはiPadなどのタブレットで使えるペンです。iPadを使ってお絵かきしたい人は持っているとなにかと便利。カナダのボクシングデーで$5位になっていたのでノリで買ったのがこのコ。ちょっとメーカーは覚えていないのですが、よくある無難なタイプの物ですね。書き心地は悪くないのですが、ペン先が太いので、細かい字や絵は書きづ

世のアプリ運営者なら誰でも抱えている課題の一つに、「どう集客するか（＝ダウンロードしてもらうか）」ということが挙げられると思います。Yahoo!ニュースはブラウザ、アプリの両方で展開しておりますが、もちろんYahoo!ニュースのアプリ担当者らもそのような課題を抱えており、日々研究・試行錯誤を続けています。今回は、Yahoo!ニュースアプリにおけるバナー集客の事例と、そこから見えてきたポイントをご紹介したいと思います。

コピペでできる！cssとhtmlだけの[clip-path]で作るブロックの一部につけるリボンデザイン8種

ホームページで必ずと言っていいほど必要になる要素といえば「見出し」です。しかし、ホームページに合わせて1からデザインするのは作業工数がかかる上に、毎回同様のデザインになってしまいがちです。また、CSSについてあまり知らない人にとっては、デザインしたくても自ら実装するのはハードルが高いと言えるでしょう。 そこで今回は、見出しをオシャレに装飾できるCSSのコードを紹介している記事をピックアップしました。 オシャレな装飾ができるCSSの見出しまとめ 1. 見出しをお洒落に装飾するCSSを紹介 http://ideahacker.net/2015/05/26/10208/ 11とおりのオシャレな見出しデザインを紹介している記事です。左と下にボーダーがあるもの、1文字目だけが大きいもの、といった定番デザインの見出しが作れるコードを掲載しています。 2. CSSのコピペだけ！オシャレな見出しのデザイン

見出しはデザインの印象を大きく左右する要素のひとつ。デザインをしている人ならこの箇所で行き詰まったのは一度や二度ではないでしょう。試行錯誤してるんだけどなんかしっくりこない。。と悩んでいる人も多いはず。今回はそんな行き詰まりがちな見出しのデザインを作るためのアイデアや考え方をご紹介したいと思います。 見出しデザインの基本的な考え方 見出しの役割は「本文を読んでもらうためのきっかけ」です。 Webサイトや紙面を見ようとしたとき、見出しがなく本文だけだったらと想像してみましょう。どこに何が書いているのかが一見してわからず、思わず本を閉じてしまう（または別のWebサイトを見に行く）のではないでしょうか。見出しには「目に飛び込んでくる情報を整理して効果的に伝える」という役割があります。 ここに「見出し」と「本文」という関係が見えてきます。見出しで見る人の興味を惹き、本文を読ませる。サッカーのパス回

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

ユーザー体験を追求したテーマ SANGOはユーザーフレンドリーを徹底的に追求したWordPressテーマです。ブロックエディターにも完全対応しています。

レイアウトはflexboxが標準になり、HTML5.1でsection要素や見出しの使い方が変更され、Web制作の現場で新しい知識の必要性が求められています。多様化するWebページを実装する最新の知識とテクニックが詳しくまとめられたオススメの本を紹介します。 モバイルファースト・オンリーでデスクトップからスマホが主流になり、ブラウザのシェアはChromeが頭一つ抜け、IE9などの古いブラウザはサポートが終了し、Web制作の環境が大きく変化していく中、HTMLもCSSも現状により適した実装に進化しています。 2016年末から2017年にかけて、HTMLとCSSでは大きな動きがありました。 HTML5.1の勧告 参考: HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説 レイアウトはfloatからflexboxに、そしてCSS Gri

実装方法については、こちらをご参照ください。 今回は、上記の吹き出しに影をつけてみたいと思います。 最近使えるようになったfilterを使って影をつける ChromeやiOS6などで使えるようになったCSS Filter（詳しくは、こちら）。 Filter機能のうち、shadowを使うことで簡単に影をつけることができます。 （ソースコード） .baloon2 { width: 200px; height: 100px; background-color: #fffaee; border: 2px solid #66ff66; border-radius: 10px; -webkit-border-radius: 10px; margin: 20px auto; position: relative; /* 以下の１行でドロップシャドウが適用される */ -webkit-filter:dro

CSSファイルとJava Scriptファイルでのパスの書き方につまずきました･･･。(相対パスの場合です） このようなディレクトリ構造の場合、img01.jpgの書き方はこのようになります。 index.html <div id="div1"><img src="imgs/imgs01.jpg" /></div> このindex.htmlでCSSを外部化してstyle.cssに書いたとします。 style.css #div1 { background-image:url(../imgs/img01.jpg); } 実際に読み込まれるindex.htmlから見たパスではなく、style.cssから見た画像ファイルのパスになります。 このindex.htmlで読み込まれるJava Scriptを外部化してbase.jsに書いたとします。 base.js // JavaScript Docum

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方

2017年4月11日、Windows Vistaのサポートが終了しました。 これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。 Flexboxでコンポーネントはどう実装するのだろう、バグの対応方法はどうするなど、これから困った時にどんどん利用していきたい、HTMLやCSSのリソースを紹介します。

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ