知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】：東京新聞 TOKYO Web
見えない人はWebをどう閲覧？ 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】
カメラの熱暴走対策で背面にスマホ用冷却ファンを付けたら効果てきめんだった - 丁寧に手を抜く
どうもTAKUYAです。 去年ぐらいからいろんな場所でコーディングして見せるというYouTube動画を投稿している。 例えばこれはお寺の許可をいただいてReact NativeのUIを組むという動画。 たぶん何を言っているか意味が分からないと思うので観て欲しい： youtu.be このように長尺のショットを何時間にも渡って撮る。 カメラはFUJIFILM X-T4を使用している。 これは６月頭に撮ったんだけど、気温は既に高く熱中症が危ぶまれる気候だった。 その影響を受けて、カメラの温度も上がりやすくなり、熱で何度も強制停止するトラブルがあった。 しばらく間をおいて再起動しては撮影再開、という事を繰り返してこの日はなんとかなった。 しかし夏に向けての大きな課題となった。 どうしたもんかとネットを検索していたところ、以下のブログ記事を見つけた： photo-tea.com Teaさんという方は
ffmpegで動画をH.265エンコードして容量を大幅に節約する - 丁寧に手を抜く
ffmpeg活用シリーズ２つめ。前回はこちら： life.craftz.dog 今回はffmpegを使って、動画の画質をできるだけ保ちつつ容量を大幅に削減する方法。 自分はアクションカムのOsmo Pocketを持っていて、旅行などに行った際に動画を撮って遊んでいる。 その手軽さからぽんぽん動画を撮れてしまうんだが、とにかく動画ファイルがかさばって管理に困る。 何も考えずにHDDやクラウドストレージに保存すると、すぐさま容量がいっぱいになってしまう。 思い出として残れば充分でYouTubeなどの動画編集の素材に使うとかでなければ、ちょっと画質が悪くなっても容量が節約できる方がいい。 Osmo Pocketを例に取ると、これで撮影した動画はH.264形式で保存される。 ffmpegを使ってこの動画をH.265形式にエンコードすると、画質をほとんど失わずにだいたい半分以下に圧縮できる。 素晴ら
ブラウザの仕組み | Articles | web.dev
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
個人開発を7年以上続けて分かった技術選択のコツ
技術革新に適応しようとするイヌさんInkdropというMarkdownノートアプリを作り続けて7年になる。 お陰さまでその売上でずっと生活できている。 これまで個人開発でどう継続していくかについて「ユーザの退会理由をあれこれ考えない」とか「アプリの売上目標を立てるのをやめました」とか、ビジネス面あるいはメンタル面からいろいろ書いてきた。 今回は、技術面にフォーカスして、どう継続して開発していくかについてシェアしたい。 TL;DR最初はとにかく最速でリリースする事を最優先する迷ったら「ときめく方」を選べ程よいところで切り上げて開発を進める使っているモジュールがdeprecatedされるなんてザラだと覚悟する古いから悪いとは限らないシンプルにしていく老舗から継続の秘訣を学ぶ運ゲー要素は排除しきれない最初はとにかく最速でリリースする事を目標に技術選定する開発計画とビジネス計画は切っても切り離せな
Astro DBでTODOリストを作成
AstroからデータベースプラットフォームとしてAstro DBがリリースされました。 色々と触ってみたのでチュートリアルとしてTODOリストを作成する方法を解説します。 Astroのインストール まずは通常のAstroのインストールを行います。 npm create astro@latestでproject名を「astro-todo」、Emptyプロジェクトを選択して作成します。 % npm create astro@latest astro Launch sequence initiated. dir Where should we create your new project? ./astro-todo tmpl How would you like to start your new project? Empty ts Do you plan to write TypeScrip
WordPressは安全なのか（データを分析した結果がこちら...）
質問をする お客様のウェブサイトやプロジェクトについてお気軽にご連絡ください。1営業日以内にお返事いたします。 WordPressは現在、ウェブサイトを構築するもっとも人気な手段です。一方、その人気故に世界各地からの悪意ある攻撃のターゲットになりやすい、というマイナスな面もあります。それでは、WordPressはそのような攻撃に対処するだけの安全性を備えているのでしょうか？ 残念なことに、毎年何十万ものWordPressサイトやECサイトがハッキングされています。（ちなみにECサイトにおける詐欺対策に関する記事も公開しています） 恐ろしい事実です。ただし、よいお知らせもあります。 ハッカーによる侵害は、最新のWordPressコアの脆弱性が原因ではありません。ウェブサイトがハッキングされる理由の大半は、更新の見逃しや安全でないパスワードの使用など、本来予防できるはずのもの。 そのため、「W
WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方
CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。 WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。 Some little ways I’m using CSS :has() in the real world by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
Markdown を拡張する MDX はドキュメント作成の新たな可能性？
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
これでもう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
メルカリ 小泉さんからのエグい学び｜Shota Horii
ありがたいことに年末にメルカリの小泉さんとランチをご一緒させてもらいました。 CTO(@yutadayo)が作成した過去の失敗スライドに、リプライをいただいのがきっかけだったのですが、長らく競合事業(現ラクマ)をやっていたこともあり、きちんとお話ししたことがなく、とても学びが深かったので、ご本人に許可をいただいて、メモした内容と学びをシェアさせていただきます。 なんでメルカリに？噂ではフリルにも入社してもらえる可能性もあったとか？2007年よりミクシィに入社し、2012年の退任までCFOを務めていた その後、1年以上は他の会社の社外取締役をしたりフリーランスをしていた フリルは2012年夏リリース、メルカリは2013年春リリース 小泉さんは2013年冬にメルカリ入社 フリルのことは入社前から知っていて、2012年冬のIVSでコミュニティファクトリーの松本さんに「フリル知ってる？紹介してよ」
Keyboard Maestroにこれから取り組む方へのヒント（リンク集）｜DTP Transit 別館
改めて再掲すると： アプリを起動する 指定したファイル、フォルダーを開く キーボードショートカットを変更する 選択しているファイルを関連特定のアプリで開く ブラウザーで指定URLを開く ページタイトルとURLをコピーする（テキスト、HTML、Markdown） URL内のパラメーターの削除する よく使う文字を入力する 括弧を入力する（選択文字列をはさむ、さしかえる） タイムスタンプを入力する テキストの整形（クリーニング） Emacsキーバインドの補強 ウィンドウのリサイズ OCR 《できないこと》 ドラッグ&ドロップ fnキーの制御 マウスポインターを大きくする操作 「IllustratorユーザーがKeyboard Maestroを使うと恩恵が大きい」の理由は？こちらもブログにまとめています。 図にしてみたものがこちらですが、たとえば、スクリプトを実行するとき、次のようなスクリプト前後
WEBLIFE（ウェブライフ）｜Shopify構築・運用支援やCMSを中心としたSaaS事業および映像/Web制作ディレクション
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
どうしてもドメインを永久保持できない企業向け 企業はどうドメインを捨てるべきか - web > SEO
コロナ禍中に取得された地方自治体のドメインがオークションで高値売買され、中古ドメインとして悪用されるなど、公的機関のドメイン放棄問題が注目されています。 11月25日のNHKニュース7でドメイン流用の件が報じられました。私も取材を受け少しご協力をしています。 www3.nhk.or.jp 公的機関のドメイン放棄問題の理想の解決は、今後は lg.jp、go.jp などの公的機関しか使えないドメインだけを使うようにすることです。 ただ今回の問題はコロナ禍初期の大混乱時、非常にスピーディにサイト立ち上げが求められていた時の話です。 信頼が求められる lg.jp などのドメインの利用には厳格なルールがあるのも当然です。あの混乱時期にルール改定も難しかったと思います。新規ドメインが選ばれた事は仕方がない事と思っています。 ただ、コロナ禍が落ち着いた今、無責任に放棄されるのは明らかな問題です。 今回の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
WordPressの保守・メンテナンスをやってみよう！
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
Dead Simple Sites — Minimal Website Inspiration
