Category : CSS

READ MORE

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

READ MORE

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

READ MORE

Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。そんなマテリアルデザインの一種としてボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。その動作をjQueryとCSSを使って実装するマテリアルデザイン風ボタンを作ってみたので紹介してみます。マテリアルデ…

READ MORE

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオー…

READ MORE

レスポンシブサイトではウィンドウの幅(画面解像度)によってレイアウトの調整や動作処理の制御を行います。ウィンドウサイズ(画面幅/高さ)の取得方法に関してはスクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用…

READ MORE

iPhone6 / iPhone6 Plusの登場によりWebサイトを作る上で今まで以上に画面サイズのバリエーションを数多く想定しなくてはならない状況になってきました。中でも「iPhone6 Plus」は解像度が1920×1080と大きく、タブレットに近いサイズにまでなっておりこの先、Webページを作成する際に「iPh…

READ MORE

WindowsXPのサポートも終了し、この先はWebサイト制作においてIE8を対象外にできる状況が増えることが想定されCSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。そんな中、最近あちこちで話題になっていた複雑なCSS3アニメーションエフェクトを簡単に実装することが扱うことが可能になる「iHove…

READ MORE

レスポンシブ対応を求められるWebサイト制作ではナビゲーションメニューの構成について何かと気を使わなくてはいけない点が出てきます。ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルがそこそこ溜まっていたので11種類ほどま…

READ MORE

以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】」と題して、CSSアニメーションの実行パターンをいくつか紹介しましたが、アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が簡単でいろいろとこの先使えそうだった…

READ MORE

スマートフォン向けサイトを構築する際などでは特にページのレンダリングスピードが重要視されます。構築する際のページ構成について考慮することも重要ですが、可能な限りページ上で<img>タグや背景での「画像」の使用を控えることが有効だったりもします。そこで、アイコンなどの小さいパーツを「画像」として使用せずに簡単にサイト上に…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner