サイト構築

VS Codeでコードがさらに見やすくなる! 行の折りたたみをより使いやすくする機能拡張 -Better Folding

Post on:2023年4月5日

VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りた […]

AIでコードを生成! テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

Post on:2023年4月4日

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と […]

CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks

Post on:2023年4月3日

iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるMode […]

HTMLにsearch要素が追加されたぞ!

Post on:2023年3月29日

先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリ […]

CSSで角丸を美しく実装する方法、相対角丸のテクニック

Post on:2023年3月28日

角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか? 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実 […]

CSSの三角関数(sin(), cos(), tan())の基礎知識と基本的な使い方を解説

Post on:2023年3月23日

CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポート […]

朗報! Figmaでクロスデバイス間のコピーペーストができるようになったぞ!

Post on:2023年3月22日

デスクトップのFigmaとiPadのFigJamで、オブジェクト、フレーム、テキスト、ウィジェットなどをコピーペーストできるようになりました。

ブックマークしておくと便利! Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI

Post on:2023年3月20日

Tailwind CSSで実装されたモダンUIコンポーネントのライブラリを紹介します。 Webサイトやスマホアプリでよく使用されるカード、ボタン、アコーディオン、タブ、フォームなど、150種類以上のUIコンポーネントが揃 […]

Web制作に役立つ超便利ツールが登場! HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3

Post on:2023年3月16日

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較( […]

全部、完全に商用利用無料! さまざまなデザインが揃ってる、ランディングページ用のHTMLテンプレート -HTMLrev

Post on:2023年3月15日

プロダクト、サービス、アプリやソフトウェアなどのランディングページ用のHTMLテンプレートを無料でダウンロードできるHTMLrevを紹介します。 ランディングページ用のHTMLテンプレートはすべて無料で、商用プロジェクト […]

top of page

©2026 coliss