はてなブックマーク

いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web

Webサイトを使いやすくする、私なりのユーザビリティ11の施策について紹介します。 本記事で紹介するのは一般的なユーザビリティの内容ですが、検討すべきタイミングがかならずくるはずです。制作前にチェックしておくことをおすすめします。 ユーザーが使いやすくなるユーザビリティ11の施策 複雑なナビゲーションで迷わせない ページ数が多い、3階層以上などのある程度大きな規模のサイトは、グローバルナビゲーションだけで誘導することが難しいです。 一昔前は、グローバルナビゲーションにドロップダウンメニューを設置しているサイトを見かけましたが、階層が深い、大きな規模のサイトには使いづらくなります。 選択肢が多いドロップダウンメニューは使いづらい 狭いスペースに選択肢を詰め込みすぎると、ユーザーは選びにくく、選ぶ意欲を無くしていく可能性が出てきます。 グローバルナビゲーションは、確実に見てほしいページに限定し

Figmaをデザイン作成のメインアプリに変えてから数ヶ月経過し、Figmaプラグインの見直しをおこないました。新たに発見したもの含め、私が使い続けているプラグインを17個紹介します。 また、使用してみたものの使わなくなったプラグインも記事後半に紹介しています。私にスタイルに合わないだけで便利に使用できる方もいると思うので、ぜひ最後までチェックしてみてください。 まずは、頻繁に使い続けているものや今回見つけたFigmaプラグインを17個紹介します。 Iconify Iconify Google Material IconsやFontAwesomeなど、60以上のアイコン配布サイトで提供しているアイコンを、手軽にFigmaに挿入できるIconify。 サイトごとの検索や、登録されている全サイトを対象にキーワード検索もできるので、手軽に目的のテイストのアイコンを探しだすことができます。 ライセン

ほどよい個性で見出しに使いたくなるGoogle Fonts 19選 Update2023.05.22 Release2023.05.22 Material Hatenaにシェアする Twitterにツイートする Pocketにストックする Feedlyに登録する Google Fontsは、約1500種類のフォント（執筆時点）を提供しているWebサービスで、イメージに合ったフォントを見つけるためには、多くの時間が必要です。 毎回フォントを探すたびに確認作業をするのは時間の無駄です。そこで、先日私はGoogle Fontsで提供されているすべてのフォントをチェックし、分類して自分用に整理しました。これにより、かなりの時短になったので共有します。 日々追加されるGoogle Fontsの中から厳選した、ほどよい個性で見出しに使いたくなるフォントを21個紹介。本記事で紹介するのは英字のみに限定し

Web制作に便利なChrome拡張機能20選Update2023.03.31Release2023.03.31Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Chrome拡張機能は、ウェブ閲覧やウェブ制作のさいに非常に便利な機能です。新しい拡張機能を見つけるたびに追加し、実務で試しています。ただ、気がつくと使わない機能が溜まりがちなので、数ヶ月ごとに見直ししています。 先日もインストール済みのChrome拡張機能を見直し、頻繁に利用しているものや、いざという時に使用しているものを残して整理しました。 Webサイト制作者の視点から便利なChrome拡張機能を厳選して20個紹介します。 ChatGPT関連Glarity-Summary for Google/YouTube (ChatGPT) Google検索ページやYouTub

良質なWebデザインを集めているギャラリーサイト18+1選 Update2023.03.07 Release2022.10.17 Design UI Hatenaにシェアする Twitterにツイートする Pocketにストックする Feedlyに登録する Web制作の現場では、制作側はクリエイティブの参考に、クライアントは要望を伝えやすいように、Webデザインギャラリーサイトを利用する機会は多いです。そこで今回は、良質なWebデザインを集めているギャラリー18+1サイトを紹介します。あなたの現場でぜひ参考にしてみてください。 ちょうどいいWebデザインギャラリー ちょうどいいWebデザインギャラリー 限られた条件の中で、最良のクリエイティブを『ちょうどいい』と定義して、キュレーターがそれぞれのWebサイトのちょうどいいポイントを端的に紹介していている『ちょうどいいWebデザインギャラリー

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS

あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト

お問い合わせフォームの入力を完遂し、送信してもらうために改善しておきたい16のポイントを紹介します。サイトリニューアルの要望でよくある「お問い合わせ数を増やしたい」に応えるために最低限おさえておきたい情報をまとめました。ぜひ参考にしてみてください。 問い合わせ時に必要な項目のみに限定する 「この項目は本当に必要か？」いつも疑うようにしています。お問い合わせ時に必要な情報なのか？その後の打ち合わせで電話番号や住所など聞くことはできないのか？不要な項目を削除し、本当に必要な情報のみに限定することでユーザーも入力しやすくなります。 郵送で資料を送る資料請求フォームは住所は必要です。しかし、質問などメールだけでのやりとりのためのお問い合わせフォームであれば住所の情報は不要なので削除します。クライアントと相談しながら常に減らす意識は持つようにし、ユーザーの手間を省くようにします。 入力欄の数は最低限