ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法
背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法
画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法
「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とは
CSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線(ボーダー)」を付ける方法【 outline 】「枠線(ボーダー)」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法
CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加
CSSプロパティ【背景関連】
【 background 】背景を設定する方法
CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅(フェイス)を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字(漢字)と非表意文字(半角英数字)の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法
CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定
CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する





【CSS】【position】コンテンツの配置位置を指定する方法

【CSS】
【position】プロパティ
コンテンツの配置位置を指定する方法




「position」プロパティは、
画像や文章などの配置位置を指定するプロパティ。

「position」プロパティだけでは、
配置を指定することができない。
「position」は、配置の基準を指定するプロパティ。

配置指定するのに、必要なプロパティは、

・position
・top
・bottom
・left
・right

など。
「position」プロパティ以外のプロパティで、
実際に配置される場所の位置指定をサイズで記述する。

サイズ指定する基準位置は、
「position」プロパティで指定する。
指定する値によって、
基準位置が異なるので、
指定値による違いの確認が必要。

慣れるまで、
基準位置の考え方が複雑。
使用していくうちに慣れます。






「position」プロパティの使い方


「position」プロパティは、
レイアウトデザインでは、よく使われるプロパティの一つで、
「position」で、配置形式を選択して、
「top」「bottom」「left」「right」を使って配置位置を指定します。


「position」プロパティを使うコツ

「position」プロパティは、
機能してくれない時があります。
そんな時は、下記をチェック。

・ブロック要素になっていること
・幅の指定がされていること
・重ねて表示させる場合は、手前のレイヤーを指定している(z-index)

などです。
他にもあるかもしれませんが、
今、思いつくのはこれだけ。

最初の頃は、なぜ機能しないのかわからないことが多かったですが、
必ず原因があるので、
経験を積むしかありません。




「position」プロパティの値

「position」で、指定できる値は、

・static
・relative
・absolute
・fixed
・sticky

など。
各値には特徴があり、
指定すると、「基準点」が変わってくる。



説明
static 「static」は、
デフォルトの設定値で、文書の通常のフローに従って配置される。
「top」「right」「bottom」「left」「z-index」プロパティは効果がない。
relative 「relative」が指定されると、「static」と同じ、通常の配置位置に配置され、
「top」「right」「bottom」「left」に値を指定して、位置をコントロールします。
「z-index」の値が「auto」でない場合、新しいレイヤーを作成して配置する。
「table-*-group」「table-row」「table-column」「table-cell」「table-caption」への指定は未定義。
absolute 「static」の配置とは異なり、
通常のページレイアウトではなく、直近の親要素、もしくは、ページの最上部を基点として、
「top」「right」「bottom」「left」の値を指定して配置位置を指定する。
「z-index」の値が、「auto」ではない場合、
新しいレイヤーに作成される。
fixed 「static」の配置とは異なり、
通常のページレイアウトではなく、
絶対位置への配置となる。
「absolute」と同じだがが、
スクロールしても位置が固定されたままになる。
印刷文書の場合、要素は各ページの同じ位置に配置されます。
sticky 「sticky」を指定すると、
その親要素が「Sticky Container(スティッキーコンテナ)」となり、
スクロールすると、
「sticky」を指定した要素だけが、
その場に固定されています。
そのような要素を「粘着要素」という。
配置位置は、「top」「right」「bottom」「left」で相対的に、位置指定します。
「sticky」は、常に新しいレイヤーに作成されます。
「粘着要素」は、直近の親要素がスクロールしない場合でも、
親要素に「粘着」する。
inherit




位置の種類

位置指定要素 位置指定要素とは、
「position」の設定値が、
「static」以外の「relative」「absolute」「fixed」「sticky」のいずれかである要素。
相対位置指定要素 相対位置指定要素とは、
「position」の設定値が、「relative」である要素。
「top」「bottom」プロパティは、垂直方向のオフセットを指定。
「left」「right」プロパティは、水平方向のオフセットを指定。
絶対位置指定要素 絶対位置指定要素とは、
「position」プロパティで、
「absolute」「fixed」を指定する。
「top」「right」「bottom」「left」で、親要素の各辺からのオフセットを指定する。
要素にマージンがある場合は、オフセットにマージンが追加される。
この要素は内容のために新しい ブロック整形コンテキスト (BFC) を生成する。
粘着位置指定要素 粘着位置指定要素とは、
「position」の設定値が「sticky」の時は、
親要素の中で、位置が固定され、スクロールしても、
その位置に止まるように配置(粘着)され、スクロールの終端に到達すると、 終端位置に固定される。逆方向も同じ動きをする。



Back