タグ

ブックマーク / webdesign-trends.net (6)

  • コピペでOK!CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends

    Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書

    コピペでOK!CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
    satotaka99
    satotaka99 2020/08/27
    うるさくない品のいいアニメーションならあり。風景写真に蛍を飛ばすようなエフェクトも可能。
  • Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴や使い方など | Web Design Trends

    Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非

    Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴や使い方など | Web Design Trends
  • SassのGUIコンパイラは「Prepros」がおすすめ!使い方と機能のまとめ | Web Design Trends

    Sassに挑戦しようと思ったけどコンパイルのための環境構築が難しそうでやめてしまった方も多いのではないでしょうか。Sassのコンパイルにはコマンドラインを利用する方法が主流ですが、実はGUIコンパイラを利用すればもっと簡単にSassファイルをコンパイルして、CSSに出力することができます。 今回は、SassのGUIコンパイラの中でも特におすすめの「Prepros」というツールについてご紹介したいと思います。 Sassとは Sassとは、CSSを拡張したメタ言語です。CSSをより柔軟に記述することができるのが大きな特徴で、数多くの便利な機能を利用することができます。CSSよりも学習コストがかかってしまう点がネックですが、一度習得してしまえばCSSを効率よく、メンテナンス性を高く記述することができます。 SassのGUIコンパイラとは Sassは記述してそのままだと利用することができないため、

    SassのGUIコンパイラは「Prepros」がおすすめ!使い方と機能のまとめ | Web Design Trends
  • いくつ知ってる?HTML/CSSの便利な小技・テクニックまとめ | Web Design Trends

    HTMLCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。 今回は、HTMLCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える 最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。

    いくつ知ってる?HTML/CSSの便利な小技・テクニックまとめ | Web Design Trends
  • WordPressのセキュリティを強化するための10個のチェックポイント | Web Design Trends

    WordPressはブラウザ上で簡単にWebサイトを管理することができ、多くのWebサイトがWordPressを使って公開されていますが、一方でアカウントが他の人に知られてしまうと誰でも簡単にアクセスできてしまうというリスクもあります。 WordPressにログインすると、ページの内容を改変したりWebサイトのコンテンツをすべて削除することができてしまうので、セキュリティ面には注意が必要です。 今回は、WordPressでWebサイトを公開する時に気をつけておきたいセキュリティ面の注意点をご紹介していきたいと思います。 【2023年最新】WordPressの使い方を徹底解説!初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのよ

    WordPressのセキュリティを強化するための10個のチェックポイント | Web Design Trends
  • ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends

    既存の枠に囚われず、自由に画像やテキストをレイアウトする「ノングリッドデザイン」のWebサイトがここ最近で多く見られるようになってきました。 近年オリジナリティがWebデザインに強く求められるようになってきていて、従来のルールに従わず、個性を強調したようなWebサイトが増えてきていますが、ノングリッドデザインはまさにその特徴的な例の1つです。 今回はノングリッドデザインについて詳しくご紹介していきたいと思います。 2019年に流行するWebデザインの最新トレンド18個まとめ そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか... Web Design Trends ノングリッドデザインとは 一般的なWebサイトでは、縦方向や横方向に区切って

    ブーム到来か。ノングリッドデザインの魅力と参考になるWebサイト | Web Design Trends
    satotaka99
    satotaka99 2018/07/23
    スマホだと普通のレイアウトになっちゃってそこまでノングリッド感ないな。
  • 1