ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列（隣接する項が共通の差を持つ数列）の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
Software developer, author, and host of Full Stack Radio. November 30, 2017 Update: It looks like the bug in Safari has been fixed in Safari 15, so I wholeheartedly recommend using em for media queries now. Keeping the post up for historical reasons, but the conclusion is no longer valid. In March 2016, Zell Liew published a really great in-depth post titled "PX, EM, or REM Media Queries?", where
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。 レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。 「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。 検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとは ビュー
数週間前、CSS変数（より正確にはCSSカスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来
会社名のうち「株式会社」などは省いています。 予告なくセミナーイベントの仕様が変更になることがあります。 修正事項は、開催までにお送りするカウントダウンメール（やFacebookイベントページ、Twitterなど）でお知らせしていますので、ご一読ください。 セッション概要と 出演者のプロフィール 2016年01月20日 時点での最新情報です。 セッションタイトル、内容、出演者は、状況に応じて変更する可能性があります。なお、プロフィールは、本セミナーイベント開催時のものです。 CSSを用いた縦書きWebの技術解説 あらゆる情報が流通するWeb。日本語で必須となる縦書きも主要ブラウザで利用できる環境になってきました。 日本固有の縦書きという概念が、CSSにどのように取り込まれているのかについて、技術的な背景を説明しつつ、実際にWebを縦書きでデザインする際のおさえておくべきポイントを解説します
縦書きを利用したWebコンテンツの普及促進の一環として行われる「縦書きWebデザインアワード」の作品受付がスタートしました。アワードでは、表現的に優れた実用性の高い縦書きの作品、Webの新たな可能性を見せてくれるような縦書きの作品を表彰します。 主催するのは、電子書籍端末メーカー、印刷会社、通信事業者などの民間企業等により構成される「縦書きWeb普及委員会」（正式名称：次世代Webブラウザのテキストレイアウトに関する検討会）です。 受付スタートとはいえ、作品は応募者がWeb上に公開したうえで、URL、作品タイトル、ニックネームやチーム名、アピールポイントなどを応募フォームから入力するだけです。誰でも簡単に応募できます。 アワードで募集するのは「自由部門」「課題部門」「高校生以下の部」の3部門。 自由部門では、CSSによる縦書き機能の「CSS Writing Modes」を用いて自由なWeb
デザイナーとツールは切っても切り離せない関係です。ときにはデザイナーのスキルはツールの熟練度や使い分けの仕方で決まることもあります。長く使い続けたいですが Web やアプリのデザインは、テクノロジーと密接に繋がる仕事であるが故に、いつの間にか新しいツールが主流になることがあります。 特にここ 10 年でデザインの仕事は大きく変わりました。今でも Web デザイン、アプリデザインにおいて Adobe 製品は多大な影響力をもっていますが、それがほぼ唯一の選択肢だった頃と今は違います。また、今まで以上にデザインにスピードと柔軟性が求められているので、Adobe 以外のツールも必要になってきています。 では実際、世界のデザイナーはどのようなツールを使っているのでしょうか。ニューヨークのデザイナー Khoi Vinh さんが、The Tools Designers Are Using Today で
WordPress Advent Calendar 2013、3日目を担当させていただきます。@Toro_Unitです。 今回はWordPressで活用されているようで活用されていないような気がする、editor-style.cssをがっつり掘り下げてみようかと思います。 そもそもeditor-styleとは WordPressの投稿画面のビジュアルエディタ(ビジュアルリッチエディターとも言いますね)に適用するCSSのことです。 テーマのfunctions.phpに add_editor_style(); と記述すると、テーマ内のeditor-style.cssというファイルが、読み込まれるようになります。 また、引数にファイル名を指定することが可能で、その場合、 add_editor_style("css/editor.css"); とすると、テーマディレクトリのcss/editor.c
ウェブデザインって、どんなデザインなんでしょうか。 人によっていろいろな定義があると思いますが、最近思ったことをひとつ。 我々コンセントは、もともと40年以上続いている出版デザイン（エディトリアルデザイン）の会社、アレフ・ゼロが母体となっています。実際、社内デザイナーの半分以上はエディトリアルデザイナーなのですが、そんな紙系デザイナーがいま、ウェブサイトやランディングページなどを作ることが増えてきました。 かくいう僕も、もともとエディトリアルからキャリアをスタートしています。 先日そんなエディトリアルのメンバーがウェブにチャレンジした社内報告会に参加したのですが、それがとても面白かったんですね。 そこで彼ら／彼女らは、 ストーリーテリングへの強いこだわり。 QA的な課題解決よりも、コンテンツ戦略的なPDCAアプローチ。 情報を「見ため読み」で届けるという価値観。 肩書きにこだわらない、フロ
2024年12月28日（土）から2025年01月05日（日）まで、年末年始休業とさせていただきます。 休業期間中に頂戴したお問合せにつきましては、2025年01月06日（月）以降のご返信となります。 また期間中は、案件掲載企業からの返信が遅れる可能性がございますので、予め御了承ください。 世の中にはWebデザインに関する参考書が数多く刊行されており、Webデザインを学ぶ環境は十分すぎるほど整っています。Webデザインのスキルを向上させるために読んでもらいたい、オススメの参考書を7冊厳選してご紹介ます。 タイポグラフィの基本ルール－プロに学ぶ、一生枯れない永久不滅テクニック タイポグラフィを学ぶならこの一冊。 文字組みを美しく見せるための基礎知識からテクニックまで、分かりやすく教えてくれます。 本書を読んでタイポグラフィを理解すると、微調整によってフォントの見栄えが全然違うことに気づきます。
Bases are a scale’s root numbers. For example, the size at which your body text typeface looks best. More → Ratios are multiplied by the base to produce a scale of numbers that is proportionally related. If you know what size you want a heading to be, type the target value @ position on the scale like 36@5 More → How do I use this? Use a scale like you would use a ruler. Many people set heading ty
43. Typography: Corporate typefaces As with our logo, consistent use of our corporate typefaces—Adobe Clean and Minion® Pro—reinforces Adobe’s brand identity. Both are OpenType™, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features. Both fonts are available for download from Marketing Hub under Corporate > Corporate Fon
CSSの設計 = セレクタ名をどう付けるか、って思っている人が多いので、年も明けたしここらで一度「CSSを設計する」とはどういうことか、考えていることをまとめてみる。 セレクタ名をどう付けるか CSSのルールセットは現状全てグローバル定義なので、上手いセレクタ名を付けることで衝突を回避する必要がある。 そのための手法として、SMACSSでは.is-**とか.l-**みたいにプリフィックスを付けたり、BEMみたいに.Block__Element--Modifierのような独特な記法でネームスペースを設けたりする。 CSSは、HTMLのどの要素にどんなスタイルを当てるか、という風に宣言的に記述する言語だ。 この特性ゆえに開発者は、このスタイルをどこの要素に適応させるべきかと考え、セレクタ名を付け、HTMLの属性値に書く。 しかし、この「セレクタ名をどう付けるか」と考えることが、Webページのデ
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
This is my (living) collection of front-end links. It's not complete by all means, in fact, there isn't any of the obvious ones, like Can I use or so. Just some links that I need occasionally but can't remember their names, so I saved them here for quick access. Also, they're somewhat randomly ordered. Docs DevDocs Native HTML Elements jQuery -> JS Default Font Family Shadow DOM The list Form Pseu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く