ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
複数のウェブサービスを連携し、定型作業を自動化してくれるサービスはIFTTTやZapierが有名ですが、特定のサービス以外は使えなかったり、有料プランでしか使用できない機能があったりします。オープンソースで使える自動化サービス「n8n」は無料で利用でき、自社製ソフトのような他の自動化サービスでは未対応のサービスも自動化できるとのことなので、実際に使ってみました。 n8n.io - Workflow Automation https://n8n.io/ まずはn8nのホームページにアクセスします。 ホームページ下部へと進むとインストール方法が記載されていました。今回はWindows 10の機能の一つであるWSL上のUbuntuにn8nをインストールします。 n8nを動作させるにはNode.jsが必要なので、記事作成時点で最新の推奨バージョンのNode.jsをインストールしておきます。 Nod
非エンジニアがWeb開発で知ってると便利過ぎる無料サービスを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで役に立つ厳選した無料サービスをご紹介します！ 特にWeb開発に慣れていない初心者や非エンジニアの方でも、手軽に特定の機能を提供するページを構築できるサービスを厳選してみました。 また、複数人でのレビュー、サイトの分析、学習リソースなども合わせて掲載しているので、ご興味ある方はぜひ参考にしてください！ ■独自ロードマップを公開してユーザーと共有する！ 【 Roadmap Show 】 Webアプリやサービス自体のアップデートや予定している機能追加などの情報を、プロダクトロードマップとして手軽に一般公開できる便利なサービスです。 サービス側が何をやっていて、どのような改善をしているのかをユーザー側からも分かりやすくなります。 基本的な使い方も簡単で、いくつかのカテゴリ別にタスクカードを追加していくだけです。 これから予定して
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
Gmailは基本的に「1つのGoogleアカウントに1つのアドレスを持つ」サービスですが、実は1つのGoogleアカウントに複数のGmailアドレスを追加できることをご存じでしょうか。 「エイリアス」と呼ばれるこの機能。もう1つGmailアドレスがあったら便利だけど、Googleアカウントを複数管理するのは面倒という人にぴったりのものになっています。 1つのGoogleアカウントに新規のGmailアドレスを追加する方法 早速、Gmailの「エイリアス機能」の設定方法を紹介していきましょう。 PC版Gmailでエイリアス機能を設定する方法 PCブラウザ版のGmailでエイリアス機能を利用するために、まずは新規のメールアドレスを設定していきましょう。 Gmailにログインし、右上の設定マーク（歯車のアイコン）をクリック 「すべての設定を表示」をクリック 「アカウントとインポート」をクリックし、
フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
インストール済みのフォントを好きな文字で一覧表示できる、Windows, macOS, Linux対応の国産アプリを紹介します。 国産なので日本語フォントはもちろん、英語フォントもサポートされています。 いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利です！ fontvuer fontvuer -GitHub fontvuerの特徴 fontvuerのダウンロード・インストール fontvuerの使い方 fontvuerの特徴 既視感を抱いた人は大正解！ fontvuerは先日リリースされたばかりの国産アプリで、以前当ブログで紹介した「Fontviewer（紹介記事）」の後継の新作です。 基本的な機能はほぼ同じですが、使い勝手が大幅に強化されています！
iCloud・Googleドライブ・Dropbox・OneDrive・Megaへひとまとめにアクセスできるオープンソースのクロスプラットフォームファイルマネージャー「Spacedrive」
複数のデバイスやドライブ、クラウドサービスのファイルを1つのデータベースに結合して、任意のデバイスから整理および探索できるファイルマネージャーが「Spacedrive」です。Spacedriveはオープンソースで開発されており、GitHubにリポジトリが作成されています。 Spacedrive — A file manager from the future. https://www.spacedrive.com/ GitHub - spacedriveapp/spacedrive: Spacedrive is an open source cross-platform file explorer, powered by a virtual distributed filesystem written in Rust. https://github.com/spacedriveapp/sp
もうこれでSVGアイコンを探すときに困らない！ 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。 複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをまとめてアイコンフォントにもできます。矢印アイコンはMaterial Iconsで、ホームアイコンはBootstrapで、ということもできます。
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
ChatGPTやBardなど複数のチャットAIへ同時に質問して結果をずらっと比較できる「ChatALL」を使ってみたよレビュー
2022年11月にChatGPTが公開され、わずか5日間で100万ユーザーを突破したのを皮切りに、Microsoftが2022年12月にBing AI Chatを公開し、そしてGoogleも続いて2023年3月にBardを公開するなど多数のAIチャットサービスが登場しています。そうした複数のチャットサービスにまとめて質問を送信して結果を比較検討でき、一番いい結果だけを採用できるツールが「ChatALL」です。 sunner/ChatALL: Concurrently chat with ChatGPT, Bing Chat, bard, Alpaca, Vincuna, Claude, ChatGLM, MOSS, iFlytek Spark, ERNIE and more, discover the best answers https://github.com/sunner/ChatA
テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-clampプロパティの仕様 text-overflowでこれを実現できますか？ 実装の注意点 line-clampプロパティのサポートブラウザ リソース line-clampプロパティとは CSSのline-clampプロパティは、テキストを指定した行数で省略します。 2019年現在、Editors Draftなので、仕様は確定ではありませんが、max-linesとblock-overflowの省略形として定義されており、前者は勧告候補で削除される危険性があ
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。 :is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。 画像はツイートより 元ツイートは、こちら。 How slick :is(this CSS!?) 😏 removes the margins on all headers with a .tight class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA — Adam Argyle (@argyleink) October 13, 2020 ツイートは、hx要素のマージンをまとめて削除するスタイルシートが紹介されています。
例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ（ソース） ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単です。 Style a parent element based on its number of children using CSS :has() by Bramus :has()について詳しく知りたい人は、以前の記事をご覧ください。 CSSの:has()疑似クラスの便利な使い方を徹底解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has()を使用して、子の数に基づいて親要素のスタイルを設定 :has()
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。 :where() has a cool specificity trick, too. by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近、:is()疑似セレクタがよく話題になっている 複数のセレクタを1つにまとめられる:is() 同じ機能で、詳細度を0にする:where() :is()と:where()のどちらを使用すればよいか 最近、:is()疑似セレクタがよく話題になっている 最近、:is()疑似セレクタがよく話題になっています。おそらく、Safari
オープンソースで開発されている「Jitsi Meet」は、多人数同時ビデオ通話を可能にするWebRTC JavaScriptアプリケーションです。アカウントを作成したり、コンピューターにクライアントソフトをインストールしたりする必要はなく、ウェブブラウザやスマートフォンから完全無料で、セキュアなビデオチャットが利用可能。さらに、Googleカレンダーと連携させることでイベントに応じたチャットルームを作成することができます。 Jitsi Meet https://meet.jit.si/ jitsi/jitsi-meet: Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application. https://gi
:not()セレクタは非常に便利です。例えば、リストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんな時に使用すると簡単に指定することができます。 :not()セレクタは通常一つのclassしか指定できませんが、複数のclassを指定する場合の使い方を紹介します。 CSS :not() with Multiple Classes 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :not()セレクタとは、特定のclassがない要素を選択する否定疑似クラスです。
ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io
数回 or 1クリックするだけで、デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツールを紹介します。 ファビコンは、テキスト・画像・絵文字から簡単に生成でき、日本語や自分の画像からでも生成できます。また、複数の画像サイズ・フォーマット、それらの実装コードも生成してくれる優れものです。
2022年2月1日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！ ↑私が10年以上利用している会計ソフト！ 基本の円形グラデーション まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。 background-image: radial-gradient(開始色, 終了色); この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー
プログラミングの知識が無くても、たくさん用意されたテンプレートを編集して簡単にウェブサイトを作成できる「Carrd」は無料で使用できるサービスです。どのくらい簡単にウェブサイトを作成できるのか、実際に使って確かめてみました。 Carrd - Simple, free, fully responsive one-page sites for pretty much anything https://carrd.co/ Carrdでウェブサイトを作成するには、上記のURLにアクセスして「Choose a Starting Point」をクリック。 まずはウェブサイトのテンプレート選択から始まります。テンプレートは記事作成時点で77種類あり、無料版では52種類が使用可能になっていました。 各テンプレートはウェブサイトがどのように表示されるかを実際に確認することが可能。表示を確認するには、テンプレ
無料で同時1000人・最長6時間のオンライン会議ができる「FreeConferenceCall.com」は専用アプリなしでも音声・ビデオ通話に参加できるリモートワークの強力な味方
新型コロナウイルスの感染拡大に伴い、多くの企業が可能な範囲内で従業員にリモートワークを推奨しています。そんなリモートワーク時に必要となるのがオンライン会議ツールで、中でも群を抜いて多い同時接続可能者数を誇り、かつ無料で利用できるというサービスが「FreeConferenceCall.com」です。オンライン会議に参加するだけなら、専用アプリをインストールすることなくウェブブラウザや通話から気軽に参加可能という優れものとなっています。 Free Audio Conferencing | FreeConferenceCall.com https://www.freeconferencecall.com/ ◆アカウントの作成 FreeConferenceCall.comは無料でアカウントを作成するか、Facebookアカウントでログインすることで無料の会議ツールが使えるようになります。今回は無料
テレワークで困るのが、複数人でのミーティングやアイデア出しなどの意見を交わす場を持てないことです。Adobe XDの便利なプラグインが登場しました！ Whiteboardの名の通りホワイトボードをはじめ、ブレインストーミング、カードソーティング、ワイヤーフレーム、フローチャート、マインドマップなど、Webサイトやスマホアプリのミーティングで使用するさまざまなツールが簡単に利用できます。 複数人での使用はもちろん、個人で使用するのにも便利です。 Adobe XDのビジュアル協業プラグイン「Whiteboard」 Adobe XDのプラグイン「Whiteboard」とは Adobe XDのプラグイン「Whiteboard」のダウンロード Adobe XDのプラグイン「Whiteboard」の使い方 Adobe XDのプラグイン「Whiteboard」とは Adobe XDはAdobeユーザーは
家父長制社会が抑圧し、排除し、後景化してきた〈魔女〉。それはただ、自立と自由を求めて飛び立とうとしている女性たちでした。アニメ『水星の魔女』を中心に〈魔女〉文学を読み解いた、英文学者の小川公代さんによる連載評論「翔ぶ女たち」第3回「魔女たちのエンパワメント——『テンペスト』から『水星の魔女』まで」（『群像』2023年9月号掲載）より、第1節の一部を再編集してお届けします。 娘の成長物語としての『水星の魔女』 私は幼い頃から、女は家庭に縛りつけられるものという固定観念に反発してきた。女が、ましてや少女が一人で海外に行くなど考えられないという風潮のなか、当時11歳だった私は、突発的にペンパルのいるアメリカのケンタッキー州に一人で訪ねていくという無謀な計画を立て、父を味方につけ、実行した。母は泣いて私に懇願した。「きみちゃん、行かんといて。女の子一人では無理やから」。 今考えると命がけの計画だっ
2つ目のGoogleアカウントを設定して使ってみよう
2つ目のGoogleアカウントを設定して使ってみよう2020.01.05 21:00115,755 David Nield - Gizmodo US ［原文］ （ 禿頭帽子屋/Word Connection JAPAN ） Googleアカウント、私も用途に応じて3つくらい使い分けています。新しいアカウントを作るのは難しくありませんし、作ってからの切り替えも簡単です。ぜひ試してみてください。 Googleのアカウントがあれば、メールやマップ、クラウドストレージ、ミュージック、映画、生産性ツールなど、無数とも言えるアプリを利用できます。しかも、アカウントは1つと決まっているわけではありません。業務用の新しいアカウントでも、、プライベート用の2つ目のアカウントでも、以下の手順で簡単に作れて、使い方が広がります。 2つ目のアカウントを設定する方法Image： Gizmodo US 多くはないが情
これまた、便利なツールが登場しました！ 使用するアイコンだけをアイコンフォントやSVGアイコンのセットにできる無料オンラインツールを紹介します。 さまざまなアイコンプロジェクトがサポートされており、BootstrapやMaterial Designをはじめ、当ブログでも紹介したことのある数多くのアイコンから使用するアイコンだけを選択できます。 例えば、Bootstrapからホームとアローだけをセットにするとか、BootstrapのホームとMaterial Designのアローをセットにするとかも簡単です。 Icônes Icônes -GitHub Icônesの特徴 Icônesの使い方 Icônesの特徴 Icônesは複数の商用利用無料のアイコンから、使用するアイコンを選んでセットにして利用できるオンラインツールです。 登録など面倒なことは一切なく、ブラウザから簡単に利用できます。
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
Dockerなどのコンテナ技術について学習していると「Kubernetes(K8s)」というコンテナ管理プラットフォームの名前を目にすることがありますが、初心者にとってKubernetesの仕組みや用途は理解しづらいものです。そんなKubernetesの仕組み・用途・利便性についてクラウドストレージサービスを運営するBackblazeがまとめています。 What Is Kubernetes? https://www.backblaze.com/blog/what-is-kubernetes/ ・目次 ◆Kubernetesは何に役立つのか？ ◆Kubernetesの基本的な仕組みは？ ◆Kubernetesで可能なことは？ ◆Kubernetesでのデータ永続化とは？ ◆Kubernetesは何に役立つのか？ KubernetesはGoogleによって開発されたコンテナ管理プラットフォーム
「パスワードの使い回しはよくない」というのはよく知られていますが、いくつものサイトやアプリのサービスで別々のパスワードを設定して全部覚えておくというのは至難の業。無料のパスワード管理サービス「Passit」を使うと、たった1つのパスワードを覚えておくだけで、PCやスマートフォン、ブラウザでさまざまなサイトにログインすることが可能で、グループ機能で友だちや家族と情報を共有することもでき便利そうだったので、実際に使ってみました。 Passit https://passit.io/ ◆アカウント作成とサイトの登録 ますはアカウントを作成します。上記URLにアクセスすると以下のように表示されるので、右上の「Log In / Sign Up」をクリックします。 アカウント作成に使うEメールアドレスを入力して「Next」をクリック。 パスワードを2回入力して「Next」をクリック。 パスワードを忘れた
IPv6/IPoE + IPv4 over IPv6 技術を使った、v6プラスやtransixサービスを利用し、高速インターネットを楽しむ方も増えていると思います。しかしv6プラスを利用すると、一部オンラインゲームや外部から自宅LANへのアクセスに支障が出る場合があります。 そこで今回は、2台のルーターとスイッチングハブを使い、IPv6 v6プラスとIPv4 PPPoEの両方を利用できる環境を作りました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![シールを剥がすことに抗議する人々 - Togetter [トゥギャッター]](https://cdn-ak-scissors.b.st-hatena.com/image/square/3854586dd3012396a3ad421b39c4caea51792a54/height=288;version=1;width=512/https%3A%2F%2Fs.tgstc.com%2Fogp3%2F29e11120c0a7a91c567048ac6235cfb1-1200x630.jpeg)
2024年に最適なfont-familyの書き方 - ICS MEDIA
無料でIFTTTやZapierっぽく全自動連携できる「n8n」を自サーバー上に構築してみた
レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize
1つのGoogleアカウントに新規のGmailアドレスを複数追加できるって知ってた？｜@DIME アットダイム
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する
CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利
pictureタグとsrcset属性の違い。超わかりやすく
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方
完全無料＆インストール不要でビデオチャットが可能なオープンソースのオンライン会議ツール「Jitsi Meet」レビュー
CSSの否定疑似クラス「:not()」で、複数のclassを指定する場合の使い方
CSSで複数の色を組み合わせたメッシュグラデーションを作成する方法
Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA
無料で複数のテンプレートから簡単にウェブサイトを作成できる「Carrd」を使ってみた
テレワークのミーティングに役立つツールが全部無料で使える！Adobe XDの協業用プラグインが登場 -Whiteboard
『水星の魔女』が画期的である理由。従来のアニメに描かれてこなかった新しい「魔女」の姿（小川 公代）
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール
コンテナ管理プラットフォーム「Kubernetes」について初心者にも分かりやすく解説するとこうなる
1つのパスワードさえ覚えておけばブラウザ・スマホでパスワード管理ができる「Passit」レビュー
IPv4 PPPoEとIPv6（v6プラス）を併用する | 小山電子
helentech.jp
newsinfomation.net
www.kobonemi.com
www.youtube.com
cupmen.org
www.tickety.jp