ウェブデザインにおけるline-heightについて | Rriver

2021/04/23 369 users ウェブデザイン line-height figma 曲者 挙動

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回... 続きを読む

各OSの標準搭載フォント一覧へのリンク集 | Rriver

2021/01/18 11 users iOS font-family フォント Mac 本文

最近あらためてウェブサイトの本文の文字の読みやすさの大切さを実感していてfont-familyの指定を見直しています。そこで、まずは基本に戻って各OSに標準で搭載されているフォントの一覧を探してみたんですが、けっこう情報を見つけるのに苦労しました。 ということで、今後のためにWondows、Mac、iOSの標準搭載フォント... 続きを読む

WebP画像の使い方（2020年夏） | Rriver

2020/07/27 15 users サポー WebP Lossless PNG JPEG

2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）。Safari 14でWebPがサポートされる ので、WebPについての情報を見直しています。 WebPの紹介ページ にはWebPの可逆画像（lossless）はPNGとくらべて26%、非可逆画像（lossy）はJPEGと比べて25–34%もファイルサイズを小さくできるとあって「Safariでもサポー... 続きを読む

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

2020/07/02 650 users height link jpg width img要素

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般... 続きを読む

Sassのモジュールシステムを@importから@useに移行する方法を考えてみた | Rriver

2020/06/01 14 users モジュールシステム Sass import use 手引き

先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考... 続きを読む

SVG背景画像でwidthとheight属性が100%だとIE11で中央寄せになってしまうバグ | Rriver

2019/10/11 26 users SVG width CSS アスペクト比 height属性

先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。 svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（ア... 続きを読む

アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える | Rriver

2019/02/24 13 users ペー アクセシビリティ 考察 コーディング 前回

前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベー... 続きを読む

色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利 | Rriver

2018/08/20 36 users CONTRAST アクセシビリティ アクセシブル ピッカー

テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guid... 続きを読む

JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた | Rriver

2018/08/09 68 users デフォルト 圧縮率 画質 目視 サンプル画像

オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては80%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。90% → 85%の方が、85% → 80%の圧縮率がいいんですね。 サンプル画像をまとめて... 続きを読む

スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」 | Rriver

2018/03/14 28 users ScrollReveal スクロールアニメーション ユーザ

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「 ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified /... 続きを読む

CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い | Rriver

2018/02/21 106 users Repeat グリッドレイアウト minmax レイアウト

CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのが repeat() と minmax() です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけで メディアクエリなしでもレスポンシブなレイアウト が実現できます。 今回はその repeat() で使える auto-fill と auto-fit という値につい... 続きを読む

CSS Gridとアクセシビリティについて気になっていたこと | Rriver

2018/01/15 57 users Flexbox アクセシビリティ CSS CSS Grid

前回の記事 でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場... 続きを読む

CSS Gridでレイアウトやフレームワークの考え方・作り方が変わる | Rriver

2018/01/09 56 users Flexbox Bootstrap フレームワーク 課程 普及

最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”すると Bootstrap や Foundtion のようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは： 基本的にレイアウトはCSS Grid（必要に応じてflexbox）でやるようになる コンポーネントはいままでのフレームワークと基本的には同じだけど、... 続きを読む

22個のフォーム項目を5つに？モバイル・ウェブ制作に必要な考え方とは – Rriver

2017/11/30 21 users フォーム項目 考え方 22個 5つ

Conversions@Google 2017 での「 Mobile in the Future 」というルーク・ロブルースキー氏のプレゼンにすごく感銘を受けたので、ここでもシェアします。ルーク氏は モバイル・ファースト を提唱した、そう、あの人です。 ちなみに、2017年11月にダブリンで行われたイベントだそうですが、アップされてる動画の中でルークさんのプレゼンが 圧倒的に再生回数が多い です。... 続きを読む

iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法 – Rriver

2017/11/19 63 users メディアクエリ ウインドウ幅 作業 iframe ページ

レスポンシブなコンテンツをiframeでページに埋め込んでスクロールさせないように表示するとウィンドウ幅によってコンテンツの高さが変わるので、親フレームで高さを調整しないとコンテンツが隠れてしまう場合があります。iframeを埋め込んでいる親フレームにメディアクエリを書けば調整できますが、かなり非効率的な作業です。 先日、JavaScriptを使った方法を見つけたのでこのブログでもシェアします。ち... 続きを読む

レスポンシブに対応しててCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい – Rriver

2017/09/07 57 users カルーセル レスポンシブ スライダー CSS プラグイン

ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応していて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に長し 襷に短し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できる... 続きを読む

スタイルガイドジェネレーターの「Fractal」がかなり良さそう – Rriver

2017/04/10 84 users FRACTAL コンポーネント ウェブUI 起動 インストール

ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「 Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめ... 続きを読む

生年月日の入力欄のレスポンシブ対応についていろいろ考えてみた – Rriver

2017/01/31 37 users マルチデバイス レスポンシブ 要件 実装 日付

先日、生年月日の入力欄をレスポンシブに最適化する良い方法はないか検証してみたら、想像以上に大変だったのでメモを残しておきます。 日付の入力と言えど実はいろいろな実装方法があって、マルチデバイスに対応しながら要件にあった実装をするにはどうしたらいいのか、改めてゼロベースで考えてみました。結局、最終的には振り出しに戻った感じなんですけどね（結論を先に見たい方は こちらから どうぞw）。 近い将来、レス... 続きを読む

JavaScriptだけでサーバーの日時を取得する方法のメモ – Rriver

2017/01/20 34 users サーバ PHP 備忘録的 課題 参考

JavaScriptでサーバに設定されている日時を取得する方法を忘れないようにメモっておきます。PHPとかなら簡単なはずなんですけどね。結構、手こずったので色々備忘録的に書いておこうと思います。同じような課題に出くわした方の参考になれば幸いです。 ただ、JavaScriptはあまり得意ではないので、勉強しながらやってます。以下、あくまでご参考程度に。より良い方法があったら、ぜひご教授いただきたいで... 続きを読む

もう、レスポンシブでいいんじゃない？ – Rriver

2016/11/17 466 users ワークフロー レスポンシブ レスポンシブWebデザイン 視点

先月末、 藤井さん の働く 株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「 レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけ... 続きを読む

面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方 – Rriver

2016/10/17 216 users pngquant 手動 レスポンシブイメージ ウェブサイト

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、 イメージオプティム とか Mac Automatorとpngquant などのツールを駆使して一生懸命に画像自体を最適化したり レスポンシブイメージ を使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。... 続きを読む

El Capitanで使えなくなったTotal FinderやXtra Finderの代わりはPATH FINDER 7に決まり！ – Rriver

2015/11/09 26 users El Capitan

El Capitanで使えなくなったTotal FinderやXtra Finderの代わりはPATH FINDER 7に決まり！ El CapitanでTotal FinderもXtra Finderも使えなくなってしまい、どうしたもんかと悩んでいたのですが、ようやく代わりになるものを見つけました。 El Capitanの人柱インストールの記事でも紹介した「Path Finder 7 」というア... 続きを読む

お盆だし「スマホ全盛時代のウェブのこれから」について考えてみた ー 能動的な検索が必要とされる限りウェブは死なない – Rriver

2015/08/15 56 users 鵜呑み ウェブ制作 将来 未来 海外

ここ最近、海外でも日本でも「ウェブの将来は明るくない」という話題をちらほら目にするので、1990年代後半からウェブ制作をずっとやっている自分としては「ウェブ制作という仕事に未来はないのかぁ。そうなのかぁ。。。」と、少し憂鬱な気持ちになっています。 別にそれらの話を鵜呑みにして同意しているわけではないんですけどね。 ということで、これを機に頭の中でモヤモヤしていることを、一度整理して書き留めておこう... 続きを読む

アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について – Rriver

2015/07/20 26 users ディスレクシア アクセシビリティ アイコンフォント 失読症

「Death to Icon Fonts（アイコンフォントに死を） 」というSeren D さんのスライドプレゼンテーションで、アイコンフォントではディスレクシア向けのフォントで問題が起こるし、他にも課題があるので使用は控えたほうが良いですよ、ということを訴えています。A List Apartブログ で紹介されていて気になったので、どんな問題が起こるのか確認してみました。 どんな問題が起こるのか ... 続きを読む

印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能 – Rriver

2015/05/23 125 users ウェブページ ユーザ 昨今 レイアウト エコ

印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能 いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリント... 続きを読む