HTML・コーディング

国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門

2024/07/15(Mon) 09:07

国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。

https://coliss.com/articles/book-review/isbn-9784798183664.html#google_vignette

こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版

2024/05/22(Wed) 08:54

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。

https://photoshopvip.net/157760

少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集

2024/05/20(Mon) 09:02

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。

https://www.tak-dcxi.com/article/html-css-techniques-to-improve-usability-and-accessibility-with-minimal-code/

令和のHTML / CSS / JavaScriptの書き方まとめ

2024/05/15(Wed) 09:08

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。

https://zenn.dev/necscat/articles/bc9bba54babaf5

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape

2024/05/09(Thu) 08:50

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。

https://coliss.com/articles/build-websites/operation/css/css-shape.html

想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ

2024/02/02(Fri) 09:05

WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。そんなスイッチがHTMLだけで実装できるようになります。

https://coliss.com/articles/build-websites/operation/work/safari-support-for-input-type-checkbox-switch.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