PC版もちゃんと素敵！スマホ幅の見せ方を工夫したWebサイトデザイン事例12選 | デザインメモ 2.0
スマホに特化したLP（ランディングページ）って、デスクトップ幅でみると違和感のある見た目になっていることがありませんか？または、そういうデザインを作ったというデザイナー読者さんもいるかもしれません。 私自身も、ターゲットユーザーがスマホ閲覧多い&制作スピードが求められる場合、デスクトップ幅の対応はそんなにやらないこともありますが…わかってはいてもモヤッとするものです。 そんな折、ここ最近 スマホ幅にしっかり特化しているけど、デスクトップ幅でも綺麗にみせる工夫を凝らしたWebサイトデザインをちらほら目にするようになったので、改めて探してまとめてみました！ 【update】 2022/10/20 事例を3つ追加しました 2022/11/01 事例を2つ追加しました
簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js" } } </script> <script t
CSSアニメーション15選！Webデザイナーのこだわりを実装できる厳選コード＆サンプル | Workship MAGAZINE(ワークシップマガジン)
ここ数年のWebサイト制作におけるフロントエンド技術の進化はめざましく、レイアウトも多様化しました。さらに、CSS3が公開されてからは、CSSだけで実装できる表現がの幅広がりました。従来はJavaScriptを使用しなければできなかったアニメーションなどもそのひとつです。 今回は、そんなCSSアニメーションを実装するのに便利な、厳選素材＆サンプルを15個ご紹介します！ CSSアニメの基本構造 CSSアニメーションは、JavaScriptで実装されたアニメーションよりスムーズで、JavaScriptが作動しない環境下でも使用することができます。シンプルなアニメーションであれば、パフォーマンスの観点からもCSSのアニメーションの方が良いでしょう。 実装方法も簡単です。アニメーションの動きや変化を記述したクラスを用意し、keyframesで開始点、中間点、終了点を指定します。アニメーションはユー
日本地図を簡単に扱えるjQueryプラグイン「JapanMap」 - 魔ッドアングラー
日本地図を簡単に扱えるjQueryプラグイン「JapanMap」 Japan Map ( jQuery plugin ) 都道府県をクリックできる日本地図 甲子園が始まるので代表校をまとめてみようと思い、日本地図をHTMLやCSSで表現できないかなーと探してみるとなかなか無いんですよね。テーブルで書くともの凄くややこしくなりそうだなと思っているところに「Japan Map」というjQueryプラグインに遭遇しました。 「canvas」というHTML5の機能を使用しており、美麗な日本地図が画像無しで使用できます。すごい！ プラグインをダウンロードする このページ上部にあるリンクから作成者様のサイトへ行き「Japan Map」の本体をダウンロードします。 「tar.gz」と「zip」がありますのでお好みの方でどうぞ。 そして、jQueryを動かすにはjQuery本体も必要ですので、無い場合は公
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
