nakazilab

サブカラム幅は固定したままメインカラムを可変幅にする

2022-04-14T08:11:43.884Z

サブカラムの幅は固定したまま、メインカラムをウィンドウサイズに応じた可変幅にするリキッドレイアウトです。

HTML(Pug)

.container
  .main main
  .sub sub

CSS(SCSS)

.container {
  display: flex;
  justify-content: space-between;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.sub {
  background-color: gray;
  width: 300px;
}
.main {
  background-color: gray;
  flex: 1;
  margin-right: 30px;
}

See the Pen サブカラム幅は固定したままメインカラムを可変幅にする by nakazilab (@nakazilab) on CodePen.

親要素に対して子要素を上下左右中央寄せする

2022-04-14T07:00:07.008Z

display: flexを使用した子要素の単純な上下左右中央寄せです。

HTML(Pug)

.container
  .box child element

CSS(SCSS)

.container {
  align-items: center;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1ch;
  width: 70%;
  height: 300px;
  margin: 30px auto 0;
  position: relative;
  .box {
    background-color: #fff;
    text-align: center;
    padding: 30px;
    max-width: 300px;
  }
}

See the Pen 親要素に対して子要素を上下左右中央寄せする by nakazilab (@nakazilab) on CodePen.

横並びの要素の中にある文字の量が異なる場合も高さを揃えて中央寄せ

2022-04-14T06:59:29.336Z

メニューなど文字量が異なる要素を横に並べたい場合があります。その際、display: flexを使用すればメニュー範囲の高さは揃いますが、文字が上揃いで不格好になるため、子要素にもdisplay:flexを与えて上下中央寄せにします。

HTML(Pug)

ul
  li: a メニュー01
  li: a
    | メニュー02
    br
    | メニュー02
  li: a メニュー03メニュー03メニュー03

CSS(SCSS)

ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  li {
    display: flex;
    width: 32%;
    a {
      background-color: gray;
      box-sizing: border-box;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      padding: 12px 30px;
    }
  }
}

See the Pen 横並びの要素の中にある文字の量が異なる場合も高さを揃えて中央寄せ by nakazilab (@nakazilab) on CodePen.

濃いテキストシャドウ

2022-04-14T07:00:24.994Z

ひとつのtext-shadowプロパティ内で値を重ねがけして、濃いテキストシャドウを作ります。

HTML(Pug)

p dark text shadow

CSS(SCSS)

p {
  color: #fff;
  text-shadow:
    #000 1px 1px 1px, #000 -1px 1px 1px,
    #000 1px -1px 1px, #000 -1px -1px 1px;
}

See the Pen 濃いテキストシャドウ by nakazilab (@nakazilab) on CodePen.

親要素の範囲を飛び出して子要素を画面いっぱいに表示

2022-04-14T07:00:39.842Z

親要素に最大幅を設定しつつ、途中で指定したボックスだけ100%表示したい場合もあるかと思います。左右100%表示、左側のみ100%表示、右側のみ100%表示の3パターンを紹介します。

HTML(Pug)

.container
  .both-sides
  .right
  .left

CSS(SCSS)

body {
  overflow-x: hidden;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  > * {
    background-color: gray;
    height: 200px;
    margin-top: 20px;
  }
  .both-sides {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
  .right {
    margin: 30px calc(50% - 50vw + 8px) 0 0;
  }
  .left {
    margin: 30px 0 0 calc(50% - 50vw + 7px);
  }
}

See the Pen 親要素の範囲を飛び出して子要素を画面いっぱいに表示 by nakazilab (@nakazilab) on CodePen.

見出しの横に可変幅のライン

2022-04-14T06:58:40.017Z

見出しなどの横に可変ラインを引きます。

HTML(Pug)

h1.both-sides 見出し（両側にライン）
h1.right-side 見出し (右側にライン)

CSS(SCSS)

.both-sides {
  display: flex;
  align-items: center;
  &::before,
  &::after {
    content: "";
    background-color: gray;
    flex-grow: 1;
    height: 1px;
  }
  &::before {
    margin-right: 0.5em;
  }
  &::after {
    margin-left: 0.5em;
  }
}

.right-side {
  display: flex;
  align-items: center;
  &::after {
    content: '';
    background-color: gray;
    flex-grow: 1;
    margin-left: 0.5em;
    height: 1px;
  }
}

See the Pen 見出しの横に可変幅のライン by nakazilab (@nakazilab) on CodePen.

子要素の中にある複数の孫要素の位置を等間隔に揃える

2022-04-14T07:01:01.653Z

見出し、画像、ボタンなどが並ぶカード型コンポーネントをスタイリングする時に、display: gridを使用し、子要素の高さを揃えつつ異なる高さの孫要素を等間隔に配置します。

HTML(Pug)

.container
  .box
    p.name name01
    .img
      div(style="height: 210px")
    .button button
  .box
    p.name
      | name02
      br
      | name02
    .img
      div(style="height: 220px")
    .button button
  .box
    p.name
    | name03
    br
    | name03
    br
    | name03
    .img
      div(style="height: 200px")
    .button button

CSS(SCSS)

.container {
  display: flex;
  justify-content: space-between;
  .box {
    border: 1px solid gray;
    box-sizing: border-box;
    display: grid;
    width: 31%;
    text-align: center;
    .name {
      align-self: flex-start;
      margin: 0;
    }
    .img {
      align-self: center;
      margin: 20px 0;
      div {
        background-color: gray;
        width: 90%;
        margin: 0 auto;
      }
    }
    .btn {
      align-self: flex-end;
    }
  }
}

See the Pen 子要素の中にある複数の孫要素の位置を等間隔に揃える by nakazilab (@nakazilab) on CodePen.

文字にマーカーを引く

2023-07-05T04:17:05.470Z

文字にマーカーを引きます。

HTML(Pug)

p 
  | 文字に
  strong マーカー
  | を引きます。

CSS(SCSS)

strong {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: yellow;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
  padding: 0 2px;
}

See the Pen 文字にマーカーを引く by nakazilab (@nakazilab) on CodePen.

paddingを使った縦横比を維持した可変ボックス

2022-04-14T06:58:52.620Z

paddingを使い、希望の縦横比を維持した可変ボックスをつくります。

HTML(Pug)

.box

CSS(SCSS)

.box {
  background-color: gray;
  width: 50%;
  margin: 0 auto;
  height: auto;
  position: relative;
  &::before {
    content: '';
    display: block;
    padding-top: 50%;
  }
}

See the Pen paddingを使った縦横比を維持した可変ボックス by nakazilab (@nakazilab) on CodePen.

リストに自動で番号を振る

2022-04-14T06:49:50.344Z

counterを使用しリストを自動ナンバリングします。例のようにtableを使用しテーブルごとに番号を1から始めたい時は、table要素にcounter-resetプロパティを記述します。

HTML(Pug)

table
  tbody
    tr
      th item name
      td detail
    tr
      th item name
      td detail
    tr
      th item name
      td detail

CSS(SCSS)

table {
  width: 70%;
  margin: 0 auto;
  counter-reset: number;
  tr {
    counter-increment: number;
    th::before {
      border-radius: 50%;
      box-sizing: border-box;
      background-color: gray;
      color: #fff;
      content: counter(number,decimal);
      display: inline-block;
      font-size: 14px;
      width: 16px;
      height: 16px;
      text-align: center;
      margin-right: 5px;
    }
  }
}

See the Pen リストに自動で番号を降る by nakazilab (@nakazilab) on CodePen.

テーブルなどで使える文字量に連動するドットライン

2022-04-14T07:01:16.691Z

複数の情報を表示する表などを作る際、項目名の横にドットのラインを引きたいことがあります。 thに擬似クラスを用意して、backgroundのグラデーションを利用し項目名の横に可変ドットラインを表示します。

HTML(Pug)

table
  tbody
    tr
      th item name
      td detail
    tr
      th item name
      td detail
    tr
      th item name
      td detail

CSS(SCSS)

table {
  width: 70%;
  margin: 0 auto;
  th {
    display: flex;
    align-items: center;
    width: 100%;
    &::after {
      background: radial-gradient(circle farthest-side, gray, gray 30%, transparent 30%, transparent);
      background-size: 6px 6px;
      content: '';
      display: block;
      flex-grow: 1;
      height: 6px;
      margin: 0 1%;
    }
  }
  td {
    width: 4em;
  }
}

See the Pen テーブルなどで使える文字量に連動するドットライン by nakazilab (@nakazilab) on CodePen.

リンクボタンにCSSだけで矢印を追加する

2022-04-14T06:59:17.056Z

擬似クラスを利用し、CSSだけでリンクボタンに矢印を追加します。

HTML(Pug)

.button
  a link

CSS(SCSS)

.button {
  a {
    background-color: gray;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font-size: 14px;
    padding: 15px 10px;
    text-align: center;
    position: relative;
    max-width: 150px;
    &::before {
      content: '';
      border: solid 1px #fff;
      border-width: 1px 1px 0 0;
      width: 4px;
      height: 4px;
      transform: translate(0, -50%) rotate(45deg);
      position: absolute;
      top: 50%;
      right: 10px;
    }
  }
}

See the Pen リンクボタンにCSSだけで矢印を追加する by nakazilab (@nakazilab) on CodePen.

CSSだけで好きな大きさ・間隔のドットライン

2022-04-14T06:59:42.080Z

backgroundのグラデーションを利用し、CSSだけでドットラインを引きます。 radial-gradientの数値とbackground-sizeを弄ることで好みの大きさ・間隔に調整可能です。

HTML(Pug)

.dot-line

CSS(SCSS)

.dot-line {
  &::before { 
    background: radial-gradient(circle farthest-side, gray, gray 30%, transparent 30%, transparent);
    background-size: 10px 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
  }
}

See the Pen CSSだけで好きな大きさ・間隔のドットライン by nakazilab (@nakazilab) on CodePen.