レスポンシブの左右交互のカラムを作成中です。画面幅に反比例して画像のサイズを変えたいです。
Q&A
- 【必須】やりたい・やりたかったこと
見本
1280px
https://gyazo.com/bfdf528f8615ff72c19c7b920db6c5fa
796px
https://gyazo.com/6f4d13f573f128f8e55d98f64fa9d532
上の見本のように画面幅に応じてカラム内の画像とテキストの比率を変えたい
-
起きている問題
. 【必須】起きている問題やエラーメッセージ ※できるだけ詳細に書いてください
1280pxでは問題ないが、796pxに画面幅を変得た時にもレイアウトを対応させたい。 -
自分で試したこと
[css レスポンシブ 画像 横カラム] [css レスポンシブ 左右交互からむ] とGoogleで検索したが全く答えに辿り付けなかった
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="expires" content="604800" />
<meta name="format-detection" content="email=no,telephone=no,address=no" />
<title>【カリキュラム番号】| 【カリキュラム名】</title>
<meta
name="description"
content="【カリキュラム番号】| 【カリキュラム名】のdescriptionです"/>
<link rel="icon" href="assets/images/common/favicon.ico" />
<link rel="stylesheet" href="assets/stylesheets/app.css" />
</head>
<body class="l-wrapper">
<header class="l-header">
<h3 class="p-headerTitle">Responsive <br class="p-spBr">Site</h3>
<div class="p-headerPc">
<img class="p-headerPcLogo" src="logo.png" />
<div class="p-headerPcList">
<ul>
<li>contact</li>
<li>access</li>
<li>about</li>
<li>home</li>
</ul>
</div>
</div>
<div class="p-headerSp">
<div class="p-headerSpMenu">
<button class="p-hamburger">
<span class="p-hamburgerBar"></span>
<span class="p-hamburgerBar"></span>
<span class="p-hamburgerBar"></span>
</button>
</div>
</div>
</header>
<main>
<div class="l-content">
<section class="p-about">
<h2 class="p-aboutMainTitle">ABOUT</h2>
<div class="p-aboutConceptWrap">
<p class="p-aboutConcept">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veit est facilis majores,perspiciatis.</p>
</div>
<div class="p-slider">
<img class="p-slider__flexItem imgFirst" src="about_01.jpg">
<img class="p-slider__flexItem imgSecond" src="about_02.jpg">
<img class="p-slider__flexItem imgThird" src="about_03.jpg">
<img class="p-slider__flexItem imgForth" src="about_04.jpg">
</div>
</section>
<section class="p-work">
<h2 class="p-workMainTitle">WORK</h2>
<div class="p-workConceptWrap">
<p class="p-workConcept">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veit est facilis majores,perspiciatis.</p>
</div>
<div class="p-workList">
<section class="p-workItem">
<div class="p-workIcon">
<img src="icon_01.png" alt="" />
</div>
<h3 class="p-workTitle">Web Site</h3>
<p class="p-workDescription">Far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts.</p>
</section>
<section class="p-workItem">
<div class="p-workIcon">
<img src="icon_02.png" alt="" />
</div>
<h3 class="p-workTitle">Download</h3>
<p class="p-workDescription">Far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts.</p>
</section>
<section class="p-workItem">
<div class="p-workIcon">
<img src="icon_03.png" alt="" />
</div>
<h3 class="p-workTitle">Blog</h3>
<p class="p-workDescription">Far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts.</p>
</section>
<section class="p-workItem">
<div class="p-workIcon">
<img src="icon_04.png" alt="" />
</div>
<h3 class="p-workTitle">SVG</h3>
<p class="p-workDescription">Far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts.</p>
</section>
<section class="p-workItem">
<div class="p-workIcon">
<img src="icon_05.png" alt="" />
</div>
<h3 class="p-workTitle">Cloud</h3>
<p class="p-workDescription">Far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts.</p>
</section>
<section class="p-workItem">
<div class="p-workIcon">
<img src="icon_06.png" alt="" />
</div>
<h3 class="p-workTitle">Storage</h3>
<p class="p-workDescription">Far away, behind the word mountains, far from the countries Vokalia and Consonantia,there live the blind texts.</p>
</section>
</section>
<section class="p-blog">
<h2 class="p-blogMainTitle">BLOG</h2>
<div class="p-blogConceptWrap">
<p class="p-blogConcept">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veit est facilis majores,perspiciatis.</p>
</div>
<div class="p-article">
<div class="p-blogItemTop">
<img class="p-dummy" src="blog_01.jpg" />
<div class="p-blogItemTopWrapper">
<h3 class="p-column">45 Mininal Worksspace Rooms for Web Savvys</h3>
<p class="p-text">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia
</p>
<button class="c-moreInfo">MORE</button>
</div>
</div>
<div class="p-blogItemMiddle">
<img class="p-dummy" src="blog_02.jpg" />
<div class="p-blogItemMiddleWrapper">
<h3 class="p-column">45 Mininal Worksspace Rooms for Web Savvys</h3>
<p class="p-text">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia
</p>
<button class="c-moreInfo">MORE</button>
</div>
</div>
<div class="p-blogItemBottom">
<img class="p-dummy" src="blog_03.jpg" />
<div class="p-blogItemBottomWrapper">
<h3 class="p-column">45 Mininal Worksspace Rooms for Web Savvys</h3>
<p class="p-text">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia
</p>
<button class="c-moreInfo">MORE</button>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
</html>
_index.css
/* 共通スタイルは外に書く */
@media screen and (min-width: 796px) {
/* pc用スタイル */
.l-wrapper {
margin: 0 auto;
width: 100%;
}
.l-header {
background-image: url(hero.jpg);
background-size: cover;
width: 100%;
height: 800px;
position: relative;
}
.p-headerTitle {
font-size: 5vw;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.p-spBr {
display: none; /*320px以上では改行タグを無効に*/
}
.p-headerPcLogo {
height: 50px;
width: 50px;
float: left;
margin: 10px 20px;
}
/* パソコンで見たときは表示される */
.p-headerPc {
display: block !important;
}
.p-headerSp {
display: none !important;
}
.p-headerPcList {
width: 100%;
/*float: right;*/
}
.p-headerPcList ul {
margin: 0;
}
.p-headerPcList li {
float: right;
margin: 20px;
list-style: none;
color: white;
}
/* ------------------------------ */
/* about*/
/* ------------------------------ */
.p-slider {
display: flex;
flex-wrap: wrap;
margin-top: 90px;
}
.p-slider__flexItem {
height: 300px;
border-radius: 15px;
object-fit: cover;
}
.imgFirst {
width: 55%;
margin-right: 5%;
}
.imgSecond {
width: 40%;
}
.imgThird {
width: 40%;
margin-right: 5%;
margin-top: 40px;
}
.imgForth {
width: 55%;
margin-top: 40px;
}
/* ------------------------------ */
/* work*/
/* ------------------------------ */
.p-about,
.p-work {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 100px;
}
.p-blog {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
}
.p-work {
background-color: #efefef;
}
.p-workList {
margin-top: 100px;
flex-direction: row;
flex-wrap: wrap;
display: flex;
gap: 70px 24px;
}
.p-workItem {
width: calc((100% - 48px) / 3);
}
.p-workIcon {
background-color: var(--color-bg-icon);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.p-workIcon img {
width: 18%;
height: 18%;
}
.p-aboutMainTitle,
.p-workMainTitle,
.p-blogMainTitle {
font-size: 3vw;
text-align: center;
color: #595959;
}
/* 見出しセンター オレンジ下線 */
.p-aboutConceptWrap,
.p-workConceptWrap,
.p-blogConceptWrap {
text-align: center;
}
.p-aboutConcept,
.p-workConcept,
.p-blogConcept {
text-align: center;
margin: 30px 0;
position: relative;
display: inline-block;
color: grey;
font-size: 2vw;
}
.p-aboutConceptWrap .p-aboutConcept::before,
.p-workConceptWrap .p-workConcept::before,
.p-blogConceptWrap .p-blogConcept::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -50px; /*修正前-40px */
border-bottom: 3px solid #ffd743;
width: 15%;
margin: 0 auto;
}
.p-aboutTitle,
.p-workTitle,
.p-blogTitle {
font-size: 2vw;
margin: 35px 0;
text-align: center;
color: #595959;
font-weight: normal;
}
.p-aboutConcept,
.p-workConcept,
.p-blogConcept {
text-align: center;
}
.p-workDescription {
font-size: 1.5vw;
text-align: center;
margin-top: 8px;
color: grey;
}
/* ------------------------------ */
/* blog*/
/* ------------------------------ */
}
.p-article {
margin: 80px 0px 0px 0px;
}
.p-blogItemTop,
.p-blogItemBottom {
text-align: left;
display: flex;
width: 100%;
margin-bottom: 2%;
}
.p-blogItemTopWrapper,
.p-blogItemBottomWrapper {
margin-left: 2%;
width: 100%;
}
.p-blogItemMiddle {
margin: 5% auto;
display: flex;
flex-direction: row-reverse;
}
.p-blogItemMiddleWrapper {
margin-right: 2%;
width: 100%;
text-align: right;
}
.p-dummy {
width: 30%;
height: 30%;
}
.p-column {
color: #595959;
font-weight: normal;
margin: 2% 0;
/*font-size: 3vw;*/
}
.p-text {
color: grey;
margin-bottom: 6%;
/*font-size: 2vw;*/
}
.c-moreInfo {
background-color: #ffc700;
width: 10%;
height: 20%;
color: #ffffff;
font-size: 12px;
border: none;
border-radius: 3px;
}
@media screen and (max-width: 795px) {
/* sp用スタイル */
/* スマートフォンで見たとき.spが表示される */
.p-headerPc {
display: none !important;
}
.p-headerSp {
display: block !important;
}
.l-header {
background-image: url(hero.jpg);
background-size: cover;
height: 800px;
position: relative;
}
.p-headerSpMenu {
float: right;
margin: 38px;
}
/*
ハンバーガーメニュー
*/
.p-hamburger {
width: 30px;
height: 24px;
position: relative;
}
.p-hamburgerBar {
display: block;
width: 100%;
height: 3px;
position: absolute;
left: 0;
background: rgb(255, 255, 255);
}
.p-hamburgerBar:nth-child(1) {
top: 0;
}
.p-hamburgerBar:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.p-hamburgerBar:nth-child(3) {
top: 100%;
transform: translateY(-100%);
}
/* リセットCSS */
button {
border-color: transparent;
background: transparent;
cursor: pointer;
}
/* ↑ハンバーガーロゴここまで*/
.p-headerTitle {
font-size: 5vw;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.p-spBr {
display: none; /*320px以上では改行タグを無効に*/
}
.p-about,
.p-blog {
margin: 80px 20px 0 20px;
}
.p-slider,
.p-workList {
margin-top: 80px;
}
.p-work {
background-color: #efefef;
padding: 60px 20px 20px 20px;
}
.p-about,
.p-aboutMainTitle,
.p-workMainTitle {
font-size: 5vw;
text-align: center;
color: #595959;
}
.p-blogMainTitle {
font-size: 5vw;
text-align: center;
color: #595959;
}
/* 見出しセンター オレンジ下線 */
.p-aboutConceptWrap,
.p-workConceptWrap,
.p-blogConceptWrap {
text-align: center;
}
.p-aboutConcept,
.p-workConcept,
.p-blogConcept {
margin-bottom: 2%;
text-align: center;
margin: 30px 0;
position: relative;
display: inline-block;
color: grey;
font-size: 2.2vw;
}
.p-aboutConceptWrap .p-aboutConcept::before,
.p-workConceptWrap .p-workConcept::before,
.p-blogConceptWrap .p-blogConcept::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -50px;
border-bottom: 3px solid #ffd743;
width: 17%;
margin: 0 auto;
}
.p-aboutTitle,
.p-workTitle,
.p-blogTitle {
font-size: 20px;
margin: 4% 0;
text-align: center;
color: #595959;
font-weight: normal;
}
.p-aboutConcept,
.p-workConcept,
.p-blogConcept {
text-align: center;
}
.p-workDescription {
text-align: center;
margin: 2% 0 7% 0;
color: grey;
}
.p-slider__flexItem {
border-radius: 15px;
object-fit: cover;
margin-bottom: 5%;
height: 200px;
width: 100%;
}
.p-workIcon img {
margin: 0 auto;
width: 70px;
height: 70px;
}
.p-blogItemTop,
.p-blogItemMiddle,
.p-blogItemBottom {
display: block;
}
.p-blogItemBottom {
margin-bottom: 12%;
}
.p-dummy {
width: 100%;
}
.p-blogItemMiddleWrapper {
margin-top: 20px;
margin-right: 30px;
width: 100%;
text-align: left;
}
.c-moreInfo {
background-color: #ffc700;
width: 100%;
height: 30%;
padding: 2%;
color: #ffffff;
font-size: 2vw;
border: none;
border-radius: 3px;
}
.p-blogItemTopWrapper,
.p-blogItemTopMiddle,
.p-blogItemBottomWrapper {
margin: 0;
width: 100%;
}
}
@media screen and (max-width: 375px) {
.p-columnBold,
.p-columnNormal,
.p-columnLight {
margin-top: 20px;
}
.p-headerTitle {
font-size: 11vw;
white-space: nowrap;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.p-spBr {
display: none; /*320px以上では改行タグを無効に*/
}
.p-about,
.p-aboutMainTitle,
.p-workMainTitle,
.p-blogMainTitle {
font-size: 8vw;
text-align: center;
color: #595959;
}
.p-aboutConcept,
.p-workConcept,
.p-blogConcept {
text-align: center;
font-size: 5vw;
}
.p-aboutConceptWrap .p-aboutConcept::before,
.p-workConceptWrap .p-workConcept::before,
.p-blogConceptWrap .p-blogConcept::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -50px;
border-bottom: 2px solid #ffd743;
width: 30%;
margin: 0 auto;
}
.p-workIcon img {
margin: 0 auto;
width: 60px;
height: 60px;
}
.c-moreInfo {
background-color: #ffc700;
width: 100%;
height: 30%;
padding: 4%;
color: #ffffff;
font-size: 2vw;
border: none;
border-radius: 3px;
}
.p-column {
color: #595959;
font-weight: normal;
margin: 6% 0;
}
.p-text {
color: grey;
margin-bottom: 20%;
}
}
@media screen and (max-width: 320px) {
.p-spBr {
display: block; /*320px以下で改行タグを有効に*/
}
.p-about,
.p-aboutMainTitle,
.p-workMainTitle,
.p-blogMainTitle {
font-size: 10vw;
text-align: center;
color: #595959;
}
.p-aboutConcept,
.p-workConcept,
.p-blogConcept {
line-height: 1.8;
text-align: center;
font-size: 5.5vw;
}
.p-aboutTitle,
.p-workTitle,
.p-blogTitle {
font-size: 20px;
margin: 9% 0;
text-align: center;
color: #595959;
}
.p-workDescription {
text-align: center;
margin: 2% 0 15% 0;
color: grey;
}
}
app.css
/*// ==========================================================================
// Foundation
// ==========================================================================*/
@import "foundation/_reset.css";
@import "foundation/_base.css";
@import "foundation/_var.css";
@import "foundation/_font.css";
/*// ==========================================================================
// Layout
// ==========================================================================*/
/*// ==========================================================================
// Object
// ==========================================================================*/
/*// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------*/
/*// -----------------------------------------------------------------
// Project
// -----------------------------------------------------------------*/
@import "object/projects/_index.css";
/*// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------*/
@import "utilities/_utility.css";
- 使用言語・ライブラリのバージョン
HTML Living Standard
CSS3
0
