PC版もちゃんと素敵！スマホ幅の見せ方を工夫したWebサイトデザイン事例12選 | デザインメモ 2.0
スマホに特化したLP（ランディングページ）って、デスクトップ幅でみると違和感のある見た目になっていることがありませんか？または、そういうデザインを作ったというデザイナー読者さんもいるかもしれません。 私自身も、ターゲットユーザーがスマホ閲覧多い&制作スピードが求められる場合、デスクトップ幅の対応はそんなにやらないこともありますが…わかってはいてもモヤッとするものです。 そんな折、ここ最近 スマホ幅にしっかり特化しているけど、デスクトップ幅でも綺麗にみせる工夫を凝らしたWebサイトデザインをちらほら目にするようになったので、改めて探してまとめてみました！ 【update】 2022/10/20 事例を3つ追加しました 2022/11/01 事例を2つ追加しました
CSSアニメーション例 上下左右に動く
アニメーションを適用する要素の基本プロパティ/値 前提として、CSSアニメーションを適用するクラスには、それぞれ次のプロパティ/値を設定しておきます。ラベンダー色の200x200のボックスです。アニメーションの開始状態によって少し値をいじりますが、都度解説します。 また、要素を動かすため（topプロパティやleftプロパティで操作するため）、positionプロパティをrelativeにしています（leftとtopの初期値として0を設定）。 CSS クラス名 { width: 200px; height: 200px; background-color: Lavender; position: relative; left: 0; top: 0; } CSS @keyframes moveToRight { 100% { left: 200px; } } .moveToRight { wi
【斜め背景】CSS＋jQueryでペンキを塗るようなアニメーションを簡単実装！ | スタッフブログ | 株式会社クーネルワーク
こんにちは、keishibukiでございます。 最近「斜め背景をガーッとペンキを塗るような感じでアニメーションさせて！」 という依頼がありました。 それってjavascriptとかゴリゴリに書かないと実装出来ないのでは？と思っていたのですが、思いの外CSSとjQueryの簡単な記述だけで作れました。 かなり簡単なので是非お試しあれ！ まずは斜め背景を作ってみよう！下記のような形になります。 HTML<div id="main"> <div class="layer-01"></div> <div class="layer-02"></div> <div class="content-width"> <div class="container"> <h1>コンテンツ</h1> <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。こ
CSSアニメーション15選！Webデザイナーのこだわりを実装できる厳選コード＆サンプル | Workship MAGAZINE(ワークシップマガジン)
ここ数年のWebサイト制作におけるフロントエンド技術の進化はめざましく、レイアウトも多様化しました。さらに、CSS3が公開されてからは、CSSだけで実装できる表現がの幅広がりました。従来はJavaScriptを使用しなければできなかったアニメーションなどもそのひとつです。 今回は、そんなCSSアニメーションを実装するのに便利な、厳選素材＆サンプルを15個ご紹介します！ CSSアニメの基本構造 CSSアニメーションは、JavaScriptで実装されたアニメーションよりスムーズで、JavaScriptが作動しない環境下でも使用することができます。シンプルなアニメーションであれば、パフォーマンスの観点からもCSSのアニメーションの方が良いでしょう。 実装方法も簡単です。アニメーションの動きや変化を記述したクラスを用意し、keyframesで開始点、中間点、終了点を指定します。アニメーションはユー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【20％OFF】「タカ書体」最新作もパッケージ版ならお得に!! - デザインポケット
