Web制作に役立つ情報一覧

こんなやり方があったとは！ 境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css

2025/01/31(Fri) 09:00

フォーム要素のグループ化で使用されるfieldsetの境界線付きボックスとlegendの見出しを任意の要素に実装できるCSSを紹介します。divやarticleを境界線付きボックスにし、h1を見出しにして下記のように実装できます。見出しで欠ける境界線は自動的にクリッピングされ、ボーダーも自由にスタイルできます。

https://coliss.com/articles/build-websites/operation/css/fieldset-legend-css.html#google_vignette

CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります

2025/01/29(Wed) 08:55

CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。

https://coliss.com/articles/build-websites/operation/css/css-attr-upgrade-2025.html#google_vignette

HTML Living StandardとモダンCSSに完全対応！ 使いやすくて見やすい、期待以上のリファレンス本 -HTML＆CSS全事典改訂4版

2025/01/28(Tue) 09:05

本書の改訂版がでるのを待っていた人も多いと思います。私もその一人です。前書から2年が経ち、その間にも多くのHTMLの要素やCSSのプロパティが増え、この改訂4版では100種類以上の項目が追加されています。

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

商用でも完全無料で利用できる！ デザインやイラストでかなり使える有料レベルの高解像度テクスチャ素材 -ResourceBoy

2025/01/24(Fri) 08:58

個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。

https://coliss.com/articles/freebies/textures-by-resourceboy-202501.html#google_vignette

日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date

2025/01/23(Thu) 08:58

WebサイトやスマホアプリのUIで日にちや時間、年の範囲の書式を自動的に短く、読みやすく、理解しやすく表示するJavaScriptのライブラリを紹介します。このライブラリを使用すれば、シンプルで一貫性のある書式で表示できます。

https://coliss.com/articles/build-websites/operation/javascript/date-range-formatting.html#google_vignette

CSSのみで画面の幅と高さのウィンドウサイズを取得する方法

2025/01/22(Wed) 08:59

画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。

https://black-flag.net/css/20250121-8237.html

構造化データとは？超初心者でもSEO効果を得られる丁寧な実装ガイド

2025/01/21(Tue) 08:58

構造化データと聞くと、「なんだか難しそう」「プログラミングの知識が必要なの？」と身構えるかもしれない。しかし、ここで解説する手順に沿ってゆっくり取り組めば、プログラミング経験がない初心者でも導入することは十分可能である。

https://lucy.ne.jp/bazubu/what-is-structured-data-52286.html

共起語に依存したSEOは危険。その理由と2025年にやるべきSEO対策

2025/01/21(Tue) 08:58

結論からいえば、共起語に頼る時代は終わった。現代のSEO戦略において、共起語は効果的ではない。新しいSEOプレイヤーの中には「共起語は押さえるべきSEOテクニック」と誤解されている方もいるので、明確に述べておくと、共起語がSEO戦略として一定の評価を得ていたのは、概ね2000年代後半から2010年代前半にかけての時期である。

https://lucy.ne.jp/bazubu/seo-that-relies-on-co-occurring-word-is-dangerous-52264.html

広告の制作で注意すべき細かいポイントまでよく分かる！ 制作者として消費者としてもしっかり読んでおきたい -景品表示法 超入門

2025/01/20(Mon) 08:54

景品表示法って聞いたことがあるけど、自分には関係ないかなと思った人はちょっと待ってください。バナーやランディングページで「今なら配送料無料」「通常10,000円のところを今だけ9,000円」、また「全品半額」と書いてあるのに下に小さい文字で「1万円以上の商品が対象」とあるなど、景品表示法の違反になることがあります。

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

コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript

2025/01/17(Fri) 09:09

ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり、キーフレームを変更したりなど、さまざまな操作を実行できます。

https://coliss.com/articles/build-websites/operation/javascript/getting-all-animations-linked-to-a-view-transition.html#google_vignette