サイト構築 -制作

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

Post on:2021年9月9日

モバイルファーストとデスクトップファーストの現状、それぞれのワークフローを解説し、今日のレスポンシブ対応のレイアウトを実装するより良いアプローチ方法について紹介します。 ビューポートサイズとは関係ないすべてのデバイスで共

...記事の続きを読む

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

Post on:2021年9月8日

VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました! VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今まで

...記事の続きを読む

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をサポートしていませんが、ここで紹介する

...記事の続きを読む

top of page

©2024 coliss