cssの自分用メモ覚書

以前に調べた数々のパターン化されたcssのコードを、毎回PC内のメモを開いて書いてあったページなりを調べる始末・・・
自分の脳に染み込ませる目的で、メモとしてこのページを活用します。特にそれぞれに繋がりがあるわけではないので、掘り出し物的に参考にしていただければと覆います。

①position:absoluteで親要素の真ん中に配置する

position:absolute;
top:50%;
left: 50%;
transform:translateX(-50%) translateY(-50%);
text-align:center;

X軸方向だけ真ん中に配置したい場合は、

transform:translateX(-50%);

②指定幅のボックスより文字数が超える場合は「…」を表示する

ニュースの一覧などを作成する際に活用できると思います。
（※この方法だと１行のみの表示になります。）

max-width: 500px; //幅を決める
text-overflow: ellipsis;  //{...}を挿入
overflow: hidden; //はみ出した文字を非表示にする
White-space: nowrap;  //2行以上にならないようにする

③sassでmediaqueryの書き方

まずはスマホ、タブレットのブレイクポイントを下記のように定義します。

$tab: 768px; // タブレット
$sp: 480px;  // スマホ

@mixin tab {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

あとは適用したいセレクタ内で下記の用に呼び出してプロパティを指定するだけ

.class {

  @include tab {
       width: 500px;  //タブレットの場合はwidth500pxを適用
  }

  @include sp {
       width: 200px;  //スマホの場合はwidth200pxを適用
  }
}

④:after, :beforeで文字の横に横線をつける

webページで各セクションのタイトル、またはサブタイトルの表示に活用できると思います。

.section-title {
  display: flex;  // 「テキスト」「前後の疑似要素」を横ならびにするイメージ
  align-items: center;
  font-size: 25px; //自由に決める
  color: #fff;  //自由に決める
  margin-top: 30px; 
  padding: 0 50px;  //各々の状況や文字の大きさによって線の長さを調整できます。
  
  &::before,
  &::after {
    border-top: 2px solid #fff;
    content: "";
    flex-grow: 1;
  }
  &::before {
    margin-right: 1rem;
  }
  &::after {
    margin-left: 1rem;
  }
}