サイト構築
UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
Post on:2021年9月30日
Webページやスマホアプリなど、UIデザインで使用されるシャドウをより美しく実装するテクニックを紹介します。 シャドウをぼんやりとしたグレーにするだけでなく、美しく最適化して実装します。また、シャドウのサイズで要素に標高 […]
シンプルなパターンがたくさん揃ってる！商用無料で使えるSVGの背景素材 -Basic Pattern Repository
Post on:2021年9月29日
シンプルなものからかわいいものまで、ベーシックなパターンが揃ったSVGフォーマットの背景素材を紹介します。インラインSVG、SVGファイル、Figma用が揃っており、SVGなのでカラー変更なども簡単です。 商用プロジェク […]
モダンCSSによる絶対配置（position: absolute;）の削減
Post on:2021年9月28日
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろ […]
これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text
Post on:2021年9月27日
テキストをHTMLのタグ（カスタム要素）で囲むだけで、タイプライターのアニメーションを簡単に実装できるスクリプトを紹介します。 外部ファイルを記述し、あとは<p>内でも<h1>内でもタイプライター […]
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
Post on:2021年9月22日
CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのよ […]
商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik
Post on:2021年9月21日
ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時 […]
CSS flexboxで実装する、レスポンシブ対応のステップのコンポーネントを解説
Post on:2021年9月16日
Webページで使用されるステップのコンポーネント、サークルに囲まれた1,2,3と各ステップを繋ぐ中央のラインを実装するCSSのテクニックを紹介します。 レスポンシブ対応、そしてライト・ダークモード対応、水平・垂直に配置さ […]
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
Post on:2021年9月15日
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、d […]
Adobe Fonts日本語書体一覧のPDF 2021年9月版、利用できる日本語フォント509書体が一覧で分かります
Post on:2021年9月14日
昨日、記事にしたAdobe Fontsのフォントワークス追加分を含めた「Adobe Fonts日本語書体一覧」のPDFがダウンロードできます。
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
Post on:2021年9月14日
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for B […]
sponsors
