MOREWebページ上で左右に違う背景を連続させるのは以前はわりと手間のかかることでしたがCSSの進化と共に疑似要素やグラデーションを使ってとても簡単に実装することが可能になりました。MOREWebページ上のリンクボタンは四角いものが主でしたが、CSSの進化によっていろいろな形状でのリンクボタンを簡単に作成することができるようになってきています。そんな中でも最近Webページ上の表現でよく見かける六角形のリンクボタンをCSSを使って構成する方法について2パターンの形状で紹介してみます。MORE情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。MOREWebサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。そんなマテリアルデザインの一種としてボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。その動作をjQueryとCSSを使って実装するマテリアルデザイン風ボタンを作ってみたので紹介してみます。MORE古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。MOREレスポンシブサイトではウィンドウの幅(画面解像度)によってレイアウトの調整や動作処理の制御を行います。Plusの登場によりWebサイトを作る上で今まで以上に画面サイズのバリエーションを数多く想定しなくてはならない状況になってきました。MOREWindowsXPのサポートも終了し、この先はWebサイト制作においてIE8を対象外にできる状況が増えることが想定されCSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。MOREレスポンシブ対応を求められるWebサイト制作ではナビゲーションメニューの構成について何かと気を使わなくてはいけない点が出てきます。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。