サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
parashuto.com
突然ですが、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のビデオ などで確認してから作業するのをお勧めします。 以下、かなりざっくりですが交換した際の写真を載せておきます。素人でもできたぞ!という証拠…というか…笑 こんな感じの箱に入って送られてきます キットには交換用バッテリーと必要なツールと交換手順の説明
ウェブデザインにおける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のバージョンごとのマーケットシェアへのリンクもはっておきました。 目次 以下はペ
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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
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に移行するときにやったことをメモっておきます。比較的スム
先日紹介した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にしなくてもシミュレーション機能が使える場合があ
Affinity Designerのスナップとガイドが便利なのってご存知でしたか? 細かく設定ができて操作感も良くて、実はすごく優秀なんです。僕がAffinity Designerを好んで使う最大の理由の一つといってもいいかもしれません。地味過ぎて知らない方も多いかもしれませんが。。。ぜひ、知っていただきたいw ということで、今回はAffinity Designerのスナップとガイドについてご紹介します。 Affinity Designerのスナップの基本 まずは、Affinity Designerのスナップ機能の基本的な使い方から見ていきましょう。 スナップは磁石アイコン、または;キーでオン・オフにできます。 スナップがオンの状態で、オブジェクトの枠(境界線)やキーポイント、中間点にスナップさせたり、アートボードやキャンバスの中間点や境界線にスナップさせられます。もちろん、グリッドやガイ
Git 2.26.0以下に脆弱性が見つかった とのことで、Homebrewでインストールしたgitを更新しようと思ったら、自分がHomebrewのコマンドを理解していないことに気づきました。 ということで、この際、覚書的にメモっておきます。以下、よく使いそうなコマンドの一覧です。 Homebrewの更新 インストールしたフォーミュラ(パッケージ)が更新されるわけではないの要注意です。僕はココを勘違いしてました。 brew update インストールしたフォーミュラの更新 brew upgrade フォーミュラ名のように特定のフォーミュラを指定して個別に更新も可能。何も指定されていない場合は、インストールされているすべてのフォーミュラが更新される。更新後にbrew cleanupも実行されて30日以上古いフォーミュラは削除されます(参考 )。 brew upgrade 更新可能なフォーミュラ
flexbox関連のバグをメモ的に書き溜めています。今回はIE11のバグで、flexを指定した要素にmin-heightを指定すると無視されるバグについてです。 バグの詳細 IE11ではdisplay: flex;を指定した要素にmin-heightを指定しても無視されます。IE11ではflexが指定されたflexコンテナの高さは認識されるがflexアイテムの高さは認識されないそうです(Flexbugs参照 )。そのため、align-items: center;で中の要素を上下中央に配置できません。 僕の場合、以下のようなレイアウトの実装の際にこのバグにはまりました。 幅が可変でテキストの長さが異なるレイアウトで、テキストが1〜3行の場合はmin-heightで高さを統一して上下中央寄せにして、4行以上になる場合はテキストの高さに合わせて箱の高さが可変するレイアウトです。 IE11だと以下
前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対
先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます(IE10も同様)。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです(すみません、テストしてません)。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
かなり昔のApple Wireless Keyboardを使っているんですが、先日、MacBook Proに接続できなくなって困ってしまいました。型番(Model No.)がA1314の単三電池2本で動くモデルで、デザインが結構気に入っているんですよね。 何度やってもつながらないので寿命かと思って諦めるところだったんですが、幸い対処法がありました。以下、旧型(Model No.: A1314)のApple製ワイヤレスキーボードの接続をリセットする方法です。 Apple製ワイヤレスキーボードの接続をリセットする方法 以下の手順で接続をリセットできます。 キーボードの電源を切る Bluetooth環境設定を開く デバイス一覧にキーボードがある場合は削除する キーボードの電源ボタンを押しっぱなしにする Bluetooth環境設定のデバイス一覧にキーボードが表示されるので「接続」をクリックする 数
ウェブサイトのフルページのスクリーンショットを撮るとき、普段はFirefox Screenshotsを使っています。でも、これだと高解像度のスクリーンショットが撮れないんですね。 最近はDPR(デバイスピクセル比)が2倍、3倍といった高解像度のスクリーンも多いので、そういったスクリーンでもくっきり表示できるように、高解像度のスクリーンショットが必要な時ってあるんですよね。印刷物にスクリーンショットを使いたい時にも必要です。 ということで、探してみたら、なんとFirefoxにそんな機能がありました! Firefox、いいですよ。おすすめですw Firefoxで解像度を指定してフルページのスクリーンショットを撮る方法 Firefoxのウェブコンソールを開く。Macでは⌘ + Option + K(WinではCtrl + Shift + K / メニューのツール → 開発ツールからもアクセスでき
12月9日(月)に開催されたAffinity User Gruop JAPANミーティング #3 で「ウェブ制作に役立つAffinity Designerの使い方と注意点」という内容でお話しをしてきました。当日お話しした内容に少し情報を追加してこのブログでもご紹介します。 目次 以下はページ内のセクションへのリンクです。 動画版もあります はじめに アジェンダ Affinityツールを好きな理由 フル機能iPad版もある、プロ向け本格ツール Affinity Designerが一番好き! Affinityツールに向いているプロジェクト こんなふうに使ってます Affinityスイートの抜群の互換性 ウェブ制作に役立つ便利な使い方 複数解像度の画像書き出し機能 違う種類の画像の書き出し 書き出すスライスの追加方法 アセットとシンボル機能 レスポンシブ・デザインに便利な「制約」機能 アートボー
今年はWebアクセシビリティ Advent Calendar 2019 )に参加させてもらいました。18日目の記事です(すみません、19日になってしまいました。。。)。 以前、このブログで「Contrast」という色のアクセシビリティをチェックするツールを紹介したことがあるんですが、その後に試した2つの有料アプリをご紹介します。Contrastは色のアクセシビリティのチェックに特化したツールですが、今回紹介する2つのアプリはコントラストチェッカー機能が付いたカラーピッカーです。 Macのみです。Winユーザーの方々、ご容赦を。。。 まずは1つ目。 Sip Sip はコントラストチェッカー機能が付いた多機能カラーピッカーです。$10で1年間分の更新がついているライセンスが購入できます。ライセンスが切れたら半額で更新、または、その時点のバージョンを継続して使えます。 Sipのコントラストチェッ
次のページ
このページを最初にブックマークしてみませんか?
『Rriver - 明日のウェブ制作に役立つアイディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く