divを使ったボックスのデザイン コピペで使えるHTML+CSS

2021.01.14
スポンサーリンク
スポンサーリンク

divによるボックスのデザイン

単純なボックス

見出し
ここに文章が入ります。もちろん、画像やリストなどでも構いません。text-align:centerとすればインライン要素は横方向について中央配置されます。
コード
<div style="width: 100%; margin: 0px;">
  <div style="margin: auto; background-color: #4d4a46; text-align: center; color: #ffffff;">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46;">ここに～れます。</div>
</div>

単純なボックスの角を丸くする

角が丸い見出し
ここに文章が入ります。border-radiusで角丸を実現します。見出し部分の右上、左上、本文部分の右下、左下について8pxの丸みを指定します。
コード
<div style="width: 100%; margin: 0px;">
  <div style="margin: auto; background-color: #4d4a46; text-align: center; color: #ffffff; border-radius: 8px 8px 0px 0px;">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #ff6600; border-radius: 0px 0px 8px 8px;">ここに～指定します。  </div>
</div>
使用CSS

border-radius 左上 右上 右下 左下 

見出しの幅を狭くし左に寄せたボックス

見出し左寄せボックス
ここに文章が入ります。上の見出し部分について幅を指定します。
コード
<div style="width: 100%; margin: 0px;">
  <div style="margin-right: auto; width: 30%; background-color: #4d4a46; text-align: center; color: #ffffff;">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46;">ここに～指定します。</div>
</div>
使用CSS

border-radius 左上 右上 右下 左下 

見出しの幅を狭く左に寄せ、アクセントを追加したボックス

見出し左寄せボックス
ここに文章が入ります。::before疑似要素によって見出し文の左にアクセントを加えました。
コード
<div style="width: 100%; margin: 0px;">
  <div class="div-icon-1">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46;">ここに～加えました。</div>
</div>
スタイルシート
.div-icon-1{
  margin-right: auto;
  width: 30%;
  background-color: #4d4a46; 
  color: #ffffff; 
  padding-left: 10px;
}
.div-icon-1::before{
  display: inline-block;
  content: '';
  border-left: 6px solid #dd5656;
  height:10px;
  padding-left:6px;
  margin-left:2px;
  margin-bottom:1px;
}
使用CSS

::before inline-blockにすることで::beforeを縦方向に中央配置できるようになる

見出しを角丸にし、幅を狭くしたボックス

見出し左寄せボックス
ここに文章が入ります。見出をborder-radiusによって角丸にしました。
コード
<div style="width: 100%; margin: 0px;">
  <div style="margin-right: auto; width: 30%; background-color: #4d4a46; color: #ffffff; padding-left: 10px; border-radius: 4px 4px 0px 0px;">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46;">ここに～指定します。</div>
</div>
使用CSS

border-radius 左上 右上 右下 左下 

見出しを角丸にし右に寄せた幅を狭くしたボックス

見出し右寄せボックス
ここに文章が入ります。基本的には今までと同じですが、見出しについて、margin-left: auto; とし、右寄せを実現しています。
コード
<div style="width: 100%; margin: 0px;">
  <div style="margin-left: auto; width: 30%; background-color: #4d4a46; color: #ffffff; padding-left: 10px; border-radius: 4px 4px 0px 0px;">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46;">ここ～にしました。</div>
</div>
使用CSS
margin-left: auto;
右寄せ。右寄せをするために、leftをautoにします。
margin: auto;
中央寄せ margin-left :auto;とmargin-right;を併記することでもよい。 margin:auto;にしたとしても縦方向に中央配置されることは無い。margin:auto;で対応できるのは横方向だけです。
margin-right: auto;
左寄せ

見出しをボックス内に少し入れ込む

見出し左寄せボックス
ここに文章が入ります。transform: translate(10px,10px); によって見出しをボックスのborder戦に重なるようにし、10px下がった分、本文についてmargin-topを10pxとります。加えて、全体を下げた分10px上にあげます。
コード
<div style="width: 100%; margin: 0px; transform: translate(0px,-10px);">
  <div style="width: 30%; background-color: #4d4a46; color: #ffffff; padding-left: 10px; transform: translate(10px,10px);">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46; padding: 0px;">
    <div style="margin-top: 10px;">ここに～にもなる。</div>
  </div>
</div>
使用CSS

transform: translate(x,y) x,y分移動させる 

見出しを斜めにしてボックスに少し入れ込む

見出し左寄せボックス
ここに文章が入ります。角度については transform: rotate(-1deg) としました。見出し文を斜めにしないためには、もう一つ別の<div>を用意してその中に文を入れて回転させないことで実現できます。
コード
<div style="width: 100%; margin: 0px; transform: translate(0px,-10px);">
  <div style="width: 30%; background-color: #4d4a46; color: #ffffff; padding-left: 10px; transform: translate(10px,10px) rotate(-1deg);">見出し左寄せボックス</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46; padding: 0px;">
    <div style="margin-top: 10px;">ここに文章が～で実現できます。</div>
  </div>
</div>
使用CSS

transform: translate(x,y) x,y分移動させる 

見出しの幅を可変にする

可変の見出し左寄せボックス
ここに文章が入ります。見出しの幅を可変にするため、見出しdivのdisplayをinline-blockに指定します。見出し内の左右の間隔をあけるため、padding:0px 10pxを指定します。
コード
<div style="width: 100%; margin: 0px; transform: translate(0px,-10px);">
  <div style="display: inline-block; background-color: #4d4a46; color: #ffffff; padding: 0px 10px; transform: translate(10px,10px);">見出し</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46; padding: 0px;">
    <div style="margin-top: 10px;">ここに～にもなる。</div>
  </div>
</div>
使用CSS

transform: translate(x,y) x,y分移動させる 

見出しの帯を斜めにする

可変の見出し左寄せ斜めボックス
ここに文章が入ります。見出しの幅を可変にするため、見出しdivのdisplayをinline-blockに指定します。見出し内の左右の間隔をあけるため、padding:0px 10pxを指定します。
コード
<div style="width: 100%; margin: 0px; transform: translate(0px,-10px);">
  <div style="display: inline-block; background-color: #4d4a46; color: #ffffff; padding: 0px 10px; transform: translate(15px,15px) skewX(-8deg); border-radius: 4px;">可変の見出し左寄せ斜めボックス</div>
  <div style="margin: auto; min-height: 80px; border: 1px solid #4d4a46; padding: 0px; border-radius: 4px;">
    <div style="margin: 10px; margin-top: 20px;">ここに文章が入ります。見出しの幅を可変にするため、見出しdivのdisplayをinline-blockに指定します。見出し内の左右の間隔をあけるため、padding:0px 10pxを指定します。</div>
  </div>
</div>
使用CSS

transform: translate(x,y) x,y分移動させる 

使用したCSSなどの説明

border-radius 角を丸くする コピペで使えるHTML+CSS
CSSのプロパティborder-radiusはborderの角に丸みを持たせます。border-radiusを見出しやテーブル、divボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。
programming-cafe.com
transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
programming-cafe.com
スポンサーリンク