[CSS] 位置(position),表示(display)スタイル

Study / Javascript, Jquery, Css    作成日付 : 2019/12/13 20:08:50   修正日付 : 2020/01/29 22:58:35

こんにちは。明月です。


前述からCSSのスタイルに関して纏めています。

今回は要素の表示タイプと位置(postision）に関して調べてみます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: gray;
      }
      div {
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="item">item</div>
  </body>
</html>

div.item {
  /*表示スタイル*/
  display: initial;
  /*位置オプション*/
  position: absolute;
  /*上から位置*/
  top: 100px;
  /*左から位置*/
  left: 100px;
  /*要素の幅*/
  width: 200px;
  /*要素の縦*/
  height: 300px;
}


上の例を見ればスタイルで「display」を使いました。

displayは要素のスタイルの形態を決めるものです。

displayの要素の値には下記とおりにあります。

値 説明
inline 要素をインライン要素（<span>など）として表示します。 高さと幅のプロパティは効果がありません。
block 要素をブロック要素（<p>など）として表示します。 新しい行から始まり、幅全体を占有します。
contents コンテナを非表示にし、要素の子要素をDOMの次のレベルに上げます。
flex ブロックレベルのフレックスコンテナとして要素を表示します。
grid 要素をブロックレベルのグリッドコンテナとして表示します。
inline-block 要素をインラインレベルのブロックコンテナとして表示します。 要素自体はインライン要素としてフォーマットされますが、高さと幅の値を適用できます。
inline-flex 要素をインラインレベルのフレックスコンテナとして表示します。
inline-grid 要素をインラインレベルのグリッドコンテナとして表示します。
inline-table 要素はインラインレベルの表として表示されます。
list-item 要素を<li>要素のように動作させます。
run-in コンテキストに応じて、要素をブロックまたはインラインとして表示します。
table 要素を<table>要素のように動作させます。
table-caption 要素を<caption>要素のように動作させます。
table-column-group 要素を<colgroup>要素のように動作させます。
table-header-group 要素を<thead>要素のように動作させます。
table-footer-group 要素を<tfoot>要素のように動作させます。
table-row-group 要素を<tbody>要素のように動作させます。
table-cell 要素を<td>要素のように動作させます。
table-column 要素を<col>要素のように動作させます。
table-row 要素を<tr>要素のように動作させます。
none 要素は完全に削除されます。
initial このプロパティをデフォルト値に設定します。 初期について読みます。
inherit 親要素からこのプロパティを継承します。 継承について読みます。

「div」タグは基本displayが「block」に設定されています。「block」の場合は「width」が基本「100%」です。

なので上の例では「display」を「initial」に設定して「width」を設定しました。


また「position」のスタイルは要素の位置を決めるものです。

基本的にHtmlタグはとキュメンとスタイルで上から下、左から右方法で作成します。でも要素によって位置を変わりたい時がありますね。その時に使います。

値 説明
static デフォルト値。 文書フローに表示されるように、要素は順番にレンダリングされます。
absolute 要素は最初に配置された（静的ではない）親要素に対して配置されます。
fixed 要素はブラウザウィンドウに対して相対的に配置されます。
relative 要素は通常の位置を基準にして配置されるため、「left：20px」は要素の左位置に20ピクセルを追加します。
sticky 要素は、ユーザーのスクロール位置に基づいて配置されます。
スティッキー要素は、スクロール位置に応じて、相対要素と固定要素を切り替えます。 ビューポートで指定されたオフセット位置が満たされるまで相対的な位置に配置されます-そして、（position：fixedのように）所定の位置に「固定」されます。
注：IE / Edge 15以前ではサポートされていません。 -webkit-プレフィックス付きのバージョン6.1のSafariでサポートされています。
initial このプロパティをデフォルト値に設定します。
inherit 親要素からこのプロパティを継承します。

上の例は「absolute」で設定しました。「div」の親要素は「body」なので、画面の一番上、左、基準で「top」が「100px」、「left」が「100px」を設定します。


「position」と「display」はよく使わないみだいですが、たくさん使うしすごく大事なスタイル設定です。

特に「display」で「none」設定を利用して見えたり、見えなかったりする動的な設定を作ることができるし、「position」で「fixed」や「absolute」を設定してメニューの位置を決めるし動的に動くこともできます。

<style>
  .test:hover {
    display:none;
  }
</style>
<input type="button" class="test" value="これをクリックできますか？" onclick="alert('まじで？');" >

例


上の例はマウスをボタンの上に置くとhoverの選択子によって「display」を「none」に設定します。

つまり、マウスを上に置くとボタンがなくなりますね。お試してください。

◀前の投稿[CSS] border(枠)、余白スタイル - border, margin, padding
次の投稿▶[CSS] 整列スタイル (float)
#css,#position,#display
「Study / Javascript, Jquery, Css」の他投稿
最新投稿