入社二年目の未経験エンジニアが、実務で役立つと実感したプロパティ3選

amano

2025/05/30に公開2件

 はじめに初めまして、アジケの天野と申します。

私は未経験でフロントエンドエンジニアとして入社し、1年2ヶ月が経ちました。そこで、今までの実務の中で「知っておくと応用が効き役立つ！」と感じたcssのプロパティを3つ紹介したいと思います。

デザインをもとに解説しますので、よろしければ参考にしてみてください。

 ①配置したい場所に要素をもってきたいとき一つ目は、四角の枠の上の線の真ん中に丸い要素を配置したいときです！

 ３ステップで作成！
 1. ①を親要素とし、枠線を作成
p-parentクラスに、position: relative;を追加

 2. ②を子要素とし、丸い部分の要素を作成
p-childクラスに、position: absolute;を追加
ここまでで、以下のような配置になる

 3. 親要素からみての子要素の位置を設定上記の画像によると現在、丸い部分の要素がtop: 0px;の位置にある。
現在の位置から上にいってほしいため、マイナスになる。
丸い部分の要素の半分の幅だけ上にいってほしく、丸い要素の縦幅は85pxであるため、半分の42.5pxだけ上にいくようにする。
結論、p-childクラスに、top: -42.5px;を記述にする。
 
 ②要素を斜めに配置したいとき二つ目は、要素を斜めに配置したいときです！

〜省略〜

 ３ステップで作成！
 １、テキストを記載する
 ２、斜めの黄緑色の背景を実装する例HTML
    <div class="p-example">
        <div>
            <p>テキスト</p>
        </div>
        <div>
            <p>テキスト</p>
            <p>テキスト</p>
        </div>
        <p>3つの特徴</p>
    </div>
上記のコードを例として、::beforeの親となる要素をp-exampleクラスとし、このクラスに付随する形で子要素を実装する。
例CSS
    .p-example {
    }
　			 
    .p-example::before {
    }
親となる要素p-exampleクラスにposition: relative;を追加し、子要素のp-example::beforeにposition: absolute;を追加する。
黄緑色の背景のトップ部分、ボトム部分を斜めにするために、p-example::beforeにtransformプロパティを追加する。
Y軸方向に傾斜をつけたいため、skewY()を用いる。
transformに設定する数値としては、まず一旦数値を当てはめてみて、そこから調整していくという形で進めていき、今回はskewY(-6deg)を当てはめる。

 3、重なりを実装するテキストが黄緑色の背景よりも上にくる。

z-indexに設定する数値が大きくなればなるほど、上への重なりを示す。
上記を踏まえ、テキスト部分にはz-index: 1、黄緑色の背景にはz-index: -1を記載する。
 
 ③要素を等間隔で配置したいとき三つ目は、要素を等間隔で配置したいときです！

 ３ステップで作成！
 １、6つのブロックをそれぞれを作成し、子要素とする。
 ２、上記の6つのブロックをくくってひとまとめにした<div>を親要素とする。
 ３、親要素にflexboxを適用させる。要素を格子状に配置するために、display: grid;を当てる。

grid-template-columns: 1fr 1fr;で、比率1:1の列を指定する。

gap: 15px;でそれぞれのブロックの間を幅を指定する。
 
 おわりに知っておくことで様々な場面で役立つと思います。上記で紹介したプロパティ以外にもまだまだ応用が効くプロパティがあると思うので、ぜひ活用して素敵なサイトを作ってください！！

最後までお読みいただきありがとうございました。