サイト構築 -制作

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

Post on:2021年9月6日

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整で

...記事の続きを読む

[CSS]「display: contents;」がすごい便利!ラッパーを使った実装が大きく変わるこれからのテクニック

Post on:2021年9月4日

例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です

...記事の続きを読む

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

Post on:2021年9月1日

Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました! iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを

...記事の続きを読む

SVGでレイティングに使用するスター(星形)を実装するテクニックを解説

Post on:2021年8月31日

Webページやスマホアプリで見かけるレイティングに使用するスター(星形)を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実

...記事の続きを読む

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

Post on:2021年8月16日

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

...記事の続きを読む

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

Post on:2021年8月5日

loading="lazy"によるネイティブ画像の遅延読み込みのリスクとリターン、注意点とパフォーマンスを向上させる実装方法を紹介します。 Webの新機能は便利で魅力的なものが多いですが、効果的な使い

...記事の続きを読む

コーディングに役立つ!Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック

Post on:2021年7月20日

あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方

...記事の続きを読む

webpファイルをPhotoshopで開く・書き出すことができる機能拡張 -WebPShop

Post on:2021年7月16日

最近増えてきたwebpファイルをPhotoshopで開いたり、書き出すことができる無料の機能拡張を紹介します。 更新: 2021/11/1: Photoshop 2022もwebpをサポートしていませんが、ここで紹介する

...記事の続きを読む

HTML tableの実装がこれまでと変わる!Googleデベロッパーによる変更点の解説 -TablesNG

Post on:2021年7月8日

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは

...記事の続きを読む

WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons

Post on:2021年6月28日

アロー・ホーム・サーチ・カート・メール・ソーシャルメディア・ハートをはじめ、WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できるAkar Iconsを紹介します。 コピーしたSV

...記事の続きを読む

top of page

©2021 coliss