Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

Category

  • お知らせ
  • HTML / CSS
  • デザイン / UI
  • 素材
  • 書籍
  • Webサービス
  • アンケート
  • 人気の記事やツイート

背景パターンをCSSで実装する

linear-gradientやrepeating-linear-gradient、radial-gradientを使って背景パターンをCSSのみで実装する方法をご紹介します。画像を使わず、鮮明な背景が用意できるのでおすすめです。デザインに合わせて色を変えてご利用ください。

2021.3.15

  • HTML / CSS
背景パターンをCSSで実装する

カード型レイアウトのhoverデザイン

ブログ記事一覧だけでなくサービス紹介の一覧など、カード型レイアウトで使えるhoverデザインをご紹介します。安易に半透明にすることなく、クリックできることを伝えるようにしましょう。

2021.3.15

  • HTML / CSS
カード型レイアウトのhoverデザイン

tableを見やすくするCSS

tableタグで表を実装した際にデータ量が多いと見づらくなりがちです。それを解消するためにCSSを使ってカーソルをのせるとその行をハイライト表示させる方法をご紹介します。比較させたい表の際に使えるTipsです。

2021.3.14

  • HTML / CSS
tableを見やすくするCSS

円グラフをCSSのみで表現する

円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。

2021.3.14

  • HTML / CSS
CSSのみで円グラフを表現する

WebPに変換して対応する

WebP(ウェッピー)はモバイルファーストの観点から是非とも対応しておきたい画像フォーマットです。非対応のブラウザが多かったので使用に躊躇しておりましたが、2020年にSafariの最新版(Big Sur以降)で対応されまして、すべてのモダンブラウザで利用することができるようになりました。

2021.3.11

  • HTML / CSS
WebPに対応させる

Twitterで人気があったツイートまとめ – 2021年2月

私のTwitterアカウント(@pulpxstyle)では、サイト制作の現場で使えるTipsやアイデアを発信しています。2021年2月の間で人気があったツイートをまとめてみました。ブクマに埋もれてしまって探すのが大変という方はこちらからチェックしてみてください。

2021.3.1

  • 人気の記事やツイート
Twitterで人気があったツイートまとめ – 2021年2月の画像

CSS1一行で魅せるズラしテクニック

シンプルな装飾として使えるずらしテクニック。テキストや画像に使用することで目を惹くことができます。過剰な装飾は控えるべきですが、今回ご紹介する方法なら1行で実装できスマートに表示できるのでおすすめです。

2021.2.18

  • HTML / CSS

無料のSVGアイコン素材サイト

無料で使用できるSVGアイコン素材サイトを紹介します。サイトによってはカラーやサイズを変更することができたり、アイコンフォントとして利用することができます。使用時には必ずライセンスを確認してからご利用ください。

2021.2.14

  • 素材

CSSのみでステッチ風の区切り線を実装する

区切り線をCSSでステッチ風にデザインする方法です。少ないコードで自然な装飾が実装できるのでおすすめです。

2021.2.5

  • HTML / CSS

ユーザー目線で見たGoogle検索結果ページへの対策

検索順位のためのSEO対策ばかりに気をとられがちですが、検索結果に表示されている情報にも目を向けるべきと考えます。せっかく順位が良くてもクリックしてもらえなければ意味がない。ユーザー目線で見たGoogle検索結果ページへの対策の中でサイト側で設定できるものをご紹介します。

2021.2.3

  • HTML / CSS

Twitterで人気があったツイートまとめ – 2021年1月

私のTwitterアカウント(@pulpxstyle)では、サイト制作の現場で使えるTipsやアイデアを発信しています。2021年1月の間で人気があったツイートをまとめてみました。ブクマに埋もれてしまって探すのが大変という方はこちらからチェックしてみてください。

2021.2.1

  • 人気の記事やツイート
Twitterで人気があったツイートまとめ – 2021年1月の画像

CSSで写真を装飾する

CSSのみで写真に装飾を施す方法を紹介します。過度な装飾は避けたいのでできるかぎりシンプルなものを用意しました。デザインテイストに合わせてご利用ください。

2021.1.18

  • HTML / CSS
  • <
  • 1
  • 2
  • 3
  • 4
  • 5
  • >

Category

  • HTML / CSS
  • デザイン / UI
  • 素材
  • 書籍
  • Webサービス
  • アンケート
  • 人気のツイート

人気記事

  1. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

  2. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  3. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた

  4. 見出しに使えるfit-contentを解説してみる

  5. 配色ツール9選のサムネイル画像

    配色ツール9選。すぐ使えるWebツールをあつめてみた

Webデザイン本を出版しました

現場で使えるWebデザインアイデアレシピのバナー現場で使えるWebデザインアイデアレシピ

© 2021 Pulp Note