現在見本に合わせてテスト的に作成してるページがあるのですが、
なかなか思うように作れません。
今突っかかっている問題は
- ヘッダーの中央寄せがレスポンシブデザイン化できていない。
- また後述にある見本のようにテキストを写真に重ねたいと思っているのですが
うまくいかない(これもレスポンシブデザイン前提)
です。
どのように作成にすればよいか皆様からアドバイスいただけると助かります。
見本はこのようなデザインです。(画像がなぜか横のまま直せませんでした。すみません)
私の現在のコードは以下のものになります。
<HTML><CSS> ``` /* clearfix */ .clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* End clearfix */<html> <head> <meta charset="utf-8"> <title>Cha-an Special Cocktails</title> <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <div class="header-container clearfix"> <img src="img/cha_logo.gif" alt="logo_title"> <h1>Special Cocktails</h1> </div> </header><!-- /header --> <!-- contents --> <div class="liqd-container"> <div class="liqd-item-wrap"> <img src="img/cocktail_1.jpg" alt="cocktail_1"> <div class="liqd-txt-wrap"> <h3 class="txt_center">Summer Wind</h3> <p class="txt_center">Fruit Ice Balls</p> <p class="txt_center">& Peach Sparkling Jelly Juice</p> <div class="circle"><p>15</p></div> </div> </div> <div class="liqd-item-wrap"> <img src="img/cocktail_1.jpg" alt="cocktail_1"> <div class="liqd-txt-wrap"> <h3 class="txt_center">Summer Wind</h3> <p class="txt_center">Fruit Ice Balls</p> <p class="txt_center">& Peach Sparkling Jelly Juice</p> <div class="circle"><p>15</p></div> </div> </div> <div class="liqd-item-wrap"> <img src="img/cocktail_1.jpg" alt="cocktail_1"> <div class="liqd-txt-wrap"> <h3 class="txt_center">Summer Wind</h3> <p class="txt_center">Fruit Ice Balls</p> <p class="txt_center">& Peach Sparkling Jelly Juice</p> <div class="circle"><p>15</p></div> </div> </div> </div> <!-- end contents --> <footer> <p>developed by *** ****</p> </footer> </body> </html>
img{width:100%;}
h1 {font-family: 'Montserrat', sans-serif;}
.txt_center{text-align: center;}
body
{
display: block;
margin: 3% 5%;
font-family: 'Robot', sans-serif;
}
/* Header Part */
header
{
margin-bottom: 3%;
}
.header-container img
{
float: left;
width: initial;
padding: 1% 2% 1% 0;
}
.header-container h1
{
float:left;
font-weight: bold;
border-left: 1px solid brown;
border-right: 1px solid brown;
text-transform: uppercase;
padding: 1% 2%;
margin: auto;
letter-spacing: 0.1rem;
}
/* End Header Part */
/* Item Part */
/* For Liquid raiout */
.liqd-container
{
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
}
.liqd-item-wrap
{
background: rgba(242,242,242,0.5);;
padding: 20px;
width: 600px;
}
.liqd-txt-wrap
{
background: rgba(242,242,242,0.5);;
padding: 20px;
}
.textwrap h3 {color: purple}
.circle
{
background-color: purple;
text-align: center;
border-radius: 50px;
height: 50px;
width: 50px;
margin: 0 auto;
}
.circle p {
position: relative;
top:50%;
transform: translateY(-50%);
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
/* End Item Part */
/* Footer Part /
footer p
{
text-align: right;
}
/ End Footer */
お手数おかけしますが、ご協力いただけると大変助かります。 よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/03 06:51
退会済みユーザー
2017/07/03 07:28