Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

目指せ!positionマスター!

使用ソフト: Dreamweaver  

レイアウトに便利なposition!

ようこそ!Dreamweaverの世界へ!
君がこの記事を見ているということはコーディングにもだいぶ慣れてきた頃なのではないか?今回は筆者も苦戦した「position」を出来るだけわかりやすく説明してみようと思う!
では、レッツゴーー!

positionとは

positionとは、ボックスの配置方法(基準位置)を指定するプロパティです。
指定するには・・・

なに?・・え?もう言ってる意味がわからないって?
まぁ、要するに「自分で基準を決めて、配置する方法」ってことさ!

わかりやすいだろう!(どや)

・・え??わかんない!!?うーん・・・

君が「これはここ!」ってしたい時に使う方法だ!わかれ!次行くぞ!

表示位置の指定

配置したい数値を入力する時使うのが下の4つだ!

  • top
  • right
  • bottom
  • left

わかりやすく言うと、

  • 上から
  • 右から
  • 下から
  • 左から

っていう意味だ。

例えば
{top:10px;}
は「上から10pxの場所に配置する」っていう指示になる。
もっと下に配置したいからってbottomを選ばないように注意だ!

基準位置の指定

基準の四天王を紹介だ!

static
特に配置方法を指定せず、通常の位置に配置します(初期値)。この値の場合はtop、bottom、left、rightを併用しません。
relative
通常の位置を基準とした、相対位置への配置を指定します。
absolute
包含ブロック(直近の祖先要素でポジショニングされた要素、もしくはウインドウの内容領域)を基準とした、絶対位置への配置を指定します。
Fixed
ウインドウを基準とした絶対位置への配置を指定します。absoluteと異なり、スクロールしても同じ位置に固定します。
出典:positionとは|コーディングのプロが作るCSS辞典
https://html-coding.co.jp/annex/dictionary/css/position/

四天王をもっとわかりやすくいうと、

static
そのまま。
いま、君が画面で見えている配置そのまま。
→四天王の中でも最弱。使わない。入力しなくて良いぜ。
relative
動かす。または基準にもなる。
さっき、君が画面で見ていた位置を基準に動かす。
→四天王最強。位置の微調整とかに便利だぜ!割と使う。absoluteがある時は基準の役割にもなるぜ!
absolute
relativeを基準に動かす。
→四天王の無口担当。基本relativeとセットで使うからrelativeいないとダメ。単独で使うことはない。
Fixed
固定する。
いま、君が画面で見ている場所で固定する。
→四天王の中で一番忠実。素直。スクロールしてもずっと同じ場所にいるぜ!

absoluteとrelative

さっきも言ったとおり、absoluterelativeとセットで使うものだ。
relativeで基準を決めて、そこから文章でも画像でもそこを基準にabsoluteとtop/left/bottom/rightを組み合わせて配置できるぜ!

こんな感じだ↓

注意としては、absoluteは一番近いところのrelativeを基準にするんだ!だからcssに書く時は近くに書いてやれよ!約束だぜ!

まとめ

自分が今何を基準にしているかわかれば使いやすい奴らだっただろう!みんな根は良い奴なんだ。
これからも仲良くしてやってくれよな!!

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

関連記事

  1. Web

    cssだけで、グラデーション入りのラインを作る!

    cssの擬似要素を使った、グラデーション入りのボーダーラインを作りまし…

  2. Web

    【実例サンプルあり】簡単に実装できるcssスニペット集

    この記事では、短いコードで実装可能なcssプロパティを紹介して…

  3. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

  4. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

  5. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  6. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

人気の記事

おすすめの参考書

PAGE TOP