まるで黒のM2 MacBook Air! MacBookとiPadをdbrandの黒スキンでデコってみた
いままでApple製品は素のままで使うことが多かったんですが、MacBook Pro 16-inchにカナダのdbrandという会社 の真っ黒スキンをつけてみました。マットな感じでなかなかいい感じでしょ？笑 実はM2 MacBook Airの黒モデル が発表された時に、「めっちゃかっこいい！」と思って衝動的にAppleオンラインストアで予約までしてたんですが、待っている間に冷静になっちゃって、迷いに迷ってキャンセルして代わりにM1 Pro MacBook Pro 16-inch を買いました。 そんな経緯もあって、あの黒いM2 MacBook Airに憧れて、人生で初めてApple製品にスキンをつけてみました。 結果、手垢はあまり目立たないし、スクリーンはでっかいし、ポートはたくさんあるしで、自分にとっては良い選択だったんじゃないかと思っています。めっちゃデカくて持ち運びには向いてませんけ
picture要素で使うsourceタグにもwidthとheight属性を書くといいらしい
突然ですが、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を記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前か
Local（macOS）のSSLのFirefoxの警告を回避する方法
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のバッテリーがすぐに赤表示になるようになったので、自分でバッテリーを交換してみました。僕のiPhone Xは保証対象外なのでApple Storeでは8,140円で交換してくれる ので高くはないんですが。一度、自分でiPhoneを分解してみたいなぁと思っていたので、Amazon.co.jpで探した3,380円の交換キット でやってみました。 バッテリー固定用の両面テープをはがすのに苦労しましたが、キットに含まれるツールと説明書がしっかりしていて比較的スムーズに交換できました。大まかな流れをiFixitのビデオ などで確認してから作業するのをお勧めします。 以下、かなりざっくりですが交換した際の写真を載せておきます。素人でもできたぞ！という証拠…というか…笑 こんな感じの箱に入って送られてきます キットには交換用バッテリーと必要なツールと交換手順の説明
Safari 11でlinear-gradientが表示されない問題
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について
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
ローカル開発環境に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のバージョンごとのマーケットシェアへのリンクもはっておきました。 目次 以下はペ
VSCodeの複数端末の同期設定機能で特定の設定を除外する方法
Visual Studio Codeの公式の設定同期機能を使う際に、特定の設定だけ同期しないようにする方法です。僕の場合、2つの端末でターミナルのディレクトリが違っているので、その設定を非同期に設定しました。 検索してもなかなか良い情報が出て来なかったので書き留めておきます。同じようなことで困っている方のお役に立てば幸いです。では、行ってみましょう！ 目次 以下はページ内のセクションへのリンクです。 設定をした端末とVSCodeのバージョン 設定同期機能の基本設定 非同期の設定 さいごにひとこと 設定をした端末とVSCodeのバージョン 今回、VSCodeの公式の設定同期機能を試したのは、以下の2台です。GitHubを使って同期の設定をしました。いまのところ、問題なく同期設定が動いています。 MacBook ProのVisual Studio Code（1.52.1） M1 Mac min
MX Master 2Sの親指ジェスチャーボタンの故障を修理してみた
MX Masterシリーズのマウスは初代から愛用しているんですが、いま使っているMX Master 2S がついに故障してしまいました。親指のジェスチャーボタン（親指ボタン）が押されっぱなしになってマウスカーソルが動かなくなりました。 3年も使ってるので仕方ないと思いつつ、諦め切れずに分解して修理してみました。なんとか動くようになったので修理方法をメモしておきます。同じ症状で困っている方の参考になれば幸いです。 目次 以下はページ内のセクションへのリンクです。 まずはサポートに問い合わせ T型トルクスドライバーをゲットして分解 親指ボタンの中のパーツを外してみる ゴムの樹脂部分を紙やすりで削る さいごにひとこと 参考にさせてもらった記事 まずはサポートに問い合わせ 購入から3年が経っていて保証期間は過ぎていましたが、念のため交換や修理は可能かサポートに問い合わせてみました（サポートサイトで
Gitのデフォルト・ブランチ名を変更する方法
masterやslaveといった用語が奴隷制度を連想させる ということで、自分の開発環境でも極力それらの用語は避けたいと思っています。1人でも不快な気持ちにさせる可能性があるなら使いたくないというか。それらの用語をあえて使い続ける理由もないというか。 ということで、今後、自分の開発環境ではGitのデフォルト・ブランチ名をmasterからmainにしようと思います。 Gitのデフォルト・ブランチ名を設定する Gitのバージョン 2.28 からconfigでgit initで作成するリポジトリのデフォルト・ブランチ名を設定できるようになっています。 たとえば、以下のコマンドでデフォルト・ブランチ名をmainに設定できます。 git config --global init.defaultBranch main これでgit initコマンドでリポジトリを作成する際に作られるブランチ名がmain
::beforeと:beforeはどっちが正しい書き方なんだっけ？
短い答え ::beforeはCSS3の構文 :beforeはCSS2の構文 ということで、CSS3の::beforeを使う。 ていうか、そっちが推奨されてます。 以上です😎 ほんとにダブルコロンのほうでいいの？ その昔、CSS2しかサポートしない古いブラウザ（IE8以下）対応のためにシングルコロンの:beforeを使うこともあったようですが、2020年8月現在でIE8のサポートが必要なことって、もうないですよね？あるのかな？ないですよね？ シングルコロンの:beforeは最新のブラウザでもサポートされていて使えますが、特異な理由でIE8をサポートするなどでないかぎり、ダブルコロンで記述するのが良さそうです。 そもそも、2つのコロンで記述する擬似要素と1つのコロンで記述する擬似クラスを区別するために、CSS3で::beforeが導入されたそうです（MDNの記事中のメモ を参照）。 ダブルコ
Gitでコミットメッセージや変更内容を検索して確認する方法
Gitで過去のコミットでなにをしたかキーワードで検索して確認したいときってありませんか？ Gitにはログの検索機能がついていて、簡単に検索ができます。Gitってほんとに便利ですね〜。 Gitログを検索する方法 コミットメッセージとコミットの内容の両方を検索 git log -S "キーワード" 上のコマンドではコミットID（長いハッシュ）、Author、日時、コミットメッセージの一覧が表示されます。 検索結果が長くて探しにくい場合は--onelineオプションをつけると各コミットを1行で表示してくれます。この場合、コミットID（短いハッシュ）とコミットメッセージだけが表示されます。 git log -S "キーワード" --oneline コミットメッセージのみ検索 コミットメッセージだけ検索したい場合は以下のコマンドを使います。 git log --grep="キーワード" こちらも結果
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のほうが小さくなる画像もありました。たまたまだと思い
HTMLの最新仕様ってどこで確認すればいいんだっけ？
最近、デモページ作成用のクラスレス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部分だけをコミットする方法
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属性を書くのがいいらしい
そうなんです。 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上のWindows 10の言語入力切り替えのキーボード設定
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から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」の縦線は左のほうが細いとか、イタリックはもともとはイタリアで使われていた筆記体のことであるとか、ただそれだけを読んていても楽しい内容ですが「なぜそうなのか」が頭にスっと入ってくる文章と図で解説されています。さらに、ちょっとした歴史的な小ネタも散りばめられていて、結構マニアックな内容もあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
