GradPadは、直感的な操作でグラデーションが作成できるCSSグラデーションジェネレーターです。 GradPadの使い方 GradPadにアクセスして、開始色・終了色などを指定していきます。下側にあるメモリでは透過度を…
短いページでもフッターをブラウザの最下部に表示させる方法
コンテンツの量が少ないページでは、フッター部分が浮き上がって表示され、フッターの下に余白ができてしまいます。これを回避するために、コンテンツの量が少なくてもフッターがブラウザの最下部に表示されるようにする方法をご紹介いた…
CSSだけで全画面の背景動画を実装する方法
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 CSSだ…
CSSで文字を縦書きにする方法
何も指定しなければ、HTMLで記述した文字列は横書きになります。和風のサイトなどでは、文字を縦書きにしたい時もあるかと思います。 画像を使うという方法もありますが、今回はCSSを使って文字を縦書きにする方法をご紹介したい…
CSSだけでひし形(ダイヤモンド)を作る方法
画像を使わずに、CSSだけでひし形(ダイヤモンド)を作る方法をご紹介いたします。 要素を傾けることで、簡単にひし形を実現することが可能です。 CSSだけでひし形(ダイヤモンド)を作る方法 CSSだけでひし形を作成するには…
ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法
ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。 簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。 デモページを見る ボ…
スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)
背景画像を固定して中のコンテンツだけをスクロールさせるページを作成していたところ、スマートフォンでは「background-attachment:fixed;」が効かないことに気付きました。 スマートフォンでも背景画像を…
CSSで背景画像に半透明のレイヤーを重ねて背景のみを暗くする方法
背景画像の上にテキストを重ねた場合に、背景画像だけを少し暗くして上に重ねた文字を際立たせたいことってあるかと思います。 画像自体を編集しても良いのですが、CSSだけでも背景画像の上に半透明のレイヤーを重ねることはできます…
CSSの::beforeや::afterのcontent内で改行させる方法
CSSの擬似要素である::beforeや::afterのcontent内で改行させる方法をご紹介いたします。 CSSの::beforeや::afterのcontent内で改行させる方法 ::beforeや::afterの…
固定ヘッダーを実装している際にアンカーリンクの移動位置がずれるのを解消する方法
ヘッダー部分を「position:fixed;」で固定してスクロールに追尾させていると、アンカーリンク(ページ内リンク)への移動時に、固定したヘッダー部分の高さ分、移動先の位置がずれてしまいます。 正確には、位置がずれる…