Fellica PM Site 0712

2022年10月
月	火	水	木	金	土	日
	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
31

12 October

コーディング演習（ Pionner Mall2 ）

ドリアンモールテキスト

DURIAN MALL

Mall Info
シンガポールの中心街・オーチャードロードに古くからある小規模店舗群を時代の変化に合わせて整備・活性化すべく、2003年に計画が開始され翌2004年にオープンしたのがドリアンモールです。
シンガポールの歴史と融合する新しい時代のランドマークとしての役割を担い、いまや地元の若者たちに大人気のショッピングスポットとなっています。

Shop Info

ランの花の画像
フラワーショップ「Orchid（オーキッド）」

フロア情報
屋上 tropical garden（トロピカルガーデン）内
営業時間
10:00 ～ 20:00

COMMENT
シンガポール国立蘭園（The National Orchid Garden）で蘭栽培の経験を積んだオーナーが「蘭をもっと身近に」のコンセプトのもとオープンしました。シンガポール北部・クランジの契約農家で育てられた数百種類の蘭は当店ならではの品揃えです。
なかでも人気の商品は、シンガポールの国花である蘭の一種「Vanda Miss Joaquim（バンダ・ミス・ジョアキム）」。現在ご予約を受付中です。お誕生日祝いなどの贈り物もご予算に応じて承りますのでお気軽にご相談ください。

チョコレートの画像
チョコレート専門店「 Cacao Factory（カカオファクトリー）」

フロア情報
1階食品フロア
営業時間
10:00 ～ 21:00

COMMENT
カカオファクトリーでは、「世界チョコレートテイスティング選手権第２回大会」で優勝した当店のチョコレート・ソムリエが世界各国をたずねて直接買い付けた良質なチョコレートを、お求めやすい価格で皆様にご提供しています。

なかでもおすすめは、シンガポール産シナモンと唐辛子、その他数種類の香辛料をミックスしたスパイシーなチョコレート、「manis pedas（マニスプダス）」です。1日あたりの入荷数に限りがございますので、ぜひお早めにお求めください。

開発実績

汐留モール
ドリアンモール
タムリンモール

バナー画像

使用画像

html(10/12)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パイオニアモール開発</title>
<meta name="description" content="パイオニアモール開発は世界のショッピングモールを通じて人と地域を結ぶお手伝いをしています。">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap" rel="stylesheet">
</head>
<body id="mall">

<!--Header-->
<header>
<div class="container">
<h1>パイオニアモール開発</h1>
<p>世界のショッピングモールを通じて<br>人と地域を結ぶお手伝いをしています。</p>
</div>
</header>

<!--Navigation-->
<nav class="pcnav">
<ul class="container">
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">開発環境</a></li>
<li><a href="#" class="current">開発実績</a></li>
<li><a href="#">お問合せ</a></li>
</ul>
</nav>

<!-- スマホ部品 -->
<div class="btn">
<i class="fas fa-angle-double-down"></i>
<i class="fas fa-angle-double-up"></i>
</div>
<nav class="spnav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">開発環境</a></li>
<li><a href="#">開発実績</a></li>
<li><a href="#">お問合せ</a></li>
</ul>
</nav>

<!-- Topへ戻る -->
<div class="top">
<i class="fas fa-arrow-alt-circle-up"></i>
</div>

<main>
<section>

<h2>DURIAN MALL</h2>

<!-- Mall info -->
<section>
<h3>Mall Info</h3>
<p>シンガポールの中心街・オーチャードロードに古くからある小規模店舗群を時代の変化に合わせて整備・活性化すべく、2003年に計画が開始され翌2004年にオープンしたのがドリアンモールです。</p>
<p>シンガポールの歴史と融合する新しい時代のランドマークとしての役割を担い、いまや地元の若者たちに大人気のショッピングスポットとなっています。</p>
</section>
 <!-- Shop info -->
<section>
<h3>Shop Info</h3>
<!-- フラワーショップ -->
<section>
<img src="img/orkid.png" alt="蘭の画像">
<h4>フラワーショップ「Orchid（オーキッド）」</h4>
<table>
<tr><th>フロア情報</th><td>屋上 pical garden（トロピカルガーデン）内</td></tr>
<tr><th>営業時間</th><td>10:00 ～ 20:00</td></tr>
</table>
<p>COMMENT</p>
<p>シンガポール国立蘭園（The National Orchid Garden）で蘭栽培の経験を積んだオーナーが「蘭をもっと身近に」のコンセプトのもとオープンしました。シンガポール北部・クランジの契約農家で育てられた数百種類の蘭は当店ならではの品揃えです。</p>
<p>なかでも人気の商品は、シンガポールの国花である蘭の一種「Vanda Miss Joaquim（バンダ・ミス・ジョアキム）」。現在ご予約を受付中です。お誕生日祝いなどの贈り物もご予算に応じて承りますのでお気軽にご相談ください。</p>
</section>
<!-- チョコレート専門店 -->
<section>
<img src="img/choco.png" alt="チョコレートの画像">
<h4>チョコレート専門店「 Cacao Factory（カカオファクトリー）」</h4>
<table>
<tr><th>フロア情報</th><td>1階 食品フロア</td></tr>
<tr><th>営業時間</th><td>10:00 ～ 21:00</td></tr>
</table>
<p>COMMENT</p>
<p>カカオファクトリーでは、「世界チョコレートテイスティング選手権 第２回大会」で優勝した当店のチョコレート・ソムリエが世界各国をたずねて直接買い付けた良質なチョコレートを、お求めやすい価格で皆様にご提供しています。</p>
<p>なかでもおすすめは、シンガポール産シナモンと唐辛子、その他数種類の香辛料をミックスしたスパイシーなチョコレート、「manis pedas（マニスプダス）」です。1日あたりの入荷数に限りがございますので、ぜひお早めにお求めください。</p>
</section>
</section>
<!-- 開発実績 -->
<section>
<h3>開発実績</h3>
<ul>
<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>

</section>
</main>

<footer>
<p><small>Copyright &copy; 2020 All rights reserved.</small></p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$('.btn').on('touchstart',function(){
    $(this).toggleClass('up');
    $('.spnav').fadeToggle();  
 });

//Topへ戻るボタン
let topBtn = $('.top');

//スクロールが300でボタン表示
 $(window).on('scroll',function(){
  if($(this).scrollTop() > 300) { 
   topBtn.fadeIn();
       } else {
   topBtn.fadeOut();
       }
});
//スクロールしてトップへ戻る
topBtn.on('click',          function(){
 $('html,body').animate({scrollTop: 0},"swing");
 });

</script>

</body>
</html>

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

<!DOCTYPE html>

<head>

<title>パイオニアモール開発</title>

</head>

<h1>パイオニアモール開発</h1>

<p>世界のショッピングモールを通じて<br>人と地域を結ぶお手伝いをしています。</p>

</div>

</header>

</ul>

</nav>

</div>

<ul>

</ul>

</nav>

</div>

<main>

<h2>DURIAN MALL</h2>

<p>シンガポールの中心街・オーチャードロードに古くからある小規模店舗群を時代の変化に合わせて整備・活性化すべく、2003年に計画が開始され翌2004年にオープンしたのがドリアンモールです。</p>

<p>シンガポールの歴史と融合する新しい時代のランドマークとしての役割を担い、いまや地元の若者たちに大人気のショッピングスポットとなっています。</p>

</section>

<h4>フラワーショップ「Orchid（オーキッド）」</h4>

<table>

<tr><th>フロア情報</th><td>屋上 pical garden（トロピカルガーデン）内</td></tr>

</table>

<p>COMMENT</p>

<p>シンガポール国立蘭園（The National Orchid Garden）で蘭栽培の経験を積んだオーナーが「蘭をもっと身近に」のコンセプトのもとオープンしました。シンガポール北部・クランジの契約農家で育てられた数百種類の蘭は当店ならではの品揃えです。</p>

<p>なかでも人気の商品は、シンガポールの国花である蘭の一種「Vanda Miss Joaquim（バンダ・ミス・ジョアキム）」。現在ご予約を受付中です。お誕生日祝いなどの贈り物もご予算に応じて承りますのでお気軽にご相談ください。</p>

</section>

<h4>チョコレート専門店「 Cacao Factory（カカオファクトリー）」</h4>

<table>

<tr><th>フロア情報</th><td>1階食品フロア</td></tr>

</table>

<p>COMMENT</p>

<p>カカオファクトリーでは、「世界チョコレートテイスティング選手権第２回大会」で優勝した当店のチョコレート・ソムリエが世界各国をたずねて直接買い付けた良質なチョコレートを、お求めやすい価格で皆様にご提供しています。</p>

<p>なかでもおすすめは、シンガポール産シナモンと唐辛子、その他数種類の香辛料をミックスしたスパイシーなチョコレート、「manis pedas（マニスプダス）」です。1日あたりの入荷数に限りがございますので、ぜひお早めにお求めください。</p>

</section>

<ul>

<li><a href="#">汐留モール</a></li>

<li><a href="#">ドリアンモール</a></li>

<li><a href="#">タムリンモール</a></li>

</ul>

</section>

</section>

</main>

</footer>

$('.btn').on('touchstart',function(){

$(this).toggleClass('up');

$('.spnav').fadeToggle();

});

//Topへ戻るボタン

let topBtn = $('.top');

//スクロールが300でボタン表示

$(window).on('scroll',function(){

if($(this).scrollTop() > 300) {

topBtn.fadeIn();

} else {

topBtn.fadeOut();

}

});

//スクロールしてトップへ戻る

topBtn.on('click', function(){

$('html,body').animate({scrollTop: 0},"swing");

});

</script>

</body>

</html>

完成イメージ

Box構造

指定校

css

/*==== モール頁css ====*/

/* Key visual */
#mall  h2{
padding: 50px 0;
text-align: center;
color: #fff;
font-size: 36px;
font-weight: bold;
text-shadow: 
1px 1px 1px #000;
}
/* 各モールh2背景画像 */
#mall.durian h2{
background: url(../img/durian-header.jpg) no-repeat center bottom/cover;
}
#mall.shiodome h2{
background: url(../img/shiodome.jpg) no-repeat center/cover;
}
#mall.thamrin h2{
background: url(../img/thamrin.jpg) no-repeat center/cover;
}

/* コンテナ余白 */
#mall main .container{
padding: 30px 10px 50px;
}
/* 2カラム */
#mall .main{
width:
calc(100% * 600/960);
}
#mall .sidebar{
width:
calc(100% * 300/960);
}

/* モールコンテンツ */
#mall .main section + section{
margin-top:30px;
}
#mall .main h3{
color:#059;
background:
#cef  url(../img/mall-mark.png) no-repeat 10px center;
padding:20px 0 20px 50px;
margin-bottom:20px;
}

/* 段落行高 */
#mall .main p{
line-height: 1.4;
}
/*最初の段落下余白*/
#mall .main p + p{
margin-top: 10px;
}
#mall .main img{
width:130px;
padding:5px;
border:
1px solid #aaa;
/* box-sizing: border-box; */
float:left;
margin-bottom: 10px;
}
#mall .main h4{
margin-bottom:10px;
border-left:
5px solid #f60;
padding: 
5px 0 5px 5px;
line-height: 1.3;
}

#mall .infoBox{
float: right;
width:
calc(100% - 160px);
}
/*店舗情報*/
#mall .main table{
border-collapse: 
collapse;
font-size: 14px;
width:100%;
}
#mall .main th,#mall .main td{
border:1px solid #aaa;
padding:5px;
}
#mall .main  th{
/* font-weight: normal; */
background:#ddd;
/*幅を揃える*/
width:30%;
}
#mall .main td{
line-height: 1.3;
}
/*コメント*/
#mall .com{
clear:both;
font-size: 12px;
color:#fff;
background:#0cf;
width:fit-content;
margin-bottom: 5px;
border-radius:50%;
line-height: 1;
padding:0.7em 1.5em;
}
#mall .comment{
border:2px solid #0cf;
padding:10px;
}

/*----サイドバー----*/
/*開発実績*/
#mall .sidebar h3{
background:#008ec2;
color:#fff;
padding:10px;
}
#mall .sidebar h3 span{
border-left:3px solid #fff;
padding-left: 7px;
}
#mall .sidebar ul{
background:#cef;
padding:20px;
margin-bottom: 30px;
}
#mall .sidebar ul a{
padding:10px;
color:#333;
border-top:1px dotted #555;
transition:300ms;
}
#mall .sidebar li:first-child a{
border-top:none;
}
#mall .sidebar li a:hover{
background:#0695d7;
color:#fff;
}

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

/*==== モール頁css ====*/

/* Key visual */

#mall h2{

padding: 50px 0;

text-align: center;

color: #fff;

font-size: 36px;

font-weight: bold;

text-shadow:

1px 1px 1px #000;

}

/* 各モールh2背景画像 */

#mall.durian h2{

background: url(../img/durian-header.jpg) no-repeat center bottom/cover;

}

#mall.shiodome h2{

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

}

#mall.thamrin h2{

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

}

/* コンテナ余白 */

#mall main .container{

padding: 30px 10px 50px;

}

/* 2カラム */

#mall .main{

width:

calc(100% * 600/960);

}

#mall .sidebar{

width:

calc(100% * 300/960);

}

/* モールコンテンツ */

#mall .main section + section{

margin-top:30px;

}

#mall .main h3{

color:#059;

background:

#cef url(../img/mall-mark.png) no-repeat 10px center;

padding:20px 0 20px 50px;

margin-bottom:20px;

}

/* 段落行高 */

#mall .main p{

line-height: 1.4;

}

/*最初の段落下余白*/

#mall .main p + p{

margin-top: 10px;

}

#mall .main img{

width:130px;

padding:5px;

border:

1px solid #aaa;

/* box-sizing: border-box; */

float:left;

margin-bottom: 10px;

}

#mall .main h4{

margin-bottom:10px;

border-left:

5px solid #f60;

padding:

5px 0 5px 5px;

line-height: 1.3;

}

#mall .infoBox{

float: right;

width:

calc(100% - 160px);

}

/*店舗情報*/

#mall .main table{

border-collapse:

collapse;

font-size: 14px;

width:100%;

}

#mall .main th,#mall .main td{

border:1px solid #aaa;

padding:5px;

}

#mall .main th{

/* font-weight: normal; */

background:#ddd;

/*幅を揃える*/

width:30%;

}

#mall .main td{

line-height: 1.3;

}

/*コメント*/

#mall .com{

clear:both;

font-size: 12px;

color:#fff;

background:#0cf;

width:fit-content;

margin-bottom: 5px;

border-radius:50%;

line-height: 1;

padding:0.7em 1.5em;

}

#mall .comment{

border:2px solid #0cf;

padding:10px;

}

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

/*開発実績*/

#mall .sidebar h3{

background:#008ec2;

color:#fff;

padding:10px;

}

#mall .sidebar h3 span{

border-left:3px solid #fff;

padding-left: 7px;

}

#mall .sidebar ul{

background:#cef;

padding:20px;

margin-bottom: 30px;

}

#mall .sidebar ul a{

padding:10px;

color:#333;

border-top:1px dotted #555;

transition:300ms;

}

#mall .sidebar li:first-child a{

border-top:none;

}

#mall .sidebar li a:hover{

background:#0695d7;

color:#fff;

}

汐留モール

Mall Info
「東洋のマンハッタン」といわれる東京汐留。汐留シオサイト内に位置し浜離宮恩賜庭園に隣接する交通至便のこの土地に、2002年、都内最大のショッピングモール「汐留モール」が誕生しました。

銀行や医療など公共性の高いサービスや、美術館、映画館など上質なエンターテイメントを提供する多機能複合型モールとして展開しています。

Shop Info

画像
メンズビューティーサロン「hama-style（ハマスタイル）」
フロア情報 3階ビューティフロア
営業時間 10:00 ～ 21:00

COMMENT
ヘアカットデザインをはじめ、眉デザイン、ファッションコーディネート、エステ等、働くビジネスマンのプレゼンスマネジメントを応援する、新しいかたちの男性専門ビューティーサロンです。

一番の人気メニューは眉カットデザインと眼鏡コーディネート、写真撮影がセットになった「グッドフェイスフォト」。まずは眉をあなたに似合う自然な形に整え、似合う眼鏡をフィッティングします（その場でご購入いただくことも可能）。

最後に、カメラマンと気楽な会話を楽しんでいただきながら、あなたの一番いい表情を引き出して撮影します。名刺やブログの写真にと多くの方が利用されています。

画像
ステーキハウス「汐（うしお）」
フロア情報 15階レストランフロア
営業時間 10:00 ～ 23:00（L.O. 22:30）

COMMENT
精肉店を営んでいたオーナーが10年の歳月を経てオープンした本格ステーキハウスです。ステーキ用牛肉はすべてA-5クラスを使用、オーナー自ら独自のルートで買い付けています。

当店自慢のステーキソースは、ニンジン、タマネギ、セロリなどの有機野菜を3日間煮込んでから晒しで漉し、さらにひと味加えてから一晩煮込んで作るオリジナルソースです。隠し味には、小豆島産の大豆を原料に使った希少な溜まり醤油も使われています。

少人数の宴会から30名様までのパーティまでご利用いただけますのでお気軽にご相談ください。

レスポンシブ設定

CSS シグネチャーデザイン4原則

Fellica PM Site 0712

カテゴリー

最近の投稿

リンク

ペンツール練習サイト

コーディング演習（ Pionner Mall2 ）

ドリアンモールテキスト

使用画像

完成イメージ

Box構造

指定校

レスポンシブ設定