ローカル開発環境にSSLを設定できるmkcertがめちゃくちゃ便利だった
以前、MAMPでSSLを設定した際には手間のかかるプロセスを経てサーバー証明書と鍵を作成したんですが、mkcertというローカル環境に認証局（CA）をインストールするコマンドラインツールを使うと一瞬で作成できました。 鍵をしっかり管理しないとセキュリティリスクになるので注意が必要ですが、ローカル開発環境でSSLを手軽に設定できるめちゃくちゃありがたいツールです。 以下、mkcertでサーバー証明書と鍵を作って、MAMP 6.3のApache 2.4に設定するところまでをご紹介します。 Macのバージョンなど 以下の環境で設定、動作確認を行いました。 macOS Big Sur 11.2.2（Mac mini, M1 2020） MAMP 6.3 mkcert 1.4.3（Homebrew 3.0.4でインストール） 証明書と鍵の作成の設定 1. mkcertのインストール Homebrew
各OSの標準搭載フォント一覧へのリンク集
最近あらためてウェブサイトの本文の文字の読みやすさの大切さを実感していてfont-familyの指定を見直しています。そこで、まずは基本に戻って各OSに標準で搭載されているフォントの一覧を探してみたんですが、けっこう情報を見つけるのに苦労しました。 ということで、今後のためにWondows、Mac、iOSの標準搭載フォント一覧へのリンク集を作ってみました。Androidは一覧が見つけられず、基本情報だけ載せておきました。 おすすめのfont-familyの指定は、ありがたいこんな記事 やあんな記事 やそんな記事 で詳しく説明されてるんですが、自分でも特定のプロジェクトにあったfont-family指定ができるように、各OSの標準搭載フォント一覧にはさくっとアクセスできるようにしておきたいです。 ついでに、各OSのバージョンごとのマーケットシェアへのリンクもはっておきました。 目次 以下はペ
Gitのデフォルト・ブランチ名を変更する方法
masterやslaveといった用語が奴隷制度を連想させる ということで、自分の開発環境でも極力それらの用語は避けたいと思っています。1人でも不快な気持ちにさせる可能性があるなら使いたくないというか。それらの用語をあえて使い続ける理由もないというか。 ということで、今後、自分の開発環境ではGitのデフォルト・ブランチ名をmasterからmainにしようと思います。 Gitのデフォルト・ブランチ名を設定する Gitのバージョン 2.28 からconfigでgit initで作成するリポジトリのデフォルト・ブランチ名を設定できるようになっています。 たとえば、以下のコマンドでデフォルト・ブランチ名をmainに設定できます。 git config --global init.defaultBranch main これでgit initコマンドでリポジトリを作成する際に作られるブランチ名がmain
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
【2020年夏】imgタグにはwidthと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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
ウェブ制作に役立つAffinity Designerの使い方と注意点
12月9日（月）に開催されたAffinity User Gruop JAPANミーティング #3 で「ウェブ制作に役立つAffinity Designerの使い方と注意点」という内容でお話しをしてきました。当日お話しした内容に少し情報を追加してこのブログでもご紹介します。 目次 以下はページ内のセクションへのリンクです。 動画版もあります はじめに アジェンダ Affinityツールを好きな理由 フル機能iPad版もある、プロ向け本格ツール Affinity Designerが一番好き！ Affinityツールに向いているプロジェクト こんなふうに使ってます Affinityスイートの抜群の互換性 ウェブ制作に役立つ便利な使い方 複数解像度の画像書き出し機能 違う種類の画像の書き出し 書き出すスライスの追加方法 アセットとシンボル機能 レスポンシブ・デザインに便利な「制約」機能 アートボー
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
SVG背景画像でwidthとheight属性が100%だとIE11で中央寄せになってしまうバグ
先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。 svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（アスペクト比が同じ場合、バグに気づきません）。 ※SVG伝道師の松田さんが「一概にバグではないと思う」とツィート されていたので参考までに仕様へのリンクを記事の最後に追記しておきました。 バグが発生する条件とデモ 実際の表示はデモページでご覧ください。IE11で見ると一番最初の三日月だけ、中央寄せになってしまっています。 デモはこちら このバグはSVGとCSSで以下のサンプルコードのような指定をすると発生します。 SVG 下の画像のようにサイズが132 x 160p
アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える
前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベースにしつつ、列をスパンさせる場合のcolgroupと、行をスパンさせる場合のrowgroup + tbodyを使ったコーディングのやり方を整理してみました。 それ、本当に役に立つの？ はじめにネタばらし的に書いてしまうと、実は今回紹介するデータ・テーブルの例では、colgroupやrowgroupを使っても使わなくてもVoiceOverでの読み上げに違いがありませんでした。ググると出てくるidとheaders属性を使うやり方も試してみましたが、こちらも読み上げに変わりはありませんでした（idとhea
アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）
先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。 主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。 ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。
WordPress 4.9.9でSVGがアップロードできない！原因と応急処置 | Rriver
このWordPressブログでSVG画像をアップロードしようと思ったら「セキュリティの理由によりこのファイル形式は許可されていません」とエラーが出てくるようになってしまいました。このブログでは「SVG Support 」というプラグインを入れて対応していたんですが、どうやらWordPress 4.9.9でプラグインが機能しなくなってしまったようです。 参考までに以前書いたSVGについての記事へのリンクです： WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 当面の対処法 当面は以下の2つの方法のどちらかで対処ができそうです。 1. プラグインを入れ替える 取り急ぎ、このブログでは「Safe SVG 」というプラグインに入れ替えて対処しました。こちらのプラグインは4.9.9でテストされていて、5.0.1にアップデートしたこのブロ
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
アクセシビリティについて考える一日「アクセシビリティの祭典 2018」に参加してきた
Global Accessibility Awareness Day（GAAD） にあわせて2018年5月17日に神戸で開催された「アクセシビリティの祭典 2018 」に参加してきました。9:30から19:00ころまで、まる一日、アクセシビリティについて考えてきました。 開催に関わる方々の熱意がひしひしと伝わってくるとても良いイベントで、東京から足を伸ばして参加して本当に良かったです。アクセシビリティを身近に感じさせてくれる工夫というか雰囲気づくりが上手で、僕も知的刺激をたくさんもらって心と頭をお腹いっぱいにして帰ってきましたw ちなみに、「アクセシビリティおじさん」 こと木達さんが、当日のつぶやきのまとめ や登壇者のスライドや参加者のブログ記事へのリンクをまとめ てくれています。そちらも参照されると当日の内容や雰囲気を読み取れると思います。 ということで、合計9つ（！）のセッション、6つ
position: stickyの面白い使い方と使用時の注意点
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い
CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ
FirefoxのCSS Gridインスペクターが便利！
CSS Gridのデバグに便利なFirefoxのCSS Gridインスペクターをご紹介します。Firefox 56から搭載 されているこのインスペクターを使うと以下のグリッド関連の情報が表示できます。CSS GridするならFirefoxがいいですね。 グリッドをオーバーレイ表示 線番号を表示 領域名を表示 グリッド線を無限に延伸 各グリッドの詳細を表示 開発ツールを表示する まずはメニューの「ツール > ウェブ開発 > 開発ツールを表示」から開発ツールを表示します。 グリッドをオーバーレイ表示 グリッドの親要素を選択すると、「ルール」タブのCSSのところに小さくグリッド・アイコンが表示されます。このアイコンをクリックするとグリッドのオーバーレイが表示されます。 FirefoxのCSS Gridインスペクターの機能はこれだけだと思っていたんですが、他にもありました！ 「レイアウト」タブ 開
スクリーンリーダーのマーケットシェア 2017
スクリーンリーダーのマーケットシェアが気になってデータを探してみたら、2017年10月に行われた利用状況の調査結果が2017年末に公開されてました。WebAIM（Web Accessibility In Mind） というユタ州立大にある非営利団体が2009年から行なっている調査で、スクリーンリーダー利用者にアンケートを行った結果 がまとめられています。欧米を中心としたグローバルな調査結果（アメリカ60%、ヨーロッパ23%）です。 この調査結果にはない日本での状況についても少しだけ言及しつつ、一番気になったデータを抜粋してまとめてみます。 アンケートに回答した1,792名のうち9割近い方がなんらかの障害を理由にスクリーンリーダーを使っていると回答しています。また、障害のうち盲目（blindness）が75.8%、低視力・視覚障害（low vision/visually impaired）が
CSS Gridとアクセシビリティについて気になっていたこと
前回の記事でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。 「でも、それってアクセシビリティ的にはどうなんだろう？」というのが気になっていました。 マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの「魔法の杖」的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。 調べてみたところ、CSS Gri
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でレイアウトするようになる（あ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
