【クリック率UP】カーソルをホバーすると沈むボタンを実装する
HTMLとCSSだけでカーソルをホバーすると、以下のような沈み込むようなボタンを簡単に実装することができます。 ホバーすると沈みます 私自身、他の所有しているメディアのボタンを沈み込む上記のようなボタンに変えただけで、CTR（クリック率）が約2倍になりました。（というか、以前ボタンデザインした時は自 […]
TAG
html
Media Queries(メディアクエリ)でサイトをレスポンシブにする
「モバイルファースト」をスローガンにスマホ最適化が必須となっているこの時代において、サイトのレスポンシブ対応は避けては通れない道です。 この記事ではMedia Queries(メディアクエリ)を用いてサイトをレスポンシブ対応にする方法をご紹介します。 サイトのレスポンシブ化とは サイトのレスポンシブ […]
【IE/Safari対応】特定の要素を上下左右で中央揃えするCSS
要素をCSSで上下中央にピッタリ揃えたいと思っても、IEやSafariで若干ズレていたりしてモヤモヤ悩むことが多かったので、これを書いておけば大丈夫！というCSSを紹介します。 ▼利用シーン トップページの<h1>メッセージ等を画面の上下中央に寄せる ページローディングのクルクルするやつ […]
【header/footer共通化】htmlをphp includeする方法がおすすめ
この記事では、ヘッダー、フッターを共通化するにあたりおすすめの方法をご紹介します。 この度webの制作案件で100ページ超の案件を受注し、全てのヘッダー、フッターをいちいち更新していては死ぬ未来が見えたので、どのような環境下でも機能するヘッダー、フッターの共通化方法を探し回りました。 方法としては、 […]
display: inline-block;を指定した要素同士の隙間を埋める方法
display: inline-block:で指定した要素同士を横並びにすると、要素の間に謎の空白が生まれます。 デザインではこの隙間をピッタリ埋めるように指示されている時にこういうズレが起きると地味に手間がかかります。 どちらかにclassを当てて無理やり、水平方向にmarginをマイナスに当てた […]