<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id/>
    <title>nakazilab</title>
    <updated>2023-07-05T04:17:35.811Z</updated>
    <generator>https://github.com/nuxt-community/feed-module</generator>
    <link rel="alternate" href="https://nakazilab.com/feed"/>
    <subtitle>cssやJavaScriptの備忘録サイト</subtitle>
    <category term="blog"/>
    <contributor>
        <name>nakazilab</name>
        <uri>https://nakazilab.com</uri>
    </contributor>
    <entry>
        <title type="html"><![CDATA[サブカラム幅は固定したままメインカラムを可変幅にする]]></title>
        <id>https://nakazilab.com/posts/sub-column-fixed-main-column-variable/</id>
        <link href="https://nakazilab.com/posts/sub-column-fixed-main-column-variable/"/>
        <updated>2022-04-14T08:11:43.884Z</updated>
        <content type="html"><![CDATA[<p>サブカラムの幅は固定したまま、メインカラムをウィンドウサイズに応じた可変幅にするリキッドレイアウトです。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.container
  .main main
  .sub sub
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="サブカラム幅は固定したままメインカラムを可変幅にする" src="https://codepen.io/nakazilab/embed/gOgPZqq?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/gOgPZqq'>サブカラム幅は固定したままメインカラムを可変幅にする</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-26T07:58:42.476Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[親要素に対して子要素を上下左右中央寄せする]]></title>
        <id>https://nakazilab.com/posts/simple-centered/</id>
        <link href="https://nakazilab.com/posts/simple-centered/"/>
        <updated>2022-04-14T07:00:07.008Z</updated>
        <content type="html"><![CDATA[<p>display: flexを使用した子要素の単純な上下左右中央寄せです。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.container
  .box child element
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="親要素に対して子要素を上下左右中央寄せする" src="https://codepen.io/nakazilab/embed/poRJPGx?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/poRJPGx'>親要素に対して子要素を上下左右中央寄せする</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:17:20.886Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[横並びの要素の中にある文字の量が異なる場合も高さを揃えて中央寄せ]]></title>
        <id>https://nakazilab.com/posts/centered-grandchild-element/</id>
        <link href="https://nakazilab.com/posts/centered-grandchild-element/"/>
        <updated>2022-04-14T06:59:29.336Z</updated>
        <content type="html"><![CDATA[<p>メニューなど文字量が異なる要素を横に並べたい場合があります。
その際、display: flexを使用すればメニュー範囲の高さは揃いますが、文字が上揃いで不格好になるため、子要素にもdisplay:flexを与えて上下中央寄せにします。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">ul
  li: a メニュー01
  li: a
    | メニュー02
    br
    | メニュー02
  li: a メニュー03メニュー03メニュー03
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
    }
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="横並びの要素の中にある文字の量が異なる場合も高さを揃えて中央寄せ" src="https://codepen.io/nakazilab/embed/wvgadxP?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/wvgadxP'>横並びの要素の中にある文字の量が異なる場合も高さを揃えて中央寄せ</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:15:54.698Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[濃いテキストシャドウ]]></title>
        <id>https://nakazilab.com/posts/dark-text-shadow/</id>
        <link href="https://nakazilab.com/posts/dark-text-shadow/"/>
        <updated>2022-04-14T07:00:24.994Z</updated>
        <content type="html"><![CDATA[<p>ひとつのtext-shadowプロパティ内で値を重ねがけして、濃いテキストシャドウを作ります。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">p dark text shadow
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-scss">p {
  color: #fff;
  text-shadow:
    #000 1px 1px 1px, #000 -1px 1px 1px,
    #000 1px -1px 1px, #000 -1px -1px 1px;
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="濃いテキストシャドウ" src="https://codepen.io/nakazilab/embed/VwPLbde?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/VwPLbde'>濃いテキストシャドウ</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:13:59.743Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[親要素の範囲を飛び出して子要素を画面いっぱいに表示]]></title>
        <id>https://nakazilab.com/posts/box-over-parent-element/</id>
        <link href="https://nakazilab.com/posts/box-over-parent-element/"/>
        <updated>2022-04-14T07:00:39.842Z</updated>
        <content type="html"><![CDATA[<p>親要素に最大幅を設定しつつ、途中で指定したボックスだけ100%表示したい場合もあるかと思います。
左右100%表示、左側のみ100%表示、右側のみ100%表示の3パターンを紹介します。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.container
  .both-sides
  .right
  .left
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-scss">body {
  overflow-x: hidden;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  &gt; * {
    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);
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="親要素の範囲を飛び出して子要素を画面いっぱいに表示" src="https://codepen.io/nakazilab/embed/jOyPmaz?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/jOyPmaz'>親要素の範囲を飛び出して子要素を画面いっぱいに表示</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:12:22.554Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[見出しの横に可変幅のライン]]></title>
        <id>https://nakazilab.com/posts/heading-line/</id>
        <link href="https://nakazilab.com/posts/heading-line/"/>
        <updated>2022-04-14T06:58:40.017Z</updated>
        <content type="html"><![CDATA[<p>見出しなどの横に可変ラインを引きます。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">h1.both-sides 見出し（両側にライン）
h1.right-side 見出し (右側にライン)
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-scss">.both-sides {
  display: flex;
  align-items: center;
  &amp;::before,
  &amp;::after {
    content: &quot;&quot;;
    background-color: gray;
    flex-grow: 1;
    height: 1px;
  }
  &amp;::before {
    margin-right: 0.5em;
  }
  &amp;::after {
    margin-left: 0.5em;
  }
}

.right-side {
  display: flex;
  align-items: center;
  &amp;::after {
    content: '';
    background-color: gray;
    flex-grow: 1;
    margin-left: 0.5em;
    height: 1px;
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="見出しの横に可変幅のライン" src="https://codepen.io/nakazilab/embed/ExZjmmM?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/ExZjmmM'>見出しの横に可変幅のライン</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:10:32.746Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[子要素の中にある複数の孫要素の位置を等間隔に揃える]]></title>
        <id>https://nakazilab.com/posts/align-grandchild-elements/</id>
        <link href="https://nakazilab.com/posts/align-grandchild-elements/"/>
        <updated>2022-04-14T07:01:01.653Z</updated>
        <content type="html"><![CDATA[<p>見出し、画像、ボタンなどが並ぶカード型コンポーネントをスタイリングする時に、display: gridを使用し、子要素の高さを揃えつつ異なる高さの孫要素を等間隔に配置します。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.container
  .box
    p.name name01
    .img
      div(style=&quot;height: 210px&quot;)
    .button button
  .box
    p.name
      | name02
      br
      | name02
    .img
      div(style=&quot;height: 220px&quot;)
    .button button
  .box
    p.name
    | name03
    br
    | name03
    br
    | name03
    .img
      div(style=&quot;height: 200px&quot;)
    .button button
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
    }
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="子要素の中にある複数の孫要素の位置を等間隔に揃える" src="https://codepen.io/nakazilab/embed/LYxVyPv?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/LYxVyPv'>子要素の中にある複数の孫要素の位置を等間隔に揃える</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:07:38.729Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[文字にマーカーを引く]]></title>
        <id>https://nakazilab.com/posts/mark-on-text/</id>
        <link href="https://nakazilab.com/posts/mark-on-text/"/>
        <updated>2023-07-05T04:17:05.470Z</updated>
        <content type="html"><![CDATA[<p>文字にマーカーを引きます。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">p 
  | 文字に
  strong マーカー
  | を引きます。
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="文字にマーカーを引く" src="https://codepen.io/nakazilab/embed/poRJeKe?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/poRJeKe'>文字にマーカーを引く</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T08:05:31.637Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[paddingを使った縦横比を維持した可変ボックス]]></title>
        <id>https://nakazilab.com/posts/variable-box-by-padding/</id>
        <link href="https://nakazilab.com/posts/variable-box-by-padding/"/>
        <updated>2022-04-14T06:58:52.620Z</updated>
        <content type="html"><![CDATA[<p>paddingを使い、希望の縦横比を維持した可変ボックスをつくります。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.box
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-scss">.box {
  background-color: gray;
  width: 50%;
  margin: 0 auto;
  height: auto;
  position: relative;
  &amp;::before {
    content: '';
    display: block;
    padding-top: 50%;
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="paddingを使った縦横比を維持した可変ボックス" src="https://codepen.io/nakazilab/embed/yLgNMMV?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/yLgNMMV'>paddingを使った縦横比を維持した可変ボックス</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-24T07:57:51.157Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[リストに自動で番号を振る]]></title>
        <id>https://nakazilab.com/posts/auto-list-number/</id>
        <link href="https://nakazilab.com/posts/auto-list-number/"/>
        <updated>2022-04-14T06:49:50.344Z</updated>
        <content type="html"><![CDATA[<p>counterを使用しリストを自動ナンバリングします。
例のようにtableを使用しテーブルごとに番号を1から始めたい時は、table要素にcounter-resetプロパティを記述します。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">table
  tbody
    tr
      th item name
      td detail
    tr
      th item name
      td detail
    tr
      th item name
      td detail
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
    }
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="リストに自動で番号を降る" src="https://codepen.io/nakazilab/embed/LYxVWmg?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/LYxVWmg'>リストに自動で番号を降る</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-07T02:23:12.517Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[テーブルなどで使える文字量に連動するドットライン]]></title>
        <id>https://nakazilab.com/posts/flexible-line-in-table/</id>
        <link href="https://nakazilab.com/posts/flexible-line-in-table/"/>
        <updated>2022-04-14T07:01:16.691Z</updated>
        <content type="html"><![CDATA[<p>複数の情報を表示する表などを作る際、項目名の横にドットのラインを引きたいことがあります。
thに擬似クラスを用意して、backgroundのグラデーションを利用し項目名の横に可変ドットラインを表示します。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">table
  tbody
    tr
      th item name
      td detail
    tr
      th item name
      td detail
    tr
      th item name
      td detail
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-scss">table {
  width: 70%;
  margin: 0 auto;
  th {
    display: flex;
    align-items: center;
    width: 100%;
    &amp;::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;
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="テーブルなどで使える文字量に連動するドットライン" src="https://codepen.io/nakazilab/embed/abpOJVY?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/abpOJVY'>テーブルなどで使える文字量に連動するドットライン</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-07T02:22:33.069Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[リンクボタンにCSSだけで矢印を追加する]]></title>
        <id>https://nakazilab.com/posts/arrow-add-button/</id>
        <link href="https://nakazilab.com/posts/arrow-add-button/"/>
        <updated>2022-04-14T06:59:17.056Z</updated>
        <content type="html"><![CDATA[<p>擬似クラスを利用し、CSSだけでリンクボタンに矢印を追加します。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.button
  a link
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-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;
    &amp;::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;
    }
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="リンクボタンにCSSだけで矢印を追加する" src="https://codepen.io/nakazilab/embed/vYgOgGJ?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/vYgOgGJ'>リンクボタンにCSSだけで矢印を追加する</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-07T02:21:49.018Z</published>
    </entry>
    <entry>
        <title type="html"><![CDATA[CSSだけで好きな大きさ・間隔のドットライン]]></title>
        <id>https://nakazilab.com/posts/dot-line/</id>
        <link href="https://nakazilab.com/posts/dot-line/"/>
        <updated>2022-04-14T06:59:42.080Z</updated>
        <content type="html"><![CDATA[<p>backgroundのグラデーションを利用し、CSSだけでドットラインを引きます。
radial-gradientの数値とbackground-sizeを弄ることで好みの大きさ・間隔に調整可能です。</p>
<h2>HTML(Pug)</h2>
<pre><code class="language-pug">.dot-line
</code></pre>
<h2>CSS(SCSS)</h2>
<pre><code class="language-scss">.dot-line {
  &amp;::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%;
  }
}
</code></pre>
<iframe height="265" style="width: 100%;" scrolling="no" title="CSSだけで好きな大きさ・間隔のドットライン" src="https://codepen.io/nakazilab/embed/wvgaWYO?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/nakazilab/pen/wvgaWYO'>CSSだけで好きな大きさ・間隔のドットライン</a> by nakazilab
  (<a href='https://codepen.io/nakazilab'>@nakazilab</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>]]></content>
        <published>2021-03-07T02:12:36.302Z</published>
    </entry>
</feed>