いざという時のために覚えておくと便利な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

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

覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい

Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac

複合キーワードでありますが、多くのアクセスを獲得してきました。 小さなWebメディアでは、単一キーワードでの上位は難しいのですが、単一キーワードでないと結果が出ないわけではありません。複合キーワードで上位表示を果たし、結果を出すことができるのです。 私が施しているSEO対策は、結果を保証するものではありません。 ただ、結果を少し期待できるものではあります。 そのSEO対策を紹介します。 1, キーワードを含むタイトルWebサイト内のタイトルは、主に3つあります。 サイト名ページ名記事名いずれも重要なコンテンツです。Webサイト単位や、ページ単位・記事単位でシンボルとなります。メインとなるキーワードを含めたタイトルを設定します。 タイトルを設定する上で意識すべき視点が2つあります。 将来のお客さまとなりえる人からの視点Googleからの視点『人からの視点』と『Googleからの視点』でタイト

現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実