Blog2016.12.19agawaCSS3で組む、可変する枠Web制作HTML・CSSシェアTweet皆さんこんにちは。Maromaroの阿川です。プレゼントの準備はできましたでしょうか?私のオススメはブックカバーです!こちらの【https://covers.holiday/】ブックカバーがおしゃれでプレゼントにぴったりですよ!│ω・)チラチラ)さて今回のお話は「リキッドレイアウトで可変する枠」についてです。ブラウザが横や縦に伸びる場合、背景としてひいている枠はどうコーディングしていくのでしょうか?はじめてコーディングをしたとき、悩んだ個所だったのでその方法をご紹介しようと思います。こんなデザインの時......まずは縦に伸ばしてみよう!今度は横に伸ばしてみよう!縦横同時に伸ばしてみよう!まとめ例えばこんなデザインの時......枠が四つ角にある時、すべてを画像で切り出してしまうと文字サイズを大きくしたときはみ出してしまいます。「枠内に綺麗に収まっててほしい...!」という場合はどういった対処法をするのが良いのでしょうか?今回は縦に可変・横に可変・縦横に可変の3パターンを紹介します。縦に伸ばしてみよう!文字サイズが大きくなった際、文字と一緒に枠が伸びるという仕様です。画像の切り出し方です。上のパーツと下のパーツ、そして真ん中のパーツを書き出します。次にコードをご紹介します。RESULTHTMLCSS吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。class="bg01"><p>吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。right;}コピーCSS3では一つのclassに複数の背景画像を追加することができるので指定が簡単です。IEは9以降の対応となるので注意してください!今回はわかりやすいようにbackground-imageやbackground-repeatなどの指定を分けて記入しました。コツは、最初の方に指定する背景画像が、レイヤーの一番上にくるイメージで配置することです。真ん中の要素は伸ばせるようにrepeat-y(縦方向に繰り返し)を指定してあげましょう。これで文字が伸びても画像も一緒に下に伸ばすことができます!このレイアウトの際はwidthの指定が必要です。横幅を狭めることはできません。センタリングさせる要素にオススメです。※画像のパスは任意のものに変更してください!今度は横に伸ばしてみよう!横に伸ばす場合は縦にスライスして画像を切り出します。やり方はほとんど縦方向に可変するものと同じで、位置や繰り返しの方向などを変更しましょう。RESULTHTMLCSS吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。class="bg02"><p>吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。right;}コピーこの場合横には可変するのですが、縦方向には動かないため、文字の量が多くなった時、枠からはみ出してしまうので注意です。縦横同時に伸ばしてみよう!サイズを固定せず、ブラウザの幅に合わせる方法がこちらになります。8か所に分けてカットします。それぞれを重ねていくようにbackgroundを指定していきましょう。RESULTHTMLCSS吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。class="bg03"><p>吾輩わがはいは猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。記述する量が多くなりますが、それぞれの繰り返し方法を位置をしっかり書いていきましょう。すると簡単に上下にも左右にも、背景を伸ばすことができます。まとめ画像の切り出し方によって綺麗に枠を伸び縮みさせることができます。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。