HTML・コーディング

【商用可】HTMLテンプレートを無料ダウンロードできる厳選サイト11個

2024/01/23(Tue) 08:53

HTMLテンプレートを無料でダウンロードできるサイトを厳選してご紹介します。より具体的には、CSSフレームワークに依存しないVanilla CSSテンプレートとなっています。数あるテンプレート配布サイトの中で、これから以下に挙げるサイトが特にお気に入り。選択基準はこんな感じ。

https://photoshopvip.net/155092

コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック

2023/07/11(Tue) 08:59

フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。

https://coliss.com/articles/build-websites/operation/css/css-only-floating-input-labels.html

これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります

2023/06/09(Fri) 08:49

先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。

https://coliss.com/articles/build-websites/operation/css/about-popover-api.html

head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js

2023/06/08(Thu) 08:50

head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。

https://coliss.com/articles/build-websites/operation/work/identify-out-of-order-elements-in-head.html

プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS

2023/05/17(Wed) 08:54

ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。

https://coliss.com/articles/build-websites/operation/css/minimalist-css-framework-neatcss.html

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

2023/04/05(Wed) 09:09

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

https://coliss.com/articles/build-websites/operation/work/text-into-html-and-css-with-ai.html

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

2023/03/30(Thu) 09:04

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

https://coliss.com/articles/build-websites/operation/work/add-the-seach-element.html

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

2023/03/17(Fri) 09:00

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。

https://coliss.com/articles/build-websites/operation/work/modern-developer-toolbox-he3.html

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

2023/03/15(Wed) 09:08

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

https://coliss.com/articles/build-websites/operation/work/free-landing-page-html-templates-by-htmlrev.html

コピペで簡単！他と差のつくHTML/CSSスニペット30選まとめ

2023/02/27(Mon) 08:55

Webデザインをするとき、どんなデザインや仕掛けを採用したらよいか、迷うというひとも多いのではないでしょうか。今回は印象に残るウェブデザインを表現できる、最新のHTMLスニペットをまとめてご紹介します。

https://photoshopvip.net/144432