クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

ひかる @kxcpk__ 言うことが毎回二転三転して、その度にこちらを責めてくる人が会社にいるんだけど、参った同僚（外国人）が「ねぇヒカル！これはおかしいよ！Gaslightじゃんこんなの！Gaslightって単語知らないの？今すぐ調べな！」て言われて、こんなピッタリな用語があることを初めて知った。（日本語でもある） pic.twitter.com/lcdxebrYP9

日々生活するにつれゴミが溜まるのは日常も PC も大差ないのですが，特に macOS は不要なキャッシュファイルが溜まりやすいと感じます．ディスク容量が逼迫し続け 10 GB を切り，いよいよ Photoshop も開けなくなってきたので，不要なファイルを 60 GB 分削除しました．以下メモです． 便利コマンド # ルートから 5 個下の階層までに存在する，100 MB 以上のファイルを検索 sudo du -x -m -d 5 / | awk '$1 >= 100{print}' # 現在のディレクトリ以下に存在する，50 MB 以上のファイルを検索 du -x -m | awk '$1 >= 50{print}' # ディレクトリを削除する rm -rf

TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

商用で無料利用できる、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

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ

新人声優 +81-9014502501 mai[email protected] 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない

コミュニケーションを磨いても「言語化力」は身につかない世の中にはコミュニケーション術を説いた本であふれていますが、それらを読んでも「言語化力は身につかない」と荒木さん。 楽譜が読めるようになってもピアノが弾けるようにはならないし、レシピをしっかり覚えてもおいしい料理をつくれるようにならないのと同じ。伝え方のスキルをいくら学んでも、「言語化」の問題は解決できないということです。 言語化するために必要となるのは、言語化力を身につけるためのトレーニング。 荒木さんがすすめているのは、A4サイズ1枚の「メモ」を秒速で書くというシンプルなトレーニングです。 言語化というと、頭で思い浮かべたことをすぐ口から発せられるようにトレーニングするイメージがありますが、まずは「メモ」をとることなのですね。ちょっと意外です。 「なんでメモ？」と思う方も多いでしょう。メモといえば、「記録のためのツール」というのが一

「ファイル・フォルダ名を一括で変更する機能」とか、標準装備で良いじゃん！ Microsoft謹製、Windowsの作業効率をアップさせる「PowerToys」というソフトの紹介・解説です。 記事のベースと画像はバージョンは0.27.1。執筆時現在は0.29.3が最新版ですが、内容はバグの修正と日本語化なので機能面の差異はなし。 PowerToysとは？ PowerToysは、Microsoftがオープンソースで開発中のソフト。元々Windowsに搭載するつもりだったが搭載されなかった利便性向上機能を複数提供するもの。 元々Windows 95時代から名前が続いているソフト。Windows XPまで提供が続けられていました。Vista以降は提供されていませんでしたが、2019年5月にWindows 10向けにオープンソースとして提供を再開しています。 各機能の詳細 FancyZones（複数

マウスポインタを自動移動、“離席バレ”を防ぐUSBマウスジグラーがアイネックスから 2024.02.05 14:25 更新 2024.02.05 配信 USBポートに挿すだけでマウスを自動移動。3種類の動作モードを搭載 株式会社アイネックス（本社：東京都西東京市）は2024年2月2日、マウスポインタを自動的に動かすことができるUSBマウスジグラー「U20A-MMJGR」を発表した。2月7日に出荷が開始される予定。 マウスポインタを自動的に動かすことができる、小型USBドングルのような形状のUSB機器。ポインタが自動で動き続けるため、スクリーンセーバーやスリープが動作するのを防ぐことができるほか、テレワーク時の“離席バレ”防止にも使える。 本体にはON/OFFスイッチとモード切替スイッチを搭載。動作モードは、極めて小さい範囲で左右に移動させる「モード1」（初期設定）、左右に一定距離移動させる

はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。

ホットクック使い始めて1週間くらいなんだけどねマジでフルタイム勢全員買った方がいい。優勝すぎる。これは革命すぎる。体感1時間〜2時間は時短になるという記事。コメント欄を見ると「1年ぐらいは使い続けてから利点と欠点を聞きたいところ」というのが目に入ったので、2021年5月から毎日のようにホットクックを使ってる感想を書いてやろうかという気になった。 ホットクックの利点として時短をあげる人は多いし実際そうなのであるが、時短ができるということは人間じゃやってられないような時間をかけた料理が簡単に作れるということでもある。 例えば牛すじ。柔らかくなるまで煮るのは本当にたいへんなのであるが、毎年冬にはスーパーの500gで1000円くらいの牛すじ肉を買ってきてビーフシチューをよく作っている。まぜ技ユニットを取り付けて2時間も煮込めば、安物の硬い牛肉が箸で切れるほど柔らかくなる。歯の悪い高齢者も食べれると

2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー