kouna426のブックマーク / 2018年4月19日

kouna426 id:kouna426

2018年4月19日のブックマーク (4件)

日本語Webフォントをサブセット化して軽量化する方法
今回は最近のWeb制作業界でよく利用されている日本語Webフォントを実用化する方法について紹介したいと思います。ちなみに私がWebフォントに憧れるようになったのは、佐野章核さんというグラフィックデザイナーが作ったWebサイトを見たことがきっかけでした。この前見た夢Konelこの佐野章核さんはグラフィックデザイナーを名乗っているのにも関わらず、Photoshopやイラレのエフェクトをあまり使わない海外っぽいデザインが印象的です。それでいて、日本語サイトではあまり見ない日本語Webフォントを用いて美しいタイポグラフィーによる先進的なデザインを実現しています。モバイルファーストの時代に突入するにあたり、今後はこのようなサイトが増えていくのではないかな〜という新時代到来を予感させてくれました。 Webフォントを使うメリット、デメリットについて日本語Webフォントが最近流通し始めている背景に
kouna426 2018/04/19
Webデザイン
リンク
WebフォントのGoogle Noto Sans Japaneseを90%以上軽量化する方法 | ねこのてそう
家とネットを愛する、引きこもりパパ。用事がなければ、家を出ない。死ぬまで楽しく生きることを考えて生活してます！
kouna426 2018/04/19
Webデザイン
リンク
【CSS】width:autoとwidth:100%の違い| けんちゃん先生のWeb講座
パソコン時代のCSSは、横幅（width）はpxなどの固定値を使うことが多かったのですが、最近はスマホに対応したレスポンシブデザインが主流になり、横幅に%などの可変値を使うケースが増えてきました。しかし、レスポンシブデザインのcssに慣れていないと、スマホで確認したときにレイアウトが崩れてしまうケースがあります。テキストがはみだしたり、右側に謎の余白ができてしまったり… 原因はcssのwidth・padding・borerの設定にあることが多いので、確かめてみてください。【width:auto】と【width:100%】の違い cssの【width:auto】と【width:100%】は親要素の横幅に合わせるという点でよく似ているのですが、同じ要素にpaddingやborderを指定した場合に表示にちがいがあります。たとえば【width】と同じ要素に【padding:0 10px
kouna426 2018/04/19
Webデザイン
リンク
[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか
小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にする時、通常はwidthとmax-widthを使用します。指定方法は「width: 100%; max-width: 600px;」でしょうか。このwidthとmax-widthのどちらに100%と固定幅を指定すべきか、違いはあるのか？同じなのか？そんな疑問を解決します。 A Tale of width and max-width 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。先週の記事（Considerations for Styling a Modal）のコメントにあった興味深い会話がきっかけになりました。モーダルウインドウやコンテンツの幅を指定する時、小さいスクリーンでは最大幅で表示し、大きいスクリーンでは幅600pxで表示し、親要素からはみ出
kouna426 2018/04/19
Webデザイン
リンク
- 2018年4月20日
- 2018年4月19日
- 2018年4月13日