東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2016.12.19

agawa

agawa

CSS3で組む、可変する枠

Web制作

皆さんこんにちは。Maromaroの阿川です。
もうすぐクリスマスですね。プレゼントの準備はできましたでしょうか？
私のオススメはブックカバーです！こちらの【https://covers.holiday/】ブックカバーがおしゃれでプレゼントにぴったりですよ！│ω・）ﾁﾗﾁﾗ）

さて今回のお話は「リキッドレイアウトで可変する枠」についてです。ブラウザが横や縦に伸びる場合、背景としてひいている枠はどうコーディングしていくのでしょうか？
はじめてコーディングをしたとき、悩んだ個所だったのでその方法をご紹介しようと思います。

例えばこんなデザインの時……

blog02
枠が四つ角にある時、すべてを画像で切り出してしまうと文字サイズを大きくしたときはみ出してしまいます。
「枠内に綺麗に収まっててほしい…！」という場合はどういった対処法をするのが良いのでしょうか？今回は縦に可変・横に可変・縦横に可変の3パターンを紹介します。

まずは縦に伸ばしてみよう！

blog08
文字サイズが大きくなった際、文字と一緒に枠が伸びるという仕様です。

まず、画像の切り出し方です。一番上のパーツと下のパーツ、そして真ん中のパーツを書き出します。
blog03

次にコードをご紹介します。

  • RESULT
  • HTML
  • CSS

  • 吾輩わがはいは猫である。名前はまだ無い。
    どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

    引用：夏目漱石『吾輩は猫である』

  • コピー
    
<div class="bg01">
<p>吾輩わがはいは猫である。名前はまだ無い。<br />
    どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>
<p class="txt_right">引用：夏目漱石『吾輩は猫である』</p>
</div>
  • コピー
    
.bg01 {
  background-image: url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113835/top01.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113836/bottom01.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113838/middle01.png);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top, bottom, center;
  -webkit-box-sizing : border-box;
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  margin: 0 auto;
  padding: 40px;
  width: 720px;
}
.bg01 p {
  color: #020241;
  font-size: 16px;
  line-height: 160%;
}
.txt_right {
  text-align: right;
}
  • コピー

CSS3では一つのclassに複数の背景画像を追加することができるので指定が簡単です。IEは9以降の対応となるので注意してください！
今回はわかりやすいようにbackground-imageやbackground-repeatなどの指定を分けて記入しました。
コツは、最初の方に指定する背景画像が、レイヤーの一番上にくるイメージで配置することです。真ん中の要素は伸ばせるようにrepeat-y（縦方向に繰り返し）を指定してあげましょう。
これで文字が伸びても画像も一緒に下に伸ばすことができます！このレイアウトの際はwidthの指定が必要です。なので横幅を狭めることはできません。センタリングさせる要素にオススメです。

※画像のパスは任意のものに変更してください！

今度は横に伸ばしてみよう！

blog09
横に伸ばす場合は縦にスライスして画像を切り出します。
blog04
やり方はほとんど縦方向に可変するものと同じで、位置や繰り返しの方向などを変更しましょう。

  • RESULT
  • HTML
  • CSS

  • 吾輩わがはいは猫である。名前はまだ無い。
    どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

    引用：夏目漱石『吾輩は猫である』

  • コピー
    
<div class="bg02">
<p>吾輩わがはいは猫である。名前はまだ無い。<br />
    どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>
<p class="txt_right">引用：夏目漱石『吾輩は猫である』</p>
</div>
  • コピー
    
.bg02 {
  background-image: url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113830/left02.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113834/right02.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113832/middle02.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left, right, center;
  -webkit-box-sizing : border-box;
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  padding: 40px;
  height: 272px;
}
.bg02 p {
  color: #020241;
  font-size: 16px;
  line-height: 160%;
}
.txt_right {
  text-align: right;
}
  • コピー

この場合横には可変するのですが、縦方向には動かないため、文字の量が多くなった時、枠からはみ出してしまうので注意です。

縦横同時に伸ばしてみよう！

blog10
サイズを固定せず、ブラウザの幅に合わせる方法がこちらになります。
今度は画像を右上、左上、右下、左下、上、下、右、左の8か所に分けてカットします。
blog07
そしてそれぞれを重ねていくようにbackgroundを指定していきましょう。

  • RESULT
  • HTML
  • CSS

  • 吾輩わがはいは猫である。名前はまだ無い。
    どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

    引用：夏目漱石『吾輩は猫である』

  • コピー
    
<div class="bg03">
<p>吾輩わがはいは猫である。名前はまだ無い。<br />
    どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>
<p class="txt_right">引用：夏目漱石『吾輩は猫である』</p>
</div>
  • コピー
    
.bg03 {
  background-image: url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113830/left_top03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113833/right_top03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113830/left_bottom03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113833/right_bottom03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113829/top03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113829/bottom03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113832/left03.png), url(https://cdn.blog.maromaro.co.jp/wp-content/uploads/20220401113835/right03.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, right top, left bottom, right bottom, top, bottom, left, right;
  background-color: #FFFFFF;
  -webkit-box-sizing : border-box;
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  padding: 40px;
}
.bg03 p {
  color: #020241;
  font-size: 16px;
  line-height: 160%;
}
.txt_right {
  text-align: right;
}
  • コピー

少し記述する量が多くなりますが、それぞれの繰り返し方法を位置をしっかり書いていきましょう。
すると簡単に上下にも左右にも、背景を伸ばすことができます。

まとめ

画像の切り出し方によって綺麗に枠を伸び縮みさせることができます。それぞれに合った指定の仕方をしてみてくださいね！
それではまたお会いしましょう！阿川でした（・ω・）ﾉｼ

Web制作

あなたにオススメの記事

  1. 2019.03.11

    【CSS】インライン要素にアニメーションで下線を引くホバーアクション2種類

  2. 2019.08.05

    CSSだけで素敵な罫線やストライプの背景を描く方法

  3. 2021.07.12

    【備忘録】簡単！横スクロール出来るテーブルの見出しを固定する方法

  4. 2016.10.03

    オリジナルデザインのSNSシェアボタン実装方法まとめ！WordPress編

  5. 2021.04.05

    flexboxで縦並びの要素を横並びにした際に下の要素の位置を揃える方法

  6. 2018.10.29

    CSSプロパティを書く順番

  7. 2020.03.30

    備忘録　data属性で簡単コーディング

  8. 2017.05.29

    疑似要素を使ってリストアイコンをつけてみよう！

TOP » Web制作 » CSS3で組む、可変する枠