東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 CSS部分をよく見ると…… しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！　「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ 別バージョンでは「

HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01　モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色

この記事は、技術書典 13 で頒布中の「Vivliostyle で本を作ろう vol. 6」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開予定です。 先日、Vivliostyle に大きなアップデートがあり、現代のブラウザで普及が進みつつある CSS Variable (CSS 変数) が Vivliostyle でも使えるようになりました！ この CSS Variable、実はこれまでの CSS の概念を大きく覆すものであり、私たちのような Web フロントエンドエンジニアにとってはもはや当たり前のように使われているものですが、最近の CSS の進化を知らない人にはまだまだその活用方法が知られていないようです。 この記事では、CSS Vari

昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。

ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、

これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif

少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を

2021年もあと残り2週間ですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 2021年フォント界の大きなニュースは、Google Fontsに大量の日本語フォントが追加されたことです。Webフォントとして利用できるのはもちろん、オープンソースになったので商用プロジェクトでも無料で利用できます。 というわけで、Google Fontsで利用できるようになった日本語フォントから紹介します。有料だったフォント（砧書体やZENフォントやFontworksなど）もオープンソースのSILライセンス

おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？　最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数

はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立

ピクセルフォントが大好物な人に朗報です！ ピクセルフォントを多数リリースしているx0y0pxFreeFontから新作フォント「マルモニカ」がリリースされました。 可読性に優れたピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されています。さらに、ライセンスも太っ腹で、商用無料、ゲームやスマホアプリへの埋め込みもOKです。 マルモニカ マルモニカの特徴 マルモニカのダウンロード x0y0pxFreeFontの他のフォント マルモニカの特徴 マルモニカは、ピクセルフォントを多数リリースしているx0y0pxFreeFontの新作フォントです。 ピクセルが形作る曲線美を追求した丸ゴシック体のピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されていま