Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
      <section class="circle-oosoto">
        <div class="circle-waku">
            <div class="circle-wordpress">
                <p class="title">世界最大<br>のCMS</p>
            </div>
        </div>
        <div class="circle-waku">
            <div class="circle-HTML">
                <p class="title">文章構造<br>全般を示す</p>
            </div>
        </div>
        <div class="circle-waku">
            <div class="circle-CSS">
                <p class="title"> 文章構造の<br>レイアウト</p>
            </div>
        </div>
        <div class="circle-waku">
            <div class="circle-php">
                <p class="title"> CMSを<br>司る</p>
            </div>
        </div>
      </section>
    </body>
              
            
!

CSS

              
                
/* PC対応。*/
/* ボックスを横並びにする大枠を作る。*/
.circle-oosoto{display: flex;position: relative;}

@media screen and (min-width:960px){
  /*  */
   /* PC用:各円がの四角枠を作りその枠の中に円を入れ込む。widthは全体の24%とする */
   .circle-waku{
    position: relative;
    width: 24%;
    margin:1%;
  }
  .title{
      /*直接の親要素は、circle-festibalでpositionrelativeを指定してないが、今回は、その親のcircle-wakuとも同じ大きさなので、きっと親親のpositionを引き継いでている?*/
      position: absolute;
      /*画面サイズがスマホサイズで狭くなった上でのVWなので、大きく設定しないといけない。 */
      font-size: 3vw;
      color: #fff;
      /*重要!親要素の枠いっぱいまにで、widthを設定してあげないと、左に寄ってしまう。理由は、文字数が横幅いっぱいにないから?*/
      width: 100%;
      /*<p></>タグセットの中には文字が入っているので、インライン要素の中央揃えで横は真ん中に来る。*/
      text-align: center;
      /*高さが真ん中に来るにはこの指定が一番良いとのこと*/
      top:50%;
      /*<p>タグの前と後にはその高さの半分の余白ができてしまう。今回はトップから計っているので、トップの部分の余白(-7.5vw)を相殺する必要がある。*/
      margin: -3vw 0 0;
      /*高さを念の為フォント・サイズと同じにしておくこと(?本当に必要?*/
      line-height: 1;
      text-shadow: 2px 2px 10px #5bbab2 ,
-2px 2px 10px #5bbab2 ,
2px -2px 10px #5bbab2 ,
-2px -2px 10px #5bbab2;
    }
  }


/* PC・スマホ共通*/
 /* 写真一つひとつ全部指定しなければいけない。内容物を入れるので、4つ書く */
.circle-wordpress{
  width: 100%;
    /*横幅と同じ長さを上にもとって確保する。このことによりレスポシブルでも円の形が崩れない*/
  padding-top: 100%;
    /*borderを円にする*/
  border-radius: 50%;
    /*画像を入れる*/
  background:url(https://web-shindanshi.jp/wp-content/uploads/2020/08/shutterstock_1298434477.jpg) center;
    /*画像を円の中にしっかり入るようにする。*/
  background-size: cover;
  box-shadow: 10px 10px 15px -10px;
}
.circle-HTML{
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background:url(https://web-shindanshi.jp/wp-content/uploads/2020/08/HTML_591261773.jpg) no-repeat center ;
  background-size: cover ;
}
.circle-CSS{
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background:url(https://web-shindanshi.jp/wp-content/uploads/2020/08/bee15cec2824ed1600e3d73316530ad3.jpg) center;
  background-size: contain;
}
.circle-php{
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background:url(https://web-shindanshi.jp/wp-content/uploads/2020/08/php2_294411656.jpg) center;
  background-size: cover;

}

/* スマホ用*/
@media screen and (max-width:960px){
.circle-oosoto{flex-direction:column;
}
/* 横幅は90%、中の要素の場所を指定したいので、positionをrelativeで指定する。
中央寄せ、パディングで下の丸円との距離を離してあがる。margin0 autoがあので、下との隙間を開けられない。*/
.circle-waku{
  width: 90%;position: relative;margin:0 auto;padding:2vw;
}

.title{
  position: absolute;
  font-size: 10vw;
  color: #fff;
  width: 100%;
  text-align: center;
  top:50%;
  margin: -10vw 0;
 line-height: 1;
text-shadow: 2px 2px 10px #5bbab2 ,
-2px 2px 10px #5bbab2 ,
2px -2px 10px #5bbab2 ,
-2px -2px 10px #5bbab2;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console