CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ...記事の続きを読む
幅いっぱいの要素から左右のマージンを引きたいときに、こういう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のサポートブラウザ
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
※本ページは、アフィリエイト広告を利用しています。 CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。 Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。 本書は、先週発売されたばかり！ Web制作に携わる人すべてにお勧めの解説書。HTMLとCSSに携わるコーダーの人はもちろん、こういうレイアウトやコンポーネントができるというのがよく分かるのでデザイナーやディレクターの人にもお勧めです。
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」（紹介記事）も第1・第2水準漢字対応です。 「マルミーニャＭ」はかわいさ全開の丸ゴシック体のピクセルフォントで、かわいいドット絵やゲーム演出にぴったりな丸文字フォントです。 マルミーニャＭ マルミーニャＭ -BOOTH マルミーニャＭのダウンロード マルミーニャＭの特徴 x0y0pxFreeFontの他のフォント マルミーニャＭのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイトから。x0y0pxFreeFontの本サイトはGitHubに移転され、そこからフォントをダウンロードできます。
2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特徴で、字形にはコントラストを強調するディテールが備わっています。また、大きいサイズでもその美しいラインと滑らかな曲線、繊細なディテールは優れたリズムを実現します。 「0」と「O」を区別する必要がある場合のスラッシュゼロ、下付き数字の化学式（H2Oなど）、文字幅が揃った数字など、多くのOpenType機能も利用できます。 Inter font family Inter -GitHub Inter 4の特徴 Inter 4のダウンロード Inter 4のウェイトとグリフ In
マンガ・同人誌向けのアンチック体フォントはたくさんあります。今回紹介する「GL-ノバンチカ源」はアンチゴチとしての読みやすさはもちろん、セリフや擬音・擬態語に使用する濁点・半濁点つきのひらがな・カタカナ、小書き仮名も揃っており、こんなにも仮名や記号文字が揃っているフォントはないと思います。小書きの「ん」や「ー」の濁点なども揃っています。 オープンソースなので、個人でも商用でも完全に無料で利用できます。しかも、改変や組み込みもOKの太っ腹ライセンス！ GL-ノバンチカ源 -GitHub 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」のダウンロード 「GL-ノバンチカ源」を使ってみた 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」は、「GL-アンチック」「GL-オとマのペ」などマンガ・同人誌向けのフリーフォントや「GL-築地初号などを多数リリースされているGutenberg Lag
WebサイトやスマホアプリのUIデザインをはじめ、プレゼンなどのさまざまな成果物に使用できるSVGアイコンのセットを紹介します。 アイコンのスタイルも豊富で、ソリッド・ベタ塗り・デュオトーンなども揃っており、さまざまなデザインに適用できると思います。 Phosphor Icons Phosphor Icons -GitHub Phosphor Iconsの特徴 Phosphor Iconsのアイコンのダウンロード Phosphor Iconsのアイコン Phosphor Iconsの特徴 Phosphor Iconsは、WebサイトやスマホアプリのUIデザインをはじめ、プレゼンテーションやダイアグラムなどさまざまな成果物に使用できるフレシキブルなアイコンのセットです。 7，000種類以上のSVGアイコンが揃っています。 6つのスタイル（Thin, Light, Regular, Bold,
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるAtlas Iconsを紹介します。 UIデザインをはじめ、ビジネス、ソーシャル、ハンドジェスチャー、ガジェット、エコロジー、フィットネス、食べ物・飲食物、医療など、33種類のカテゴリに2,000種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。 SVGアイコンだけでなく、Webフォント、Figma用なども揃っているので、使い勝手もよく、非常に便利です。 Atlas Icons Atlas Icons -GitHub Atlas Iconsの特徴 Atlas Iconsのダウンロード Atlas Iconsのアイコン Atlas Iconsの特徴 Atlas Iconsは、WebサイトやスマホアプリのUI用にシンプルにデザインされた
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
少しマニアックな知識、QRコードの仕組みを紹介します。 QRコード決済、リンクをQRコードで提供するなど、日常的に使用されているQRコードにあるそれぞれのパターンがどのように機能しているか、どういう役割をしているのか、なぜ上下逆さにしても読み取れるのか、なぜ一部が隠されても読み取れるのかなどが分かります。 QR codes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに QRコードの仕組み 終わりに はじめに QRコードがどのように機能しているのか、疑問に思ったことはありませんか？ 控えめに言って、実に、おもしろい！ 注意: この記事⬇では非常にマニアックな内容が含まれています。 QRコードの仕組み QRコード（Quick Response code）は自動車部
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く