サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
standard.shiftbrain.com
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発(Component Driven Development)と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう? 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
このブログではこれまで「文字サイズの比率と調和」や「音楽、数学、タイポグラフィ」といった記事で、調和数列をもとにしたスケールから文字サイズを決定する手法を紹介してきました。私たちのチームではこのスケールを「ハーモニック・モジュラー・スケール」と呼び、実際に多くのプロジェクトで採用しています。 このたび私たちは、ハーモニック・モジュラー・スケールにもとづくテキストのスタイリングを簡単にするためのツールとして、Sassライブラリ「Harmonic Modular Scale」とSketchプラグイン「Harmonic Modular Scale for Sketch」を公開しました。これらのツールはスケールにもとづく文字サイズを算出すると同時に、行の高さを一定のユニットの整数倍に揃える機能も持っています。 Harmonic Modular Scale Harmonic Modular Scal
DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページのテンプレートやコンポーネントをいかに堅牢な設計にできるかが重要だと感じます。 連想されるトピックとしては「CSS設計」がありますが、私見としては、CSS設計はセレクタの書き方やコンポーネントの整理の方法について述べたものであって、いかにしてレイアウトを組み立てるかという議論にはあまり踏み込んでいません。 具体的には、どのように宣言を組み合わせるか、どのようにレスポンシブにするかのような曖昧な領域については、実装において必ず意識される部分であるにも関わらず言及される場面は少ないのではない
先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ
Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュールシステムを簡単に紹介したいと思います。 なお、ここで言うSassの「モジュール」とは、メンバー(変数、関数、ミックスイン)のコレクションを指し、具体的にはSassのソースファイルのことです。 背景 新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、と
ウェブやソーシャルメディアなどで、日本語の原稿を英語に翻訳した(と思われる)コンテンツを目にする機会が増えています。しかしそういった英語のコンテンツの中には、欧文タイポグラフィの視点から見ると少しおかしく感じられるものも少なくありません。たとえば句読点や記号の使い方が間違っていたり、語句が不自然に強調されていたりといった具合です。このようなちょっとしたミスは、ひとつひとつは些細なことでも、結果としてコンテンツが正しく伝わらなかったり、書き手の信用を下げてしまったりする原因にもなります。 この記事では英語のコンテンツを作るときに気をつけたいタイポグラフィのディテールについていくつか解説します。タイポグラフィといっても、グラフィックソフトを扱う技術も高度なCSSの知識も必要ありません。ほんの少しテキスト原稿に手を入れたり、マークアップを工夫したりするだけでも、タイポグラフィの質を高められるので
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
リスト項目のマーカーを非表示にするには、CSSでlist-style-typeプロパティの値にnoneを指定します。このとき指定する要素がol・ul要素でもli要素でも、表示結果は同じになります。 ol, ul { list-style-type: none; } /* または */ li { list-style-type: none; } ではどちらに指定しても良いかというと必ずしもそうではありません。list-style-type: noneをol・ul要素に指定すると、非表示にしたデフォルトのマーカーを「復元」するのが少し面倒なのです。とくにtype属性を持ったol要素でその違いが大きく影響します。 ol要素のtype属性を使う機会はあまり多くないかもしれません。しかし特定のリスト項目をその前後のテキストから参照したい場面で必要な属性です。例えばウェブサイトの利用規約やプライパシー
ウェブページのテキストはいくつかの文字サイズの組み合わせで出来ています。それぞれの文字サイズは情報の階層構造を表現するなどの役割を担いますが、同時にお互いが適切なバランスで調和しているべきです。そのため文字サイズはページやコンポーネントごとに場当たり的に決められるべきではありません。プロジェクトを通じて一貫したシステムを形成している必要があります。 そういった調和と一貫性を持った文字サイズのシステムを作るために、私たちのチームでは「調和数列」に基づいて一連の文字サイズを決めることがあります。調和数列とは等差数列(隣接する項が共通の差を持つ数列)の各項の逆数からなる数列です。 1, 2, 3, 4, 5, 6 ... // 等差数列 1, 1/2, 1/3, 1/4, 1/5, 1/6 ... // 調和数列 実際に調和数列を用いて文字サイズを算出する例を以下に示します。 $font-siz
CSSのmix-blend-modeを使うと、重なり合った要素同士の色の合成方法を設定できます。これによりPhotoshopなどのグラフィックツールにあるブレンド機能と同じような効果を実現できます。 See the Pen mix-blend-mode basic by Yuhei Yasuda (@yuheiy) on CodePen. 背景にグラデーションを設定し、ブレンドしたい要素にはmix-blend-modeを適用するだけで同じ見た目を実現できます。今回は画像に適用します。 .wrapper { background-image: linear-gradient(to bottom, yellow, red); } img { mix-blend-mode: multiply; } Chromeには<body>とその子孫要素をブレンドできないというバグがあります。そのためページ全
優れたタイポグラフィはテキストを読みやすくし、その内容の理解を助けてくれます。では「読みやすさ」を実現するためにはどのような点に注意すべきでしょうか。 タイポグラフィには読みやすさに関わる概念として「レジビリティ」と「リーダビリティ」というものがあります。大雑把にまとめると、レジビリティは「読み間違いがないこと」、リーダビリティは「快適に読めること」を意味します。この記事ではこれらの用語を解説しながら、ウェブデザインで読みやすさを高めるにはどのようにすべきかについて考察します。 レジビリティ(legibility)は文字が正しく判別できるかどうかを意味します。「あ」の文字を間違いなく「あ」として読めるかどうか、という観点です。訳語としては「判別性」などがあるようです。そもそも文字が判別できなければ読みやすさも何もありませんので、レジビリティは読みやすさの前提条件と言えます。 ウェブデザイン
活動終了のご報告 私たちスタンダードデザインユニットは、2020年6月末日をもって本ウェブサイトの更新を停止するとともに、チームとしての活動を終了いたします。サイトは2018年10月よりおよそ1年半にわたって運営して参りましたが、これまで続けることができたのはひとえに読者の皆さんの支持のおかげです。ありがとうございました。またどこかでお会いしましょう。 UIにおける見えるけど利用できない非活性な領域の実装とinert属性について モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 Component Driven Development for Static Deliverables: A Retrosp
ニュース系ウェブサイトの記事リストやソーシャルメディアのフィードなどでは、各記事の公開日時を相対表記で表現することがあります。「5分前」「3時間前」「きのう」というように、記事の公開からどれだけ時間が経過しているかを表現する形式です。具体的には、JavaScriptで記事のタイムスタンプをユーザーの閲覧時の日時と比較し、相対表記に変換することになります。一方、「2018年10月1日」のような形式は絶対表記と呼ばれます。各記事の個別ページでは絶対表記が採用されることが多いようです。 もっとも単純な相対日時の実装は、60分前までは「m分前」、24時間前までは「h時間前」、そしてそれより前は「d日前」というように、時間の単位どおり機械的に処理したものです。しかし私たちの日時の捉え方はカレンダーや時計のとおりではなく、もっと感覚的なものです。日時の相対表記を導入する意義は、正確に何時間何分前の記事
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
このページを最初にブックマークしてみませんか?
『シフトブレイン/スタンダードデザインユニット』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く