[HTMLパーツ] 四角系デザイン

公開: 2025.11.24

更新: 2025.11.29

HTML・CSSだけで作る四角系デザインに関するコードを置いておきます。
気まぐれに更新します。何かの参考になったら幸いです。

・重なる四角

log

四角を複数重ねたパーツ。中に入れる文字は1文字～3文字まで。それ以上の文字を入れる場合は「.square」の「font-size」を小さくする＋「padding」を小さくするといった調整が必要になります。
実際の利用例はこちら。

■CSS

 
@font-face
{
font-family: 自由の翼;
src: url('https://cdn.leafscape.be/JiyunoTsubasa/JiyunoTsubasa_web.woff2')
     format("woff2");
}
.square {
 position: relative;
 box-sizing: border-box;
 background: rgba(150,150,150,.1);
 margin: 60px auto;
 max-width: 100px;
 aspect-ratio: 1;
 font-family: 自由の翼;
 font-size: 40px;
 text-align: center;
 padding:10px 10px 20px 10px;
 border-radius: 10%;
 color: rgba(20,20,20,.4);
 }

.square-line {
 position: absolute;
 border:1px solid #888;
 box-sizing: border-box;
 margin: 0 auto;
 width: 104px;
 aspect-ratio: 1;
 bottom: 2px;
 left: 2px;
 transform: rotate(8deg);
}

.square-line2 {
 position: absolute;
 border:1px solid #bbb;
 box-sizing: border-box;
 margin: 0 auto;
 width: 104px;
 aspect-ratio: 1;
 bottom: 2px;
 left: 2px;
 transform: rotate(20deg);
}

■HTML

 
<div class="square">
  log
  <div class="square-line"></div>
  <div class="square-line2"></div>
</div>

・四文字

ユラユラ

四角の上に文字をのせたパーツ。タイトル通り、文字は4文字を想定しています。文字数が増減する場合は適宜調整して下さい。

■CSS

 
.yonmoji-square {
 position: relative;
 border: 1px solid #333;
 margin: 15px auto;
 max-width: 100px;
 aspect-ratio: 1;
 }
.yonmoji {
 position: absolute;
 width: 200px;
 top: 30px;
 left: -50px;
 font-size: 1.65rem;
 background: #FFF;
 letter-spacing: .6rem;
 text-align: center;
 font-family: 自由の翼;
 }

■HTML

 
<div class="yonmoji-square">
  <div class="yonmoji">ユラユラ</div>
</div>