モダンCSSによる絶対配置（position: absolute;）の削減 | コリス

2021/09/28 260 users absolute position モダンCSS 削減 配置

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 posi... 続きを読む

これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text | コリス

2021/09/27 19 users スクリプト HTML カスタム要素 アニメーション 実装

テキストをHTMLのタグ（カスタム要素）で囲むだけで、タイプライターのアニメーションを簡単に実装できるスクリプトを紹介します。 外部ファイルを記述し、あとは<p>内でも<h1>内でもタイプライター...記事の続きを読む 続きを読む

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？ | コリス

2021/09/22 307 users SVG ホログラム シャドウ ノイズ グラデーション

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chi... 続きを読む

Web制作の時間も予算も少ない時に便利！商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik | コリス

2021/09/21 25 users 商用 HTMLテンプレート ランディングページ 予算 少ない時

ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時...記事の続きを読む 続きを読む

CSS flexboxで実装する、レスポンシブ対応のステップのコンポーネントを解説 | コリス

2021/09/16 11 users Building 水平 CSS コンポーネント サークル

Webページで使用されるステップのコンポーネント、サークルに囲まれた1,2,3と各ステップを繋ぐ中央のラインを実装するCSSのテクニックを紹介します。 レスポンシブ対応、そしてライト・ダークモード対応、水平・垂直に配置されたステップだけでなく、数字ではなく日時を繋いだタイムラインにも応用できます。 Building A... 続きを読む

ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools | コリス

2021/09/14 295 users フォーマッター デコード diff ジェネレーター SQL

CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツール... 続きを読む

デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ | コリス

2021/09/14 207 users コンバージョン UIデザイン ユーザー 翻訳記事 テクニック

フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト... 続きを読む

画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS | コリス

2021/09/10 6 users オンラ エフェクト コピペ Photoshop プロジェクト

画像を編集できるのは、Photoshopだけではありません。 CSSフィルタで、画像にさまざまなエフェクトを与えることができます。 画像に適用するエフェクトを見ながら、そのCSSフィルタのコードをコピペで利用できるオンラ...記事の続きを読む 続きを読む

レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状 | コリス

2021/09/09 39 users モバイ ビューポートサイズ レイアウト レスポンシブ対応 現状

モバイルファーストとデスクトップファーストの現状、それぞれのワークフローを解説し、今日のレスポンシブ対応のレイアウトを実装するより良いアプローチ方法について紹介します。 ビューポートサイズとは関係ないすべてのデバイスで共通の基本スタイルを優先的に記述する方法、メディアクエリを使用しない方法、モバイ... 続きを読む

これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応 | コリス

2021/09/08 127 users Augu ブラケット ネイティブ 朗報 VS Code

VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: Augu... 続きを読む

UIデザインやグラフィック用の高解像度で、美しいグラデーション・グラデーションメッシュ素材をダウンロードできるサイトのまとめ | コリス

2021/09/07 8 users グラデーション スマホアプリ 背景 美しいグラデーション

Webサイトやスマホアプリをはじめ、最近ではテレビのCMなどでも背景として使用されている、グラデーション・グラデーションメッシュ素材をダウンロードできるサイトを紹介します。 UIデザインやグラフィック用の高解像度の画像フ...記事の続きを読む 続きを読む

CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper | コリス

2021/09/06 18 users ボーダー UI要素 Shaper 角丸 オンラインツール

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い... 続きを読む

創作のストーリーづくりに目から鱗の解説書！ストーリーの組み立て方、目の導き方、動作の示した方が分かる良書 | コリス

2021/09/03 8 users 本書 テクニック マンガ スマホアプリ 最初

仕事で、そして趣味で、創作のストーリーづくりに携わる人にお勧めの解説書を紹介します。 本書は映画やアニメ、書籍、マンガなどのストーリーの組み立て方を解説したものですが、目を導く方法、意味の伝え方、動作の示し方などWebデザインやスマホアプリにも通じるテクニックを学べます。 本書を手にした時に最初に思っ... 続きを読む

CSSの変数（カスタムプロパティ）が期待通りに動作しないときの解決方法 | コリス

2021/09/02 25 users カスタムプロパティ 変数 CSS ブラウザ プロジェクト

CSSの変数（カスタムプロパティ）は、IEを除くすべてのブラウザでサポートされており、実際のプロジェクトで使用している人も増えてきたと思います。 CSSの変数は非常に便利で使いやすいのですが、期待通りに動作しないときの解決方法を紹介します。 The Big Gotcha With Custom Properties by Chris Coyier CSSの変数（... 続きを読む

レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize | コリス

2021/09/01 430 users Pixel デバイスサイズ ワイドスクリーン Windows

Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Resp... 続きを読む

これから実装する人にオススメ！レイティングに使用するスター（星形）を実装するSVGのテクニック | コリス

2021/08/31 15 users レイティング SVG 一口 実装テクニック テクニック

Webページやスマホアプリで見かけるレイティングに使用するスター（星形）を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記... 続きを読む

日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです | コリス

2021/08/29 1620 users フリーフォント フォント ライセンス 大好物 たくさん

フリーフォントが大好物な人に朗報です！ ? 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open F... 続きを読む

CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる | コリス

2021/08/26 17 users プログレスバー CSS ライ 新しいプロパティ フォーム要素

フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライ... 続きを読む

CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック | コリス

2021/08/24 26 users 疑似要素 HTML テクニック CSS 下記

ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？ ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記... 続きを読む

これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック | コリス

2021/08/19 403 users iOS ビューポート height min-height 実装

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。Ja... 続きを読む

実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック | コリス

2021/08/17 17 users ヘッダ SVG バッジ CSS ヒーロー

Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS o... 続きを読む

各ソーシャルメディアに適した画像サイズは102種類！画像を1クリックでトリミングしてくれる無料ツール | コリス

2021/08/16 13 users Instagram Twitter Facebook サイズ

Twitter, Facebook, Instagram, TikTok, YouTubeなど、各ソーシャルメディアに最適なサイズで画像をトリミングしてくれる無料ツールを紹介します。 AIで自動化されているので、1枚の画...記事の続きを読む 続きを読む

Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編 | コリス

2021/08/06 287 users コピペ 実装 カスタマイズ 手順 背景

Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。 動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エ... 続きを読む

Googleデベロッパーが解説、Webページに画像の遅延読み込みを使いすぎるとパフォーマンスに悪影響を与える | コリス

2021/08/05 7 users lazy Loading Googleデベロッパー リターン

loading="lazy"によるネイティブ画像の遅延読み込みのリスクとリターン、注意点とパフォーマンスを向上させる実装方法を紹介します。 Webの新機能は便利で魅力的なものが多いですが、効果的な使い方を知らないと、パフォーマンスに悪影響を与えてしまうかもしまうかもしれません。Web制作者は知っておきたい遅延読み込み... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users section inline CSS div display

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む