READ MORE

Webページ上で左右に違う背景を連続させるのは以前はわりと手間のかかることでしたがCSSの進化と共に疑似要素やグラデーションを使ってとても簡単に実装することが可能になりました。そんな背景を左右で違うものを連続させる方法についてCSS疑似要素の「:before」と、CSSグラデーションを使った2パターンで実装する方法を紹…

READ MORE

Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。そんな時に使える横スクロールさせるエリアが出現した時にアニメーション付きのアイコンを表示してそのエリアが横スクロールできることを…

READ MORE

会員登録などの入力フォームでメールアドレスの登録ミスをしないようにメールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー&ペーストができないようにする仕様がよくあります。このUIの良し悪しは別として、そのような入…

READ MORE

ポスターやフライヤー、名刺やロゴ、SNS用画像などのさまざまなグラフィックデザインをクオリティの高い素材を使ってブラウザ上でドラッグ&ドロップで簡単に作成できてしまうオンラインサービス「Canva(キャンバ)」がとても便利に活用できそうだったのでご紹介。ポスターやフライヤーなどのグラフィックデザインを無料で簡単に作成す…

READ MORE

以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題してjQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたがそれを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。jQueryでマウス動作が止まった…

READ MORE

制限時間10秒で画面上に並べられた100個の「いいね」ボタンをいくつ押せるかひたすら「いいね」ボタンを押しまくるだけの暇つぶしゲーム「NICE100」。会社の仲間内でノリで作ってしまったゲームですがせっかくなのでここでリリースしてみます。制限時間10秒で100個の「いいね」ボタンをいくつ押せるか競う暇つぶしゲーム「NI…

READ MORE

Webページ上のリンクボタンは四角いものが主でしたが、CSSの進化によっていろいろな形状でのリンクボタンを簡単に作成することができるようになってきています。そんな中でも最近Webページ上の表現でよく見かける六角形のリンクボタンをCSSを使って構成する方法について2パターンの形状で紹介してみます。CSSで六角形(ハニカム…

READ MORE

情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。アンカーリンクで移動した位置に固定ヘッダ…

READ MORE

jQueryを使ってのマウス操作の判別処理は「hover」「mouseover」「mousemove」「mouseout」などといったマウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますがマウス動作が止まった時「mousestop」のようなものは存在しません。そんな要素の上でマウス動作が止まった時…

READ MORE

スクロールすることによってサイドカラムに配置しているナビゲーションメニューを画面上部に固定してスクロールに合わせて追従させる動作はよく見かけますがだいたいが画面上部に固定のみ、もしくは画面下部に固定のみ、といったものが多くブラウザウィンドウの高さよりもナビゲーションメニューの高さが大きかった場合にはナビゲーションメニュ…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner