MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインCSSのpositionでrelativeとabsoluteの使い方2019.10.04CSSCSSの書き方HOMECSSCSSのpositionでrelativeとabsoluteの使い方CSSのpositionプロパティとpositionの値に指定ができるrelativeとabsoluteを使用すると、ボックスの表示位置をコントロールすることができるようになります。positionでrelativeとabsoluteの使い方は使い慣れないと少し難しさを感じることがありました。使い方のコツを掴めば、そうでもないのですが使い方のポイントとしては、どの要素を表示位置の基点にするかです。まとめCSSのpositionの使い方CSSのpositionプロパティは、ボックスの表示位置を指定するときに使います。HTMLの要素が形成するボックスの表示位置を決めるために要素をセレクタにしてpositionプロパティを指定します。positionにはいくつかの指定できる値があり、何も値を指定しないと初期値のstaticが適用されます。このstaticの値は位置調整してもCSSが効きません。初期値を変更してボックスの位置を相対位置か絶対位置かを指定することができます。このときの指定できる値に「relative」と「absolute」があります。relativeは元の表示位置から相対的に要素の位置を動かしたいときに指定する使い方ができます。相対的な位置とは「本来あるべき場所を基準とした位置」を意味します。これを踏まえてpositionで指定するrelativeの使い方は、position指定した要素を本来あるべき場所を基点とし表示位置をコントロールする使い方ができます。実際に元要素にCSSでrelativeを使ってボックスの表示位置を指定してみます。<h2></h2></div>positionを指定するHTML要素はdiv要素を親として、h2を子要素にしてます。relative;}CSSはサンプルのh2が元の位置が表示位置の基点になるように「relative」を指定します。これでサンプルのh2の表示位置を調整できるようになります。実際の表示位置は指定していないので表示位置を調整するCSSを指定すると位置を移動できます。以下の説明で位置調整をしていきます。relativeの位置調整positionのrelativeを要素(サンプルはh2)に指定したら、ボックスの基点から上下左右に位置調整をするCSSを使います。上記の画像はコードサンプルに使用しているh2要素、つまりrelativeを指定してる要素を基点にして位置をずらしています。この場合の指定するCSSの使い方は以下のようにCSSを書きます。40px;}表示位置の調整に関係してるCSSは12行目の「top」と13行目の「left」です。CSSで基点の要素(サンプルならh2)の上からtopで25pxずらす、横はleftで40pxずれて移動してます。このときに表示位置を右からなら「right」下からなら「bottom」も使えます。relativeの使い方を一旦まとめます。relativeを指定する具体的な位置調整は「top」「left」「right」「bottom」を組み合わせて配置するという使い方です。absoluteも使う場合」はどのような使い方をするのかを以下から説明します。Advertisementpositionでabsoluteの使い方CSSのposition指定で使う値のabsoluteは親要素を基点にボックスの表示位置を絶対位置で調節することができます。基点にする親要素にはpositionを指定して使うようにします。表示位置を指定するのに親要素を使ったり、rerativeとabsoluteを組み合わせたりと少しややこしくなるのもここからですが、ようは表示位置を調整したい要素をどこの基準に合わせて調整するかというだけのことなのです。それがpositionのrelativeとabsoluteに関しては、元要素を基準にするか親要素を基準に位置調整するかの違いだけの使い方が変わるというだけのことなんです。親要素にrelativeを使うここまでは元の要素を基点にボックスの位置を移動させましたが、positionにabsoluteも指定する場合にはpositionのrelative指定を親要素を基点にするために使います。HTMLとCSSのサンプルから見てください。<p>うちの猫のびびおくんがPCのキーボードの上に乗ってくるから部屋に戻ると謎の暗号が入力されてる。解読不可能</p></div>HTMLはここまでの説明と同じくdivが親要素でh2が子要素のボックスです。p要素も含めてみました。relativeを指定します。これで親要素のdivはh2のボックスの位置指定をするための基点にすることができます。親要素を基点にする場合のpositionの使い方では「表示位置を調整したい要素の親要素にrelativeを指定」します。実際に位置指定する要素(サンプルならh2)、つまり子要素にはabsoluteを指定します。absolute「セットで組み合わせた使い方をする」と覚えておくいいかと思います。absoluteを指定します。absoluteは絶対位置で指定ができます。絶対位置の場合は、間に他の要素があっても指定する位置が絶対の表示位置になります。親要素の中に3つの要素があるとして一番下の要素をabsolute指定して表示位置をtop:0;とleft:0;で指定した場合などには、その間の要素を飛び越えて親要素の左上の表示位置をします。難しいですが使えるようになるとデザインするテクニックの幅が広がります。absoluteを指定したボックスの表示位置を調節して終わりたいと思います。親要素を基点に指定した子要素のposition:absoluteの位置指定の調整はrelativeで元の要素に指定したときと同じ使い方で「top」「left」「right」「bottom」を組み合わせて位置調整できます。absoluteを指定しただけの表示位置です。この表示位置から「top」「left」「right」「bottom」を指定して表示位置をコントロールします。左上の配置はtop:0とleft:0を指定します。右上の配置はtop:0とright:0の組み合わせで指定します。左下の配置ならbottom:0とleft:0の指定をします。右下に配置するならbottom:0とright:0を組み合わせて位置調整します。「top」「left」「right」「bottom」の位置指定はマイナス値も受け付けます。-15pxで親要素の右上を突き抜けて配置することができます。まとめCSSのpositionプロパティとpositionの値に指定ができるrelativeとabsoluteを使って、元要素や親要素を基点にしてボックスの表示位置をコントロールする使い方でした。今回紹介した使い方はpositionのrelativeとabsoluteの使い方の基本的な内容です。基本的なことを応用したりアイデア次第ではボックスのデザインをするレパートリーの幅は広がるのではないかと思いますので、暇な時間があるときにでもボックスをごにょごにょとデザインして今後に活かしてみてください。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2020.01.21ときどき、検索して開いたサイト先で記事を読んでるとテキストの途中で分からない単語があります。2019.09.04CSSの基本的な書き方に使用する「セレクタ」「プロパティ」「値」の使い方を理解しながら実際にCSSをどのように書けばいいのか理解できるようにします。WordPress.。