EXPERIENCE JAPAN PICTOGRAMSAnimated Pictograms日本に古くから根付く、独特の文化や習慣、 マナーをもっと楽しく、わかりやすく、身近に。 参拝お辞儀餅つきタクシーを拾う入浴手水茶道手締め電車相撲の決まり手阿波おどりComing Soon
ランディングページ制作に役立つマニュアルと改善法(toCtoB)｜相原 ゆうきfree web hope
こんにちは！株式会社free web hopeの相原です。 今回は当社でのランディングページの創り方をベースしにて、ランディングページ制作をする時に役立つフレームワークを公開します。当社の社内マニュアルにもなっているものです。お陰様で中々の高評価を頂いており、書いた甲斐がありましたtt これ読んだらめちゃめちゃやる気出た！！ 何から始めたら良いのかわからず何も知らないままやろうとしていたからね、そりゃあ心も折れるはずだ👶 ランディングページ制作に役立つマニュアルと改善法(toCtoB)｜相原 ゆうきfree web hope @fwh_aihara #note https://t.co/u5ACEAfePU — せりょ🌷＠Travel×Shopify✈︎ (@seritulip) October 14, 2020 事業戦略から、LPへの落とし込み、tipsまで、半端ない。 めちゃくちゃ
CSS fix for 100vh in mobile WebKit | CSS-Tricks
A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is t
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
font-feature-settingsとカスタムプロパティ
font-feature-sttingsプロパティは便利だけど、値の意図しない上書きが発生しやすいという扱いづらさがある。たとえば「ページ全体でloclを有効にした上で、h1要素ではpaltを有効にしたい」というようなとき、以下のようなCSSを書いてしまいがちだ。 body { font-feature-settings: "locl" 1; } h1 { font-feature-settings: "palt" 1; } しかしこのときh1のpalt機能タグはbodyから継承されたlocl機能タグに追加されるのではなく、これを上書きしてしまう。つまりh1ではloclが無効になる。これは正しくは以下のように書かないといけない。 body { font-feature-settings: "locl" 1; } h1 { font-feature-settings: "locl" 1, "
アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
ふりがなのスタイル
サイトのデザインによっては、ふりがなをもうちょっと小さめにしたい場合もあるかもしれませんね。タイトルとかのふりがなでは、 頭揃えにしたり、お尻揃えにしたいかもしれません。そんなふりがなのスタイルを調整したい時のためのまとめです。 文字サイズと文字間 ルビテキストの文字サイズは、デフォルトだとルビベースの半分の文字サイズ（50%）になってる（下サンプル上段）んですけれど、このサイズは、普段のテキストと同様に、font-sizeプロパティを使って調整することができます。 下のサンプル（下段）では、ルビベースの30%の文字サイズになるように、指定しています:)。 rt { font-size: 30%; } 一方、ふりがなの文字間を調整する場合はというと、普段のテキストと同様にletter-spacingプロパティで調整しようとしても、上手くいきません…。下のサンプルでは、ルビテキストの文字間を
A11Y Style Guide
This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise, there are ways to help contribute to the a11y style guide. Why did this project start? We wear a lot of hats as front-end developers. Depending on the client or company you work for, you may be the designer,
BRIGHT｜ブランディングデザインブライト
米作りから酒造りまで。 言葉通り「イチから」造る日本酒ブランド。 一ノ蔵 プロダクト コンセプト ネーミング スローガン ステートメント ロゴ パッケージ 宮城県を代表する酒造会社である、株式会社一ノ蔵。数年かけて進められてきた新しいプロジェクト「イチからはじめるイチノクラ」シリーズのラベルデザインについて、2022年5月にブライトへご相談いただいた。同年12月に1本目を、2023年2月に2本目と3本目をリリースした。 ペンションの朝食で作っていた、 ジャムから始まる物語。 びんのおのや プロダクト 資金計画 コンセプト ネーミング スローガン ステートメント コピー ロゴ パッケージ グラフィック 撮影 スタイリング 2016年からはちみつやジャム、バターの製造販売を行っている「びんのおのや」のリブランディング。はじめに依頼いただいたのは「バラとはちみつ」という製品単体のパッケージデザイ
Can't Unsee
A game where you need to pick the design that is most correct. Test your attention to details!
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
シフトブレイン／スタンダードデザインユニット
活動終了のご報告 私たちスタンダードデザインユニットは、2020年6月末日をもって本ウェブサイトの更新を停止するとともに、チームとしての活動を終了いたします。サイトは2018年10月よりおよそ1年半にわたって運営して参りましたが、これまで続けることができたのはひとえに読者の皆さんの支持のおかげです。ありがとうございました。またどこかでお会いしましょう。 UIにおける見えるけど利用できない非活性な領域の実装とinert属性について モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 Component Driven Development for Static Deliverables: A Retrosp
The Complete Guide to Lazy Loading Images | CSS-Tricks
Images are critical for every website and application today. Whether it be marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are large in size making them the single largest contributor to the page size. As per the latest HTTP Archive data, the median page size on desktops is 1511 KB. Images make up for almost 650 KB of that size
デザイナーに次に知ってほしい文字組み初級 – 503DESIGN
BLOG / 2018.09.18 2014年に「デザイナーにまず知ってほしい文字組み入門」という初心者向けエントリーをあげて以来、早数年が経ちました。 その月日の中で「絶対フォント感」という言葉が流行したり、「フォント」あるいは「文字組み」という単語が（より一層）脚光を浴び、メディアコンテンツとして取り上げられることが多くなったなと感じます。 例えば2017年にはTBSさんの「マツコの知らない世界」でも取り上げられ、マニアには垂涎の的の「フォントかるた」という大人気商品も生まれたりしています。 さらに、文字組みに関する記事も爆発的に増えていると感じますが、手法が先行した記事が多いことに少し私は疑問を持っています。 特に「なぜ文字をツメることが“大”前提」なのでしょうか？ この記事は、上記の“なぜ”の部分を少し意識してもらい、Adobe Illustratorをメインで使用するデザイナーが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple Icons
HTML + CSSでリアルな炎（アニメーション付）を作る - Qiita
MindBEMding と近代 Component 設計の共通点 - Qiita
PostCSS Utility Library
Inclusive Components
Web Design Museum - Discover old websites, apps and software
