Warning: I recommend you up to 200 x 200 Changes will not affect the sample image, only the final product.
Warning: I recommend you up to 200 x 200 Changes will not affect the sample image, only the final product.
無料で使える背景パターンジェネレータを集めてみました。 背景パターンはWebサイトに限らず様々なところで使われます。ざらざらした感じのテクスチャやストライプ模様、イラストのリピートなどなど。Photoshopなどで実際作ろうと思うと結構大変なんですが、簡単なものならブラウザ上で作れるパターンジェネレータがおすすめ。 無料のツールでも画像としてダウンロードできたり、かなり細かい設定ができるものもあるのでお気に入りのものがあればブックマークしておきましょう。 無料で使える背景パターンジェネレーターまとめ patternico パターンに使いたい模様や画像をアップロードしてオリジナル背景パターンを作成できるツール。あらかじめ用意されたプリセットもあり、カラーの変更も可能。作成した背景は画像としてダウンロードすることができます。 Tartanmaker チェック柄の背景パターンを作成できるパターン
テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。 いずれもカスタマイズといっても簡易的なものばかりでほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。 また、あまりdata属性を使ったことがないという人はこういう使い方もあるということで参考にしてみてください。 ここで紹介している内容はdata属性を利用した実装サンプルのひとつとして紹介しており、擬似要素で表示させているテキストはあくまで装飾目的で表示している想定になります。 SEOやスクリーンリーダー対応などに影響があると考えられる場合は、しっかりとマークアップしたもので実装してください。 補足テキストを表示 #1 見かけることが多いと思う、ナビゲーシ
と似たような内容になりますが、ショップページに商品を陳列する際スペースがない場所でも自動でスクロールさせて動かすことで、多くの商品をお客さんの目に止めることが可能になります。 本日は、縦にも横にも画像などの要素をスクロールさせる方法を紹介したいと思います。 画像を縦横にスクロール「simplyscroll.js」では、具体的にどんな表示イメージかというと 本日は無料化で何かと話題なYahoo!ショッピングから紹介したいと思います。 こちらのショップ 靴ショップやまう ページ中ごろにある「瞬足」が並んでいる部分を見てもらうと画像がスクロールしています。 実装方法についてsimplyscrollの公式サイトより、jquery.simplyscroll.zipをダウンロードしてください。 ダウンロードしたファイルの中から 「jquery.simplyscroll.js」 「jquery.simp
ネットショップ運営[楽天・ECサイト]に関する情報 便利ツール Webサービス CSS Javascript jQueryなど紹介していきます 楽天などのネットショップ、ECサイトで商品画像が横に自動的にスライドしている見せ方を見た事があるかと思います。 限られたスペースを有効活用した商品の陳列方法でページ内で過度に動きをつけすぎると表示が重たくなる可能性がありますが、バランスを見て利用すれば注目を集めやすいパーツとして活用出来るのではないでしょうか。 本日は、その方法について実装方法、サンプルソースを紹介します。 商品画像を横に自動スライドさせて動かすjQueryプラグイン[endless_scroll_min.js] 例えば、楽天ショップオブザイヤーでの受賞の常連アウトレットシューズ ↓↓↓のエリアを見てもらうと商品画像が←にスライドして入れ替わっています。 (↓↓は画像なのでわかりに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く