はてなブックマーク

突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました？ <picture> <source srcset="img/img-800x480px.jpg" media="(min-width: 820px)" width="800" height="480"> <img src="img/img-480x480px.jpg" width="480" height="480" alt="画像の説明"> </picture> 実は1年以上前に公開されたChrome 90からサポートされていたそうで（僕はつい先日知りました）、上のコードのようにimgとsourceの両方にwidthとheightを記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前か

WordPressのローカル環境構築ツール「Local 」のSSL設定がmacOSでうまくいかない場合の対処法を見つけたのでメモっておきます。 LocalのウェブサイトにSSL設定についての特設ページ（英語） があって、macOS Big Sur以降での設定方法が書かれているんですが、この設定をしてもFirefoxでは「潜在的なセキュリティリスクあり」という警告が出てしまいます。 以下は、この警告を回避するための設定方法です。 以前このブログで紹介したmkcertというコマンドラインツールを使って証明書と鍵を発行して、それらをLocalで使う方法です。 環境 以下の環境で設定と動作確認をしました。違うバージョンでは設定やフォルダの場所などが異なる場合があるのでご注意ください。 macOS Monterey 12.2.1 (Mac mini, M1 2020) Local 6.3.0+575

テスト機として使っているiPhone Xのバッテリーがすぐに赤表示になるようになったので、自分でバッテリーを交換してみました。僕のiPhone Xは保証対象外なのでApple Storeでは8,140円で交換してくれる ので高くはないんですが。一度、自分でiPhoneを分解してみたいなぁと思っていたので、Amazon.co.jpで探した3,380円の交換キット でやってみました。 バッテリー固定用の両面テープをはがすのに苦労しましたが、キットに含まれるツールと説明書がしっかりしていて比較的スムーズに交換できました。大まかな流れをiFixitのビデオ などで確認してから作業するのをお勧めします。 以下、かなりざっくりですが交換した際の写真を載せておきます。素人でもできたぞ！という証拠…というか…笑 こんな感じの箱に入って送られてきます キットには交換用バッテリーと必要なツールと交換手順の説明

Safari 11でlinear-gradientが表示されない問題に出くわしたのでメモっておきます。ググっても情報が出てこなかったので、同じ問題に出くわした方のお役に立てば幸いです。 Safari 11ではDouble-position Color Stopsがサポートされていない linear-gradientには一つの色に複数の色経由点を指定する「Double-position color stops」という書き方 があります。以下の例ではwhiteを指定した部分に複数の色経由点（33%と66%）を指定しています。 .gradient-multi-position { background: linear-gradient(to right, #002395 33%, white 33% 66%, #ed2939 66%); } ところが、SafariではDouble-positio

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

以前、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

最近あらためてウェブサイトの本文の文字の読みやすさの大切さを実感していてfont-familyの指定を見直しています。そこで、まずは基本に戻って各OSに標準で搭載されているフォントの一覧を探してみたんですが、けっこう情報を見つけるのに苦労しました。 ということで、今後のためにWondows、Mac、iOSの標準搭載フォント一覧へのリンク集を作ってみました。Androidは一覧が見つけられず、基本情報だけ載せておきました。 おすすめのfont-familyの指定は、ありがたいこんな記事 やあんな記事 やそんな記事 で詳しく説明されてるんですが、自分でも特定のプロジェクトにあったfont-family指定ができるように、各OSの標準搭載フォント一覧にはさくっとアクセスできるようにしておきたいです。 ついでに、各OSのバージョンごとのマーケットシェアへのリンクもはっておきました。 目次 以下はペ

Visual Studio Codeの公式の設定同期機能を使う際に、特定の設定だけ同期しないようにする方法です。僕の場合、2つの端末でターミナルのディレクトリが違っているので、その設定を非同期に設定しました。 検索してもなかなか良い情報が出て来なかったので書き留めておきます。同じようなことで困っている方のお役に立てば幸いです。では、行ってみましょう！ 目次 以下はページ内のセクションへのリンクです。 設定をした端末とVSCodeのバージョン 設定同期機能の基本設定 非同期の設定 さいごにひとこと 設定をした端末とVSCodeのバージョン 今回、VSCodeの公式の設定同期機能を試したのは、以下の2台です。GitHubを使って同期の設定をしました。いまのところ、問題なく同期設定が動いています。 MacBook ProのVisual Studio Code（1.52.1） M1 Mac min

masterやslaveといった用語が奴隷制度を連想させる ということで、自分の開発環境でも極力それらの用語は避けたいと思っています。1人でも不快な気持ちにさせる可能性があるなら使いたくないというか。それらの用語をあえて使い続ける理由もないというか。 ということで、今後、自分の開発環境ではGitのデフォルト・ブランチ名をmasterからmainにしようと思います。 Gitのデフォルト・ブランチ名を設定する Gitのバージョン 2.28 からconfigでgit initで作成するリポジトリのデフォルト・ブランチ名を設定できるようになっています。 たとえば、以下のコマンドでデフォルト・ブランチ名をmainに設定できます。 git config --global init.defaultBranch main これでgit initコマンドでリポジトリを作成する際に作られるブランチ名がmain

短い答え ::beforeはCSS3の構文 :beforeはCSS2の構文 ということで、CSS3の::beforeを使う。 ていうか、そっちが推奨されてます。 以上です😎 ほんとにダブルコロンのほうでいいの？ その昔、CSS2しかサポートしない古いブラウザ（IE8以下）対応のためにシングルコロンの:beforeを使うこともあったようですが、2020年8月現在でIE8のサポートが必要なことって、もうないですよね？あるのかな？ないですよね？ シングルコロンの:beforeは最新のブラウザでもサポートされていて使えますが、特異な理由でIE8をサポートするなどでないかぎり、ダブルコロンで記述するのが良さそうです。 そもそも、2つのコロンで記述する擬似要素と1つのコロンで記述する擬似クラスを区別するために、CSS3で::beforeが導入されたそうです（MDNの記事中のメモ を参照）。 ダブルコ

Gitで過去のコミットでなにをしたかキーワードで検索して確認したいときってありませんか？ Gitにはログの検索機能がついていて、簡単に検索ができます。Gitってほんとに便利ですね〜。 Gitログを検索する方法 コミットメッセージとコミットの内容の両方を検索 git log -S "キーワード" 上のコマンドではコミットID（長いハッシュ）、Author、日時、コミットメッセージの一覧が表示されます。 検索結果が長くて探しにくい場合は--onelineオプションをつけると各コミットを1行で表示してくれます。この場合、コミットID（短いハッシュ）とコミットメッセージだけが表示されます。 git log -S "キーワード" --oneline コミットメッセージのみ検索 コミットメッセージだけ検索したい場合は以下のコマンドを使います。 git log --grep="キーワード" こちらも結果

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のほうが小さくなる画像もありました。たまたまだと思い

最近、デモページ作成用のクラスレスCSSフレームワーク を作っていて、HTML要素をもう一度学び直しています。リファレンスには主にMDN Web Docs を見ているんですが、先日、仕様を探していて「HTMLの仕様ってどこで見ればいいんだっけ？」と迷ってしまいました。 「W3CとWHATWGの2つの仕様があって、ややこしいことになっていたよな…」というおぼろげな記憶は残っていたんですが、2019年5月のW3CとWHATWGの合意 でHTMLの仕様はHTML Living Standard に一本化されてたんですね。めでたい🎉 ということで、HTMLの正式な最新仕様の確認はHTML Living Standard を見にいけばいいんですね。HTMLの仕様の確認ってあまりしないので忘れてました😅 CSSの仕様は結構確認することあるんですけどね。 W3CのHTML5のページ（https://

Gitで編集したファイルの1部分だけを個別にコミットする方法があるの知ってました？ 僕は最近知ったんですが、ファイルをステージする際にパッチ（–patch）というオプションがあって、かなり柔軟な操作が可能です。この機能を使うと、たとえばA、B、Cという3つの変更箇所があったとして、まずはAとCをステージしてコミットして、その後、Bをコミットするといったことができちゃいます。便利ですね🤩 ということで、忘れないうちにやり方をメモっておきます。 Gitのステージのパッチオプションの使い方 git addでファイルをステージするときに、-pまたは--patchオプションを使います。 git add -p <ファイル名> このコマンドを打つと、指定したファイルに加えられた変更が順に表示されて、表示された変更部分（hunkと呼ぶ）をステージするかを聞かれます。 (1/3) Stage this h

そうなんです。 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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

Parallels Desktop for Mac 15で走らせているWindows 10の言語入力（日本語入力）切り替えのキーボードショートカットの設定をメモっておきます。Macと同じキー操作で言語入力を切り替えられるように設定できます。 VirtualBoxの時は英数キーのみで切り替えていたので使い勝手があまりよくありませんでした。VirtualBoxから移行してよかったw 設定の手順 Windows 10 Home（10.0.18363）での設定の手順は以下の通りです。 タスク バーのMicrosoft IMEのアイコン「A」を右クリックしてメニューから「プロパティ」を選択します。 Microsoft IMEの設定画面で「詳細設定」をクリックします。 Microsoft IMEの詳細設定画面で編集操作セクションにあるキー操作のところにある「変更」ボタンをクリックします。 キー設定の中

VirtualBoxからParallels Desktop for Mac 15に移行したらWindows 10がサクサク動いてびっくり いままでVirtualBox上のWindows 10でEdgeやIE11のブラウザテストをしてたんですが、Parallels Desktop for Mac 15に移行してみたら動作がサクサクでびっくりしました。こんなに違うんだったらもっとはやく買えばよかったと後悔していますw VirtualBoxだとWin10を立ち上げるだけでMacBook Proのファンがぶんぶんなってたのに、Parallels Desktopだと静かで優しい心持ちでIE11でブラウザテストができそうです。 ということで、今回はVirtualBoxのWindows 10をParallels Desktop for Mac 15に移行するときにやったことをメモっておきます。比較的スム

GAAD Japan 2020 の「『わかりやすく伝える』ための書体選び」というセッションの最後のほうで紹介されていた「欧文書体—その背景と使い方 」という本がとても良くておすすめな内容でした。ひさびさに蔵書にしたいと思う良い本に出会えて嬉しかったので紹介させてください。 欧文書体の基礎知識が経験豊富なタイプデザイナー / タイプディレクターの視点から詳しく解説されていて、とても楽しく読める本です。この本を読んであらためて欧文書体に興味を持ちました。 たとえば、「O」の文字は縦線より横線のほうが細いとか「M」の縦線は左のほうが細いとか、イタリックはもともとはイタリアで使われていた筆記体のことであるとか、ただそれだけを読んていても楽しい内容ですが「なぜそうなのか」が頭にスっと入ってくる文章と図で解説されています。さらに、ちょっとした歴史的な小ネタも散りばめられていて、結構マニアックな内容もあ

先日紹介したflexbox関連のバグを検証していたときに遭遇したバグがあったのでメモっておきます。今回は入れ子にしたflexboxに関するバグです。 バグの詳細 IE11では、flexboxを入れ子にすると、入れ子にしたflexboxのflexアイテム内のコンテンツがコンテナより大きい場合、はみ出して表示されてしまいます。たとえば、下のIE11での表示のキャプチャ画像のように長いテキストが折り返さなくなってしまいます。 本来は下のFirefoxでの表示をキャプチャした画像のように、display: flex;によってカラム表示になってテキストが折り返して表示されます。 デモはこちら このバグが発生するソースコードは以下のようになります。 HTML <div class="flex-outer"> <div class="flex-outer__item"> <div class="flex

先日コーディングをしていて、またIE11のflexbox関連のバグに遭遇したのでメモっておきます。今回は、flex-direction: column;とalign-items: center;を指定すると発生するバグです。 バグの詳細 IE11では、flexboxにflex-direction: column;とalign-items: center;を指定すると、flexアイテムのコンテンツがコンテナより大きい場合にはみ出してしまいます。たとえば、長い文章が入っていると、以下のように横にはみ出てしまいます。 IE11での表示 本来、グレーのボックス内（flexアイテム内）におさまってほしいテキストがはみ出してしまいます。 Firefoxでの表示 Firefox（Mac 77.0.1）では、意図したとおりグレーのボックス内にテキストがおさまります。 デモはこちら このバグが発生するソース

Windows 10 Homeで新旧Microsoft Edgeの両方を使う方法をみつけました！ 検索してもWindows 10 Proでのやり方 しか出てこなくて困ったんですが、ようやくみつけました。Windows 10 20H2アップデート後の対処法も追加しておいたので参考になれば幸いです！ ということで、この記事ではWindows 10 Homeでの設定手順をご紹介します。 Edgeレガシは2021年3月9日で公式のサポートが終了し4月13日にリリースされるアップデートでOSから削除されると発表 されました。それ以降はEdgeレガシでのテストが必要なことはほぼないと言って良いでしょう（いまもないと思いますが）。 念のため残しておきたいEdgeレガシ Windows Updateで新Edgeに自動アップデート されますがロールアウトには数カ月かかるはずなので、アップデートが終わるまでは

先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド

CSSでウェブサイトをダークモードできる@mediaのprefers-color-schemeを、Firefoxでテストする方法がありました。まだ、実験的な機能でUIが微妙ですしabout: configで設定をする必要がありますが、一応、シミュレーションできました。 ちなみに、以下のような記述でダークモードのスタイルを設定できるやつです。 @media (prefers-color-scheme: dark){ body { background: #333; color: #fff; } } 実装が途中の段階で変わってしまうかもしれませんが、現段階での設定方法は以下の通りです。 1. 「高度な設定」で機能を有効にする アドレスバーにabout:configと入力してcolor-schemeを検索します。devtools.inspector.color-scheme-simulation

さまざまな色覚タイプの見え方をシミュレートする機能がFirefoxに搭載されていたのご存知でしたか？僕は知らなかったんですが、実はこの機能、デフォルトでは有効になっていないので設定の方法をメモっておきます。メモっておかないと忘れそうなんでw 以下、Mac版Firefox 76.0.1で確認をしました。 1. シミュレーション機能を有効にする アドレスバーに「about:config」と入力して「gfx.webrender.all」を検索します。設定値が「false」になっているので切り替えのアイコンをクリックして「true」にします。 ちなみに、「NVIDIA製GPUを搭載する一部のWindows環境で、『WebRender（Quantum Render）』がデフォルトで有効化された 」とのことで、gfx.webrender.allをtrueにしなくてもシミュレーション機能が使える場合があ

Git 2.26.0以下に脆弱性が見つかった とのことで、Homebrewでインストールしたgitを更新しようと思ったら、自分がHomebrewのコマンドを理解していないことに気づきました。 ということで、この際、覚書的にメモっておきます。以下、よく使いそうなコマンドの一覧です。 Homebrewの更新 インストールしたフォーミュラ（パッケージ）が更新されるわけではないの要注意です。僕はココを勘違いしてました。 brew update インストールしたフォーミュラの更新 brew upgrade フォーミュラ名のように特定のフォーミュラを指定して個別に更新も可能。何も指定されていない場合は、インストールされているすべてのフォーミュラが更新される。更新後にbrew cleanupも実行されて30日以上古いフォーミュラは削除されます（参考 ）。 brew upgrade 更新可能なフォーミュラ