ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。 主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。 ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。

先日、Twitterで「ウェブ制作者がメインで使っているブラウザ」についてアンケート をしたら、なんと！542名に回答いただきました。結果は以下の通りです。アンケートにご協力いただいた方々、本当にありがとうございました！！ Chromeが85%って！ Chromeが多いのは予想はしてましたけど、ここまで圧倒的だとは思いませんでした。StatCounterの日本のデスクトップでのChromeのシェア（58.46%）と比べても、圧倒的に多いいですね。 ユーザシェアがトップのブラウザだし、開発ツールや拡張機能も充実してるからですかね？ウェブ制作者の方々が使っているブラウザなので、もう少し多様性に富んでいてもいいと思ったんですが、そうでもなかったですね。 ちなみに、StatCounterの2018年11月の日本でのデスクトップのブラウザシェア は以下のような割合になってます。 モバイルも含むすべて

職場のウェブチームに新メンバーが加わって、黒い画面もGitも触ったことがないとのことで、どうやって教えようかなぁと迷っていました。そんな時、TwitterのTLに「わかばちゃんと学ぶGit使い方入門 」というマンガと実践で学ぶGitの入門書の情報が流れて来た ので即ポチってみました。 めちゃくちゃグッドタイミングw 確認のために一通り読んで実践してみたんですけど、すごくわかりやすかったです。自分もGitとGithubの使い方を覚えるのに苦労しているので、もっと早くこの本に出会いたかったです。そして、この本のおかげで僕もやっとプルリクのやり方を覚えられました。 この本のあとがきに執筆のきっかけは著者の方が「新入社員にGitを教える時に、『このWebマンガ読んだらわかるよ』ってなれたらいいな」と思ったことだと書いてあって、今回の僕の目的にもぴったりな内容でした。 本のポイントは以下の通り 「こ

オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi

昨今のウェブ制作でアイコンの実装には何が使われているんでしょうか？ アイコンフォントが主流なんでしょうか？それともSVGアイコン？ このブログではIcoMoon で作ったアイコンフォントを使っているのですがSVGアイコンに移行しようか迷っています。 アイコンフォントにはいくつか問題があるし、サポート対象ブラウザがIE 9+ / Android 3+で行けるならSVGのほうがアクセシブルだしSVGアイコンのほうがいいなんていうCSS-Tricksの記事 もありますし、watchOS 5ではWebフォントがサポートされないそうですし。Apple Watch対応いらなくね？という話は置いておいてw やっぱり時代はSVGアイコンですかね？笑 ただ、移行する前にもう一度アイコンフォントについて整理してから判断しようと思っています。アイコンフォントは便利なんで捨て難いんですよね。 ということで、アイコ

先日参加した「アクセシビリティの祭典 2018 」で取った手書きメモ、もといグラレコもどき（？）を晒します！あくまで自分の振り返り用で、公開するつもりはなかったのですが、ご要望をいただいたので晒しちゃいます。 特にiOSアプリ「Paper 」を使ったメモ取り（グラレコ）の参考になれば幸いです。 殴り書きで読みにくいと思いますし、内容が正確でない部分もあるかと思いますが、その辺はご容赦ください。正確な内容は当日のスライドやビデオ などでご確認ください。当日の感想や考えたことはこちらにまとめてあります。 グラレコをするメリット いつもは「Workflowy 」というメモアプリを使ってテキストのみでブレットポイントでメモを取るのですが、今回、はじめて「Paper」を使ってiPadとApple Pencilで手書きでメモを取ってみました。新しい体験でなかなか面白かったです。 はじめて手書きメモ・グ

Global Accessibility Awareness Day（GAAD） にあわせて2018年5月17日に神戸で開催された「アクセシビリティの祭典 2018 」に参加してきました。9:30から19:00ころまで、まる一日、アクセシビリティについて考えてきました。 開催に関わる方々の熱意がひしひしと伝わってくるとても良いイベントで、東京から足を伸ばして参加して本当に良かったです。アクセシビリティを身近に感じさせてくれる工夫というか雰囲気づくりが上手で、僕も知的刺激をたくさんもらって心と頭をお腹いっぱいにして帰ってきましたw ちなみに、「アクセシビリティおじさん」 こと木達さんが、当日のつぶやきのまとめ や登壇者のスライドや参加者のブログ記事へのリンクをまとめ てくれています。そちらも参照されると当日の内容や雰囲気を読み取れると思います。 ということで、合計9つ（！）のセッション、6つ

メディアクエリを書くときの単位って、何を使ってますか？ 僕はいまのところpxしか使ってないんですが、先日、「PX, EM or REM Media Queries? 」という記事を読んで、メディアクエリで使うemやrem単位について、逆に混乱してしまったので、自分でも仕様やブラウザの挙動を確かめてみました。 結論から言うと、emもremもSafariで挙動の違いがあるので、pxがクロスブラウザで一番安定した挙動をします。 いったいどういうことになっているのか？ 僕自身、めちゃくちゃ混乱してしまったので整理してまとめておきます。皆さんをさらなる混乱に陥れないことを願いつつ。。。 メディアクエリでemを使う際のブラウザの挙動 メディアクエリでem単位を使うと、そのサイズはブラウザのフォントサイズ設定に相対的になると仕様に書いてあります。なので、ブラウザでフォントサイズの初期値が16pxの場合、

CSS Gridのデバグに便利なFirefoxのCSS Gridインスペクターをご紹介します。Firefox 56から搭載 されているこのインスペクターを使うと以下のグリッド関連の情報が表示できます。CSS GridするならFirefoxがいいですね。 グリッドをオーバーレイ表示 線番号を表示 領域名を表示 グリッド線を無限に延伸 各グリッドの詳細を表示 開発ツールを表示する まずはメニューの「ツール > ウェブ開発 > 開発ツールを表示」から開発ツールを表示します。 グリッドをオーバーレイ表示 グリッドの親要素を選択すると、「ルール」タブのCSSのところに小さくグリッド・アイコンが表示されます。このアイコンをクリックするとグリッドのオーバーレイが表示されます。 FirefoxのCSS Gridインスペクターの機能はこれだけだと思っていたんですが、他にもありました！ 「レイアウト」タブ 開

レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で

CSS GridやFlexboxを使うと簡単に視覚的なコンテンツの順番を変えられるけど、アクセシビリティについては注意が必要ですよということを「CSS Gridとアクセシビリティについて気になっていたこと」で書きました。 ざっくり言うと以下の3つに気をつける必要があるんですが、そもそも「論理的なコンテンツの順番」てなに？どうやって決めたらいいの？という疑問は未解決のままでした。 HTMLソースでは論理的なコンテンツの順番を保つ CSS GridやFlexboxを使った順番の変更は視覚的な順番のみが変わる スクリーンリーダーやタブ操作にはHTMLソースの順番が使われる ということで、今回はこの「論理的なコンテンツの順番」についてとCSS GridやFlexboxでのコンテンツの順番の変更につい書いてみます。実は、まだモヤモヤが残ったままなんですが、どこでハマっているか整理しておけば次につなが

前回の記事でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。 「でも、それってアクセシビリティ的にはどうなんだろう？」というのが気になっていました。 マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの「魔法の杖」的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。 調べてみたところ、CSS Gri

CSS Gridってなんかとっつきにくくないですか？ 一通り学んで理解すると「あ、なるほど。これは超便利！」ってなるんですけど、今までのCSSとは違った考え方というか書き方だからですかね？ でも、そんなとっつきにくさを解消してくれるのがビデオ とかスクリーンキャストです。ブログ記事 とか書籍 でも素晴らしいリソース がたくさんあるんですけど、文章だけで学ぶ よりもビデオ やスクリーンキャストの方が「はじめの一歩」としてはわかりやすいですね。 英語ですけど「これはわかりやすい！」というのに出会ったのでご紹介します。スクリーンキャストなので英語が苦手でも大丈夫だと思います。英語の勉強もかねてぜひ！ Learn CSS Grid for free Scrimba というインタラクティブなスクリーンキャストのプラットフォーム上で作られた無料のCSS Grid入門講座 です。登録は必要ですけど、無料

最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrap や Foundtion のようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは： 基本的にレイアウトはCSS Grid（必要に応じてflexbox）でやるようになる コンポーネントはいままでのフレームワークと基本的には同じだけど、CSS Gridに入れ込みやすい設計に変わる もう少し詳しく書くと： Bootstrapなどで採用されているグリッド・システムが必要なくなる 少なくともrowとcol-4、col-md-6のような書き方はなくなる 独自のグリッド・システムで作っていたレイアウトはCSS Gridでやるようになる つまり、HTMLにクラスを記述してHTMLでレイアウトを組むのではなくCSSでレイアウトするようになる（あ

最近ターミナルでの作業が増えてきて「あれってどうやるんだっけ？」とか「これができたら便利なのに」と思うことが増えてきたので、基礎からコマンドラインの使い方を覚え直しています。使ってないとまたすぐに忘れてしまうので覚え書きです。 とりあえず「これくらい知ってれば便利に使えるはず」というのをざっくりまとめてみました。 ちなみに「6日間で楽しく学ぶLinuxコマンドライン入門 」という本をベースに学び直しています。以下にまとめたコマンドだけでなく、viの使い方からシェルスクリプトの書き方、さらにはシステム管理などについて、すごく丁寧に解説されていてオススメです。 目次 頻繁に使うコマンド一覧 たまに使いそうなコマンド一覧 覚えておくと便利な記号 覚えておくと便利なキー操作 Linux系システムのディレクトリ構造 確認に使った実行環境 頻繁に使うコマンド一覧 コマンド 説明 オプション

先日、久々に凝ったレイアウトのレスポンシブ・ウェブサイトのCSSをがっつり書いていて、やっぱりメディアクエリはモジュール（ページ要素）ごとにまとめて書いた方が良いというのを実感しました。ブレイクポイントでまとめて書くとブラウザで確認しながら細かいレイアウトの調整をするのが大変なんですね。 レイアウトの調整が細かければ細かいほど、メディアクエリはモジュールごとにまとめて書くのが良いです。途中で書き直すのは結構大変なので、これからレスポンシブなサイトのコーディングを始める方で迷っている方、お気をつけください。 以上、Rriverからのお知らせでした。笑 手短に言ってしまうと、伝えたいことは以上なんですけど、もう少し説明してみます。 メディアクエリをモジュールごとにまとめた方が良い理由 なぜメディアクエリはモジュールごとにまとめて書いた方が良いのか？ それは、以下の3つが理由です： 丁寧なレスポ

先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます

Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf