タグ

2021年4月13日のブックマーク (2件)

  • 【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)

    positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか? 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。(わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください) 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlcssをご確認ください。 html

    【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
    k75mix
    k75mix 2021/04/13
  • 【jQuery】【パララックス】時間差スクロールで奥行きのある動作を実装する方法

    それぞれのレイヤーごとのスクロール速度をずらことで、奥行きの感じられる動作を実装することができます。 今回は、jQueryを使って、背景画像の縦スクロールと横スクロールのパララックスを実装してみます。 ・縦の時間差スクロールサンプルページ ・横の時間差スクロールサンプルページ html <body> <head> <link href=style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="scroll.js"></script> </head> <div id="scroll_bg01"> <div id="scroll_bg02"> <div id="scroll_bg03"> </

    【jQuery】【パララックス】時間差スクロールで奥行きのある動作を実装する方法