Web制作に役立つ情報一覧

【最新】Adobe Fontsに百千鳥フォント登場！無料で使える日本語フォントがさらに充実

2025/02/17(Mon) 08:55

フォントひとつで、デザインの空気は変わります。手書き風なら温かく、シャープな書体なら洗練された印象に。たった一文字で伝わるニュアンスが変わるのが、フォントの魔法です。そして今回、Adobe Fontsに新たな日本語フォントが登場！注目は、「百千鳥（ももちどり）」。太さだけでなく、縦長・横長まで自在に調整できる、次世代のバリアブルフォントです。

https://photoshopvip.net/162878

これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック

2025/02/14(Fri) 08:56

フルブリードレイアウトとは最近のWebサイトのUIでもよく見かける、記事は中央配置に、画像や動画などは幅いっぱいに表示されるレイアウトのことです。これまではCSS Gridなどで実装されていたと思いますが、今回紹介するのはモダンCSSで実装できるテクニック。

https://coliss.com/articles/build-websites/operation/css/full-bleed-layout-with-modern-css.html

ホームページで集客できない原因とは？改善策と成功事例を紹介

2025/02/13(Thu) 08:55

ただホームページを公開しただけでは、思うような集客効果は得られません。無数のWebサイトが存在する中で訪問ユーザーを増やすためには、SEOをはじめとする集客施策が不可欠です。本記事では、ホームページで集客できない10個の原因と、有効な改善策をわかりやすく解説します。集客に成功した企業の事例も紹介しますので、サイト運営にぜひお役立てください。

https://www.seohacks.net/blog/26623/

「え、これ無料!?」デザイナー必見の2025年最新フリーフォントカタログ

2025/02/12(Wed) 09:06

デザインを仕上げるときに、「もうちょっと雰囲気を変えたいな…」と思うこと、ありますよね。そんなときに試したいのが、がらりと印象を変える新しいフォントです。特にフリーフォントは気軽に試せるのが魅力。でも、探しているうちに『どれを選べばいいかわからない…』なんてことも。そこで今回は、2025年に入ってから公開された最新の高品質フリーフォントを厳選してご紹介。商用OKなものも多数あり、トレンド感あふれる最新フォントがずらり揃いました。

https://photoshopvip.net/162823

HTMLとCSSを独学で学びたい人にお勧めの解説書、現場レベルのスキルまでしっかり学べる！ -HTML＆CSS Webデザイン

2025/02/10(Mon) 09:06

HTMLとCSSを学ぶ近道は、手を動かすこと。本当なら制作会社で経験を積まないと身につけられないコーディングのスキルを独学で学べる解説書を紹介します。本書は実案件をもとに作成された練習サイトを実装しながら、本格的にHTMLとCSSを学ぶことができます。デザインカンプや仕様も用意されており、かなり実践的に学べます。

https://coliss.com/articles/book-review/isbn-9784297146436.html

Web制作者は要チェック！ 2025年、Webサイトやスマホアプリの実装に役立つモダンCSSのスニペットのまとめ

2025/02/07(Fri) 09:01

Google Chromeの開発マネージャーであり、The CSS Working Groupのメンバーでもあり、VisBugやOpenPropsなどの開発者でもあるAdam Argyle氏による、2025年のUI/UX案件に役立つCSSのスニペットを紹介します。

https://coliss.com/articles/build-websites/operation/css/modern-css-snippets-for-2025.html#google_vignette

商用利用も完全無料！ UIデザインに最適、シンプルなデザインでパフォーマンスに影響を与えない超軽量のSVGアイコン素材 -Next Icons

2025/02/06(Thu) 08:58

Webサイトやスマホアプリでよく使用するUI用のSVGアイコンを紹介します。アイコンはシンプルで一貫性のあるデザインで、サイトやアプリのパフォーマンスに影響を与えないよう非常に軽量サイズで設計されています。

https://coliss.com/articles/build-websites/operation/work/next-icons-lightweight-svg.html

img要素のalt属性に何を記述すればよいか、WAIによるチュートリアルにその答えがありました

2025/02/05(Wed) 08:57

img要素のalt属性に何を記述すればよいか、悩むことはありませんか？その一つの答えがWAIによるチュートリアルにありました。画像にテキストが含まれている場合はどうすればよいか、リンクやボタンとして使用している画像なのか、装飾的な画像のaltは空で本当によいのか、などWAIによる方針が分かります。

https://coliss.com/articles/build-websites/operation/work/how-to-use-the-alt-of-the-img-element-in-various-situations.html

HTMLとCSSでつくる!　1文字ずつ変化するテキストのアニメーション

2025/02/03(Mon) 08:58

前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。『HTMLとCSSでつくる！　リンクテキストのホバー時アニメーション11選』さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。

https://ics.media/entry/250131/

こんなやり方があったとは！ 境界線付きのボックスのスタイルを任意の要素に実装できる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