CSS– category –

【html】 <div class="zoom"> <img src="images/index-images/image01.jpg" alt=""> </div> 【css】 .zoom { overflow: hidden; } .zoom { -webkit-transform: scale(1); transform: scale(1); -webkit-t...

レスポンシブサイトでブラウザのサイズやデバイスが変わっても同じアスペクト比で変化していくcss 【HTML】 <div class="box"> <div class="inner zoomin1"> <a href=""> <img src="images/index...

決まった枠内でスクロールできる擬似インラインフレーム   .flame { overflow: auto; height: 200px; width: 100%; background-color: #f7efe9; border: solid 1px #f9bb8f; padding: 20px; }   <div class="flame"> <h2>テキストテ...

スマホの時にtableをスクロールさせる     <div class="scroll"> <table> <tr> <td>テキストテキスト</td> <td>テキストテキストテキスト</td> </tr> <tr> <td>テキストテキスト</td...

.global-nav li a { position: relative; display: block; color: #fff; padding: 20px 30px; } .global-nav li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transfor...

サイズがバラバラの画像を決まった枠内の中で縦横真ん中に配置するcss。 レスポンシブなので決まった枠も縦横可変。 .styling { width: 100%; margin: 0 auto; } .styling .img { position: relative; width: 100%; margin-bottom: 20px; background-color...

  .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

headerを固定しているとアンカーリンクがずれる場合い、headerに高さを指定してあげると解消する。 クロームも