講師コラム

初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 前編

  • このエントリーをはてなブックマークに追加

はじめに

今回からCSSプロパティの中でも配置について設定が行えるpositionについて前後編に分けて解説していきます。

様々なシーンで活用できる設定のため、使いこなすことが出来れば、より洗練されたホームページを作ることができるようになります。
それでは早速positionの基本の動きから見ていきましょう。

positionって何?

positionは前述の通り要素の配置に関して制御が可能になるプロパティです。
このプロパティでは

positionプロパティの相対位置と絶対位置の説明

  1.  その要素が本来ある位置を基準とする方法 (相対位置)
  2.  直接配置場所を設定して配置する方法 (絶対位置)

を選ぶことが出来ます。
具体的な位置はtop、right、bottom、leftプロパティを組み合わせて指定します。

position プロパティを使用すると、画像と画像を重ねたり、画像と文字を重ねたり、ということが簡単にできるようになります。

positionプロパティを使って画像や文字を重ねる

画像編集ツールが使用できる方は画像を加工してしまえば簡単ですが、画像の一部分だけの変更が頻繁にある場合や、画像をリンクボタンに設定する場合CSS で表現するとメンテナンスを容易にすることができます。また、CSSで画像の上に表示されているテキストは検索エンジンが認識してくれるので SEO 効果が期待できるというメリットがあります。

positionプロパティの値の種類、意味

static(初期値)

何も指定しない場合の初期値。
レスポンシブなど、プロパティを初期化が必要な場合に使用します。
この値のときは、
位置を指定するtop、bottom、left、right
重ね順を指定するz-index
は適用されません。

static(初期値)では位置指定や重ね順の指定ができません

位置や重ね順を変更する場合はstatic以外を指定する必要があります。

relative

相対位置への配置が指定されます。
初期配置を基準に上下左右に移動させることができます。

relativeは元の表示位置を基準に位置を指定します

absolute

親要素を基準に絶対位置への配置が指定されます。

親要素にpositionが指定されていないとブラウザが基準値になりますが、親要素にstatic以外が指定されている場合は親要素を基準に配置を指定することができます。

absoluteはブラウザまたは親要素を基準に位置を指定します

■ 親要素がstatic(positionを指定しない)の場合
→ ブラウザ表示エリアが基準位置
■ 親要素がstatic以外の場合
→ 親要素が基準位置

画像や文字を重ねる場合は親要素をrelative、子要素にabsoluteを指定して重なりを表現することが可能です。

親要素をrelativeに子要素をabsoluteにすると親要素を基準に重ねることができます。

fixed

ブラウザの表示エリアを基準にした絶対位置への配置が指定されます。
fixedで指定した場合、スクロールしても位置が変わりません。

fixedはスクロールしても同じ位置に固定出来ます

このプロパティが使用される代表的な例としては

  • グローバルナビゲーションメニュー(メインメニュー)
  • ページの一行目に戻るための「一番上(トップ)に戻る」ボタン
  • サイドメニュー、ブログカテゴリやタグの一覧、広告エリア

などです。
縦に長いページでも常に同じ位置に固定することができるため、特にメニュー項目などの案内パーツへの設定がよく見られます。

relativeとabsoluteの動きの違い

relativeとabsoluteはその動きの特性から対で説明されます。
それぞれのプロパティで「left : 20px」を指定した場合の違いを見てみましょう。
※子要素がabsoluteの場合は親要素をrelativeに設定しています。

【補足】
上の例では左側を基準にしていますが、プロパティで上、下、右を基準にすることも可能です。
右が基準になる場合はこの様に移動します。

まとめ

今回はpositionプロパティの概要についてでした。
慣れるまでは少し混乱してしまうかもしれませんが、配置に関する重要なプロパティなので理解しておいて損にはなりません。
使いこなせるようになると自由度が上がりホームページのクオリティが一気に上がりますので是非色々と試してみてくださいね。

後編では今回の内容をもとにコピペで使用できるコードをご紹介していきます。
初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 後編

よろしければこちらもご覧ください

marginとpaddingの違いと使い方
tableを使わずdiv要素を横に並べる方法

  • このエントリーをはてなブックマークに追加

話題をチェック!

2017年6月30日

「真似して」「学ぶ」スタイル

新入社員の皆さまも、もうだいぶ職場になれたころでしょうか?もしかしたら、職場にとけ込むことが、精一杯で、まだまだ自分ひとりでは業務を遂行することが難しいという方の方が多いかもしれません。 正直なところ、新入社員に対して  …続きを読む

2017年5月25日

SNSの危険性を忘れていませんか?

パソコンは一人一台以上、スマホ等のモバイルデバイスの普及によって、日常的にインターネットの世界とふれる時代となりました。それに伴って、年代や社会的地位を問わずSNS(ソーシャル・ネットワーキング・サービス)が一般的に利用 …続きを読む