Fellica PM Site 0712

2022年9月
月	火	水	木	金	土	日
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

07 September

html/css, Responsive

コーディング演習（Casablanca）

使用テキスト

カサブランカ
カサブランカはヨーロッパビンテージ家具の輸入販売のスペシャリストです

Casa Blanca
European Import Furniture

HOME
カサブランカ案内
ビンテージ家具とは？
個人情報保護
お問合せ

くつろぎの空間を演出

インテリアショップカサブランカへようこそ！
ヨーロッパ家具・インテリアをイタリア・スペインより直輸入。
居心地の良いダイニングルーム、心安らぐリビング、ベッドルーム・・・・今、求められる快適空間をカサブランカはご提供します。

イタリア製高級ベッドの画像

まるでフランス映画に出てくるようなスタイルの天蓋付きウッドベッドです。こんなベッドに横たわるあなたはヒロインです。プリンセスなハウススタイリングを演出するお道具として、お使いください。

素材は質量感のあるパイン材を使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。

使用画像

以下背景画像

html(09/14)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ヨーロッパビンテージ家具の輸入販売店：CASABLANCA</title>
<meta name="description" content="ヨーロッパビンテージ家具の輸入販売のカサブランカです。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(function(){
$('#bxslider').bxSlider({
  mode:"horizontal",
  auto:true
});
});
</script>

<style>
/* 周りの余白削除 */
.bx-wrapper{
border: 0;
}
</style>
</head>
<body>

<!-- Header -->
<header class="container">
<h1>カサブランカ</h1>
<p>カサブランカは家具の輸入販売のスペシャリストです。</p>
</header>

<!--キーヴィジュアル-->
<div id="bxslider">
<div class="keyVis img1">
<p class="container"><span>Casa Blanca</span>
European Import Furniture</p>
</div>
<div class="keyVis img2">
<p class="container"><span>Casa Blanca</span>
European Import Furniture</p>
</div>
<div class="keyVis img3">
<p class="container"><span>Casa Blanca</span>
European Import Furniture</p>
</div>
</div>

<!-- navigation -->
<nav class="pcnav">
<ul class="container">
<li><a href="#">HOME</a></li>
<li><a href="#">カサブランカ案内</a></li>
<li><a href="#">ビンテージ家具とは？</a></li>
<li><a href="#">セール情報</a></li>
<li><a href="#">お問合せ</a></li>
</ul>
</nav>

<!-- Sp部品 -->
<div class="btn">
<i class="fa-solid fa-burger"></i>
</div>
<nav class="spnav">
<ul class="container">
<li><a href="#">HOME</a></li>
<li><a href="#">カサブランカ案内</a></li>
<li><a href="#">ビンテージ家具とは？</a></li>
<li><a href="#">セール情報</a></li>
<li><a href="#">お問合せ</a></li>
</ul>
</nav>

<div class="container">
<!-- Main content -->
<main>
<section>
<h2>くつろぎの空間を演出</h2>
<p>インテリアショップカサブランカへようこそ！</p>
<p>ヨーロッパ家具・インテリアをイタリア・スペインより直輸入。<br>居心地の良いダイニングルーム、心安らぐリビング、ベッドルーム・・・・今、求められる快適空間をカサブランカはご提供します。</p>
<p><img src="img/bed.jpg" alt="イタリア製高級ベッド"></p>
<p>まるでフランス映画に出てくるようなスタイルの天蓋付きウッドベッドです。こんなベッドに横たわるあなたはヒロインです。プリンセスなハウススタイリングを演出するお道具として、お使いください。</p>
<p>素材は質量感のあるパイン材を使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>
</section>     
</main>
<!-- sidebar -->
<div class="sidebar">
<!--カテゴリーメニュー-->
<section>
<h2>CATEGORIES</h2>
<ul>
<li><a href="#">ソファー</a></li>
<li><a href="#">ベッド</a></li>
<li><a href="#">テーブル</a></li>
<li><a href="#">キッチン</a></li>
</ul>
</section>
<!--バナー-->
<a href="#"><img src="img/banner.jpg" alt="大特価セール開催中の広告バナー"></a>
</div>

</div><!--/.container-->

<!--footer-->
<footer>
<p class="container"><small>Copyright &copy; CASA BLANCA All rights reserved.</small></p>
</footer>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<!DOCTYPE html>

<head>

<title>ヨーロッパビンテージ家具の輸入販売店：CASABLANCA</title>

$(function(){

$('#bxslider').bxSlider({

mode:"horizontal",

auto:true

});

</script>

<style>

/* 周りの余白削除 */

.bx-wrapper{

border: 0;

}

</style>

</head>

<body>

<h1>カサブランカ</h1>

<p>カサブランカは家具の輸入販売のスペシャリストです。</p>

</header>

<p class="container"><span>Casa Blanca</span>

European Import Furniture</p>

</div>

<p class="container"><span>Casa Blanca</span>

European Import Furniture</p>

</div>

<p class="container"><span>Casa Blanca</span>

European Import Furniture</p>

</div>

<li><a href="#">カサブランカ案内</a></li>

<li><a href="#">ビンテージ家具とは？</a></li>

<li><a href="#">セール情報</a></li>

</ul>

</nav>

</div>

<li><a href="#">カサブランカ案内</a></li>

<li><a href="#">ビンテージ家具とは？</a></li>

<li><a href="#">セール情報</a></li>

</ul>

</nav>

<main>

<h2>くつろぎの空間を演出</h2>

<p>インテリアショップカサブランカへようこそ！</p>

<p>ヨーロッパ家具・インテリアをイタリア・スペインより直輸入。<br>居心地の良いダイニングルーム、心安らぐリビング、ベッドルーム・・・・今、求められる快適空間をカサブランカはご提供します。</p>

<p>まるでフランス映画に出てくるようなスタイルの天蓋付きウッドベッドです。こんなベッドに横たわるあなたはヒロインです。プリンセスなハウススタイリングを演出するお道具として、お使いください。</p>

<p>素材は質量感のあるパイン材を使用しております。マットはポケットコイルをご用意しております価格にはマットが含まれております。手作業で製作しているため、それぞれ微妙に表情が異なります。あらかじめご了承ください。</p>

</section>

</main>

<h2>CATEGORIES</h2>

<ul>

</ul>

</section>

</div>

</div>

</footer>

</body>

</html>

完成イメージ

指定校

css(09/16)

@charset "utf-8";

/*----reset----*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
img {
vertical-align: bottom;
max-width: 100%;
height: auto;
}
body{
line-height: 1.0;
font-family:"Hiragino Kaku Gothic ProN",Meiryo, sans-serif;
}
/*共通css*/
.container {
max-width: 960px;
margin:0 auto;                              
padding: 0 10px;
display: flex;
justify-content: space-between;
}

/*Header*/
header.container{
padding: 10px;
align-items: center;
}
h1{
background: url(../img/logo.png) no-repeat left center;
line-height: 46px;
/*text非表示*/
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

/* Sp部品 */
.btn, .spnav{
display: none;
}

/*Key visual*/
.keyVis{
padding: 120px 0 ;
}
#bxslider .img1{
background: url(../img/sofa.jpg) no-repeat center/cover;
}
#bxslider .img2{
background: url(../img/sofa2.jpg) no-repeat center/cover;
}
#bxslider .img3{
background: url(../img/sofa3.jpg) no-repeat center/cover;
}
.keyVis>.container{
display: block;
font-size:44px;
color: #fff;
font-family: 'Italianno', cursive;
text-shadow: 2px 2px 2px #900;
}
.keyVis span{
display: block;
font-size:100px;
}

/*----Navigation---- */
.pcnav{
background:
linear-gradient(#ec1d1d,#8c0000);
}
.pcnav li {
width: 20%;
line-height:50px;
font-size: 14px;
text-align: center;
}
.pcnav a {
display: block;
color: #fff;
border-left: 1px solid #fff;
}
.pcnav li:last-child a{
border-right: 1px solid #fff;
}
.pcnav a:hover {
background:
linear-gradient(#8c0000,#900);
}

/*2カラムレイアウト*/
.wrap{
padding:30px 10px 50px;
}
main{
width:calc(100% * 630 / 960);
}
.sidebar {
width:calc(100% * 300 / 960);
}

/*コンテンツ*/
main h2 {
/* letter-spacing: 0px; */
font-size: 28px;
color:#900;
border-bottom: solid 1px #999;
padding-bottom:5px;
margin-bottom:10px;
}
main p + p{
margin-top: 10px;
line-height: 1.5;
}
main p:first-of-type{
font-size: 20px;
font-weight: bold;
color: #d30;
}
main img{
border:
10px solid #bd0202;
}

/*----サイドバー----*/
.sidebar h2 {
font-family: 'Italianno', cursive;
font-size: 48px;
letter-spacing:5px;
color:#900;
margin-bottom:10px;
}
.sidebar section{
margin-bottom: 50px;
}
.sidebar li{
line-height: 50px;
border-bottom: solid 1px #aaa;
}
.sidebar li:first-child{
border-top: solid 1px #aaa;
}
.sidebar li a {
display: block;
background: 
url(../img/listmark.png) no-repeat left center;
padding-left: 20px;
}
.sidebar li a:hover {
background-color:#fdc;
}

/*----Footer----*/
footer {
background:#d30;
color:#fff;
padding:30px 0;
}

/*09/16追加css*/
@media screen and (max-width:743px){

/*共通css*/
.container {
display:block;
}

/*Header*/
h1{
background-position: center;
}
header p{
display: none;
}

/* Hamberger */
.btn{
display: block;
width: 50px;
line-height: 50px;
font-size: 35px;
color: #900;
border:1px solid #900;
border-radius: 5px;
position: fixed;
z-index: 99999;
top:5px;
right: 5px;
text-align: center;
background: 
rgba(100%, 100%, 100%, 0.7);
}

/*Key visual*/
.keyVis{
padding: 30px 0 ;
text-align: center;
}

/*----Navigation---- */
.pcnav{
display: none;
}

/* Sp nav */
.spnav{
/* display: block; */
position:fixed;
z-index: 9999;
width:100% ;
top: 57px;
}
.spnav li{
line-height: 70px;
text-align: center;
font-size: 24px;
border-top: 1px solid #fff;
}
.spnav a{
display:block;
color: #fff;
background:
rgba(200,50,0,0.8);
background: 
rgba(80%,25%,0%,0.8);
}

/*2カラム→1カラム*/
.wrap{
padding: 20px 10px;
}
main,.sidebar{
width: auto;
}

/*h2見出し中央揃え*/
h2{
text-align: center;
}
main p,
main section p:first-of-type{
font-size: 14px;
}
/* 画像中央寄せ */
main img, .sidebar img{
display: block;
margin: 0 auto;
}
.sidebar section{
margin-bottom: 20px;
}
.sidebar li{
border: solid 1px #aaa;
border-radius: 5px;
margin-bottom: 5px;
}
.sidebar li a{
background-position:  
left 20px center;
padding-left: 40px;
}

/*Footer*/
footer{
text-align: center;
}

@media screen and (max-width:400px){

.keyVis .container{
font-size: 36px;
}
.keyVis span{
font-size: 80px;
}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

@charset "utf-8";

/*----reset----*/

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

a {

text-decoration: none;

color: inherit;

}

img {

vertical-align: bottom;

max-width: 100%;

height: auto;

}

body{

line-height: 1.0;

font-family:"Hiragino Kaku Gothic ProN",Meiryo, sans-serif;

}

/*共通css*/

.container {

max-width: 960px;

margin:0 auto;

padding: 0 10px;

display: flex;

justify-content: space-between;

}

/*Header*/

header.container{

padding: 10px;

align-items: center;

}

h1{

background: url(../img/logo.png) no-repeat left center;

line-height: 46px;

/*text非表示*/

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

}

/* Sp部品 */

.btn, .spnav{

display: none;

}

/*Key visual*/

.keyVis{

padding: 120px 0 ;

}

#bxslider .img1{

background: url(../img/sofa.jpg) no-repeat center/cover;

}

#bxslider .img2{

background: url(../img/sofa2.jpg) no-repeat center/cover;

}

#bxslider .img3{

background: url(../img/sofa3.jpg) no-repeat center/cover;

}

.keyVis>.container{

display: block;

font-size:44px;

color: #fff;

font-family: 'Italianno', cursive;

text-shadow: 2px 2px 2px #900;

}

.keyVis span{

display: block;

font-size:100px;

}

/*----Navigation---- */

.pcnav{

background:

linear-gradient(#ec1d1d,#8c0000);

}

.pcnav li {

width: 20%;

line-height:50px;

font-size: 14px;

text-align: center;

}

.pcnav a {

display: block;

color: #fff;

border-left: 1px solid #fff;

}

.pcnav li:last-child a{

border-right: 1px solid #fff;

}

.pcnav a:hover {

background:

linear-gradient(#8c0000,#900);

}

/*2カラムレイアウト*/

.wrap{

padding:30px 10px 50px;

}

main{

width:calc(100% * 630 / 960);

}

.sidebar {

width:calc(100% * 300 / 960);

}

/*コンテンツ*/

main h2 {

/* letter-spacing: 0px; */

font-size: 28px;

color:#900;

border-bottom: solid 1px #999;

padding-bottom:5px;

margin-bottom:10px;

}

main p + p{

margin-top: 10px;

line-height: 1.5;

}

main p:first-of-type{

font-size: 20px;

font-weight: bold;

color: #d30;

}

main img{

border:

10px solid #bd0202;

}

/*----サイドバー----*/

.sidebar h2 {

font-family: 'Italianno', cursive;

font-size: 48px;

letter-spacing:5px;

color:#900;

margin-bottom:10px;

}

.sidebar section{

margin-bottom: 50px;

}

.sidebar li{

line-height: 50px;

border-bottom: solid 1px #aaa;

}

.sidebar li:first-child{

border-top: solid 1px #aaa;

}

.sidebar li a {

display: block;

background:

url(../img/listmark.png) no-repeat left center;

padding-left: 20px;

}

.sidebar li a:hover {

background-color:#fdc;

}

/*----Footer----*/

footer {

background:#d30;

color:#fff;

padding:30px 0;

}

/*09/16追加css*/

@media screen and (max-width:743px){

/*共通css*/

.container {

display:block;

}

/*Header*/

h1{

background-position: center;

}

header p{

display: none;

}

/* Hamberger */

.btn{

display: block;

width: 50px;

line-height: 50px;

font-size: 35px;

color: #900;

border:1px solid #900;

border-radius: 5px;

position: fixed;

z-index: 99999;

top:5px;

right: 5px;

text-align: center;

background:

rgba(100%, 100%, 100%, 0.7);

}

/*Key visual*/

.keyVis{

padding: 30px 0 ;

text-align: center;

}

/*----Navigation---- */

.pcnav{

display: none;

}

/* Sp nav */

.spnav{

/* display: block; */

position:fixed;

z-index: 9999;

width:100% ;

top: 57px;

}

.spnav li{

line-height: 70px;

text-align: center;

font-size: 24px;

border-top: 1px solid #fff;

}

.spnav a{

display:block;

color: #fff;

background:

rgba(200,50,0,0.8);

background:

rgba(80%,25%,0%,0.8);

}

/*2カラム→1カラム*/

.wrap{

padding: 20px 10px;

}

main,.sidebar{

width: auto;

}

/*h2見出し中央揃え*/

h2{

text-align: center;

}

main p,

main section p:first-of-type{

font-size: 14px;

}

/* 画像中央寄せ */

main img, .sidebar img{

display: block;

margin: 0 auto;

}

.sidebar section{

margin-bottom: 20px;

}

.sidebar li{

border: solid 1px #aaa;

border-radius: 5px;

margin-bottom: 5px;

}

.sidebar li a{

background-position:

left 20px center;

padding-left: 40px;

}

/*Footer*/

footer{

text-align: center;

}

@media screen and (max-width:400px){

.keyVis .container{

font-size: 36px;

}

.keyVis span{

font-size: 80px;

}

Responsive設定

画像（バナー/背景）制作演習（Casablanca）お中元バナー制作演習

Fellica PM Site 0712

カテゴリー

最近の投稿

リンク

ペンツール練習サイト

コーディング演習（Casablanca）

使用テキスト

使用画像

完成イメージ

指定校

Responsive設定