サイト構築 -実装
画像のalt属性には何を書けばよいか、WAIによるチュートリアルにその答えがありました
Post on:2025年2月4日
画像のalt属性に何を記述すればよいか、悩むことはありませんか？ その一つの答えがWAIによるチュートリアルにありました。画像にテキストが含まれている場合はどうすればよいか、リンクやボタンとして使用している画像なのか、装 […]
こんなやり方があったとは！ 境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css
Post on:2025年1月30日
フォーム要素のグループ化で使用されるfieldsetの境界線付きボックスとlegendの見出しを任意の要素に実装できるCSSを紹介します。 divやarticleを境界線付きボックスにし、h1を見出しにして下記のように実 […]
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
Post on:2025年1月28日
CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさ […]
簡単に実装できる！ SVGアニメーションで気持ちよく動くスピナー、超軽量サイズでカスタマイズも簡単 -SVG Spinners
Post on:2025年1月27日
コピペで簡単に使用できる、ローディング用のアニメーションにぴったりなSVGベースのスピナーを紹介します。 さまざまなデザインのスピナーが揃っており、画像は一切使用されていません。アニメーションも快適で、くるくる気持ちよく […]
日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date
Post on:2025年1月22日
WebサイトやスマホアプリのUIで日にちや時間、年の範囲の書式を自動的に短く、読みやすく、理解しやすく表示するJavaScriptのライブラリを紹介します。 このライブラリを使用すれば、シンプルで一貫性のある書式で表示で […]
Web制作者は要チェック！ Chrome 132で新しく追加されたCSSとHTMLの3つの新機能
Post on:2025年1月21日
Chrome 132で追加された、CSSとHTMLの新しい機能3つを紹介します。 今回のアップデートで、dialog要素の開閉トグルイベントを取得できるようになります。これによりダイアログが表示されているのかどうか簡単に […]
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
Post on:2025年1月16日
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり […]
Futuraの初期型の字形「Formera」がオープンソースのフリーフォントでダウンロードできます
Post on:2025年1月15日
Futuraの初期型の字形が、オープンソースのフリーフォントでダウンロードできるので、紹介します。 「Formera」はFuturaの原形とされるもので、大きな特徴としては、mが直線で構成されていたり、rが棒と点で構成さ […]
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ
Post on:2024年12月19日
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェック […]
これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit
Post on:2024年12月18日
CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ […]
sponsors
