<main>
        <div class="big-bg">
          <div class="maru-img">
            <ul class="main-content">
              <li class="soto"><a class="rinkubox" href="salon.html"><img src="http://inomiti.com/a/lnk/inok/"
                    alt=""></a>
                    <a class="html-moji" href="http://inomiti.com/a/lnk/inop/">記事</a>
              </li>
              <li class="soto"><a class="rinkubox" href="menu.html"><img src="http://inomiti.com/a/lnk/ude/" alt=""></a>
                <a class="Python-moji" href="http://inomiti.com/a/lnk/usell/">udemy</a></li>
              <li class="soto"><a class="rinkubox" href="notes.html"><img src="http://inomiti.com/a/lnk/baseb/" alt=""></a>
                <a class="Wordpress-moji" href="notes.html">BASE</a></li>
            </ul>
          </div><!-- /.maru-img -->
        </div><!-- big-bg -->

 <hr>

<!--         まとまりで   -->
         <div class="big-bg">
          <div class="maru-img">
            <ul class="main-content2">
              <li class="sotowaku"><a class="rinkubox" href="salon.html"><img src="http://inomiti.com/a/lnk/inok/" alt=""></a>
                <a class="senter-text" href="http://inomiti.com/a/lnk/inop/">記事</a>
              </li>
              <li class="sotowaku"><a class="rinkubox" href="menu.html"><img src="http://inomiti.com/a/lnk/ude/" alt=""></a>
                <a class="senter-text" href="http://inomiti.com/a/lnk/usell/">udemy</a>
              </li>
              <li class="sotowaku"><a class="rinkubox" href="notes.html"><img src="http://inomiti.com/a/lnk/baseb/" alt=""></a>
                <a class="senter-text" href="http://inomiti.com/a/lnk/basep/">BASE</a>
              </li>
            </ul>
          </div><!-- /.maru-img -->
        </div><!-- big-bg -->
* {
  box-sizing: border-box
  
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.big-bg {
  width: 100%;
}
.main-content {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 49px 35px 51px;
}
.soto {
  position: relative;
  max-width: 250px;
  min-height: 250px;
  border-radius: 50%;
}
.main-content img {
/*   position: relative; */
  height: 250px;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: bottom;
  background: pink;
}
.main-content li {
  letter-spacing: 1.5px;
  font-weight: bold;
  font-size: 48px;
}
.main-content li a {
  font-weight: bold;
  color: #000;
}

.main-content li .html-moji{
  position: absolute;
  left: 28%;
  top: 50%;
  transform: translateY(-50%);
}
.main-content li .Python-moji{
  position: absolute;
  left: 17%;
  top: 50%;
  transform: translateY(-50%);
}
.main-content li .Wordpress-moji{
  position: absolute;
  left: 22%;
  top: 50%;
  transform: translateY(-50%);
}

.rinkubox {
  display: block;
  height: 250px;
  max-width: 250px;
  border-radius: 50%;
}



/* かたまり */

.main-content2 {
  display: flex;
  justify-content: space-between;
  margin: 50px;
  
}
.sotowaku {
  position: relative;
  max-width: 250px;
  min-height: 250px;
  border-radius: 50%;
}
.rinkubox {
  display: block;
  height: 250px;
  max-width: 250px;
  border-radius: 50%;
}

.main-content2 img {
  height: 250px;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: bottom;
  background: skyblue;
}
.maru-img ul li a .rinkbox {
  display: block;
  width: 250px;
  height: 250px;
  border-radius: 100%;
}
.main-content2 li .senter-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 1.5px;
  font-weight: bold;
  font-size: 50px;
}
.main-content2 li a {
  font-weight: bold;
  color: #000;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.