Skip to content

sora / sanitary-net

Go to a project
Commit aee8517d by o.kimura
Options

T!23

parent 2d58c164
Inline Side-by-side
Showing with 71 additions and 187 deletions
select_lang/css/style.css
...@@ -100,7 +100,7 @@ h3 { ...@@ -100,7 +100,7 @@ h3 {
} }
.flx_box a { .flx_box a {
width: 30%; width: 33%;
} }
.flx_box a:hover { .flx_box a:hover {
......
select_lang/index.html
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_jp.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common_jp.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css?v=20240527" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js?ver=191024"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/common.js?ver=191024"></script>
...@@ -74,13 +74,13 @@ ...@@ -74,13 +74,13 @@
<div class="block"> <div class="block">
<h2 class="line">Please select a language.</h2> <h2 class="line">Please select a language.</h2>
<div class="flx_box"> <div class="flx_box">
<a href=""><div class="lang_box">English ▶</div></a> <a href=""><div class="lang_box">ENGLISH ▶</div></a>
<a href=""><div class="lang_box">CHINESE(Traditional) ▶</div></a> <a href=""><div class="lang_box">(CHINESE(Tradetional) (中文(繁体) ▶</div></a>
<a href=""><div class="lang_box">CHINESE(Simplified) ▶</div></a> <a href=""><div class="lang_box">(CHINESE(Simplified) (中文(简体) ▶</div></a>
</div> </div>
<div class="flx_box"> <div class="flx_box">
<a href=""><div class="lang_box">KOREAN ▶</div></a> <a href=""><div class="lang_box">KOREAN(한국어) ▶</div></a>
<a href="/utsukushitoilet/howtouse/use.html"><div class="lang_box">JAPANESE ▶</div></a> <a href="/utsukushitoilet/howtouse/use.html"><div class="lang_box">(JAPANESE(日本語) ▶</div></a>
<a href="" class="invisible"><div class="lang_box">&nbsp;</div></a> <a href="" class="invisible"><div class="lang_box">&nbsp;</div></a>
</div> </div>
......
select_lang/use.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>温水洗浄便座を使ってみましょう！ : JAPAN TOILET INFORMATION -NIPPON UTSUKUSHI TOILET-</title>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-N4F24ZD');
</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_jp.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js?ver=191024"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js?ver=191024"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4F24ZD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<script type="text/javascript">
<!--
includeHead_Ja('div');
//
-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block" id="breadcrumbs_area">
<p class="breadcrumbs"><a href="/utsukushitoilet/">TOP</a> &gt; <em>日本のトイレ事情-トイレ内の器具の使い方-温水洗浄便座を使ってみましょう！</em></p>
</div>
<div class="block">
<h1>温水洗浄便座を使ってみましょう！</h1>
<p>トイレを利用した際は、おしりが洗えてきれいになる温水洗浄便座を使ってみましょう。</p>
<h2 class="line"><span>01</span>温水洗浄便座の使い方（その1）</h2>
<div class="box">
<div class="left02">
便座の横の操作パネルか、壁のリモコンで操作します。<br>
※操作は、必ず便座に座った状態で行ってください。<br>
※洗浄は、10～20秒間程度とし、洗いすぎに注意しましょう。
</div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p>
</div>
<div class="point flx_box">
<div class="side">
<img src="/utsukushitoilet/howtouse/images/point1.jpg" alt="point!" width="150" height="auto">
<img src="/utsukushitoilet/howtouse/images/point2.jpg" alt="point!" width="140" height="auto">
</div>
<div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/stop.png" width="100" height="auto"><br>
<p class="ft120"><b>洗浄ストップ</b></p>
<p class="txt_left">このボタンを押すと、おしり洗浄、ビデ洗浄が止まります</p>
</div>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/wash.png" width="100" height="auto"><br>
<p class="ft120"><b>おしり洗浄</b></p>
<p class="txt_left">このボタンを押すと、温水でおしりを洗います</p>
</div>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/bidet.png" width="100" height="auto"><br>
<p class="ft120"><b>ビデ洗浄</b></p>
<p class="txt_left">このボタンを押すと、温水で女性のデリケートゾーンを洗います</p>
</div>
<div class="clear"></div>
</div>
</div>
<p class="lead_btm">温水洗浄便座を使ったあとは、備え付けのトイレットペーパーでおしりの水滴をふき取ってください。</p>
</div>
<div class="block">
<p>温水は強さや位置が調整できるものがあります。</p>
<h2 class="line"><span>02</span>温水洗浄便座の使い方（その2）</h2>
<div class="box">
<div class="left02">
温水洗浄便座を利用している最中に、便座の横の操作パネルか、<br>壁のリモコンで操作します。
</div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p>
</div>
<div class="point flx_box">
<div class="side">
<img src="/utsukushitoilet/howtouse/images/point1.jpg" alt="point!" width="150" height="auto">
<img src="/utsukushitoilet/howtouse/images/point2.jpg" alt="point!" width="140" height="auto">
</div>
<div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner_2">
<img src="/utsukushitoilet/howtouse/images/suisei.png" width="180" height="auto"><br><br>
<p class="txt_left">温水の強さが調整できます。お好みの強さでご利用ください。</p>
</div>
<div class="pict_inner_3">
<img src="/utsukushitoilet/howtouse/images/position.png" width="180" height="auto"><br><br>
<p class="txt_left">温水の出る位置を前後に調整できるものがあります。<br>
お好みの位置でご利用ください。</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="block">
<p class="lead_btm2">※製品によって、操作部の表示が異なるものがあります。</p>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//
-->
</script>
</body>
</html>
trend/spread.html
...@@ -98,7 +98,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> ...@@ -98,7 +98,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
※出典：内閣府 消費動向調査</span></p> ※出典：内閣府 消費動向調査</span></p>
<p>温水洗浄便座は、1967年に伊奈製陶(現:LIXIL)が国産初の温水洗浄便座付洋風便器「サニタリーナ 61」の発売を開始、以後、国民の清潔志向の高まりや、消費者ニーズに対応した機能性・快適性の向上も相まって、徐々に普及しています。</p> <p>温水洗浄便座は、1967年に伊奈製陶(現:LIXIL)が国産初の温水洗浄便座付洋風便器「サニタリーナ 61」の発売を開始、以後、国民の清潔志向の高まりや、消費者ニーズに対応した機能性・快適性の向上も相まって、徐々に普及しています。</p>
<p>温水洗浄便座の普及率は、2016年3月に80％を超え、トイレの水洗化を終えた一般家庭には、ほぼ普及したと推測されます。<br /> <p>温水洗浄便座の普及率は、2016年3月に80％を超え、トイレの水洗化を終えた一般家庭には、ほぼ普及したと推測されます。<br />
温水洗浄便座は、一般家庭に限らず、オフィスビルや商業施設、ホテル、鉄道、駅舎、2010年代には旅客機 といったパブリック用途にも採用されるようになり、現在では日本人にとって必需品といわれるまで生活に密 着した衛生機器となっています。<br /> 温水洗浄便座は、一般家庭に限らず、オフィスビルや商業施設、ホテル、鉄道、駅舎、2010年代には旅客機といったパブリック用途にも採用されるようになり、現在では日本人にとって必需品といわれるまで生活に密着した衛生機器となっています。<br />
国内における出荷台数は、近年の長期使用における製品安全の観点からも、買い替え需要が増加しており、省エネ・節水性能等に優れた製品に置き換わることにより、さらなるCO<span class="co2">2</span>削減への貢献も大いに期待されます。</p> 国内における出荷台数は、近年の長期使用における製品安全の観点からも、買い替え需要が増加しており、省エネ・節水性能等に優れた製品に置き換わることにより、さらなるCO<span class="co2">2</span>削減への貢献も大いに期待されます。</p>
<p>また、2012年には歴史的価値が認められ、新しいトイレ習慣を創造し国民生活に対して貢献した機械として、家庭で使用される機械としては初めて、一般社団法人 日本機械学会の「機械遺産」としても認定されました。</p> <p>また、2012年には歴史的価値が認められ、新しいトイレ習慣を創造し国民生活に対して貢献した機械として、家庭で使用される機械としては初めて、一般社団法人 日本機械学会の「機械遺産」としても認定されました。</p>
</div> </div>
......
utsukushitoilet/howtouse/css/style.css
...@@ -107,12 +107,11 @@ h3 { ...@@ -107,12 +107,11 @@ h3 {
margin-left: auto; margin-left: auto;
width: 18%; width: 18%;
padding: 10px; padding: 10px;
border: 1px solid #e1e0db;
text-align: center; text-align: center;
} }
#use .right.sq { #use .right.sq {
width: width: 105%;
} }
#use .right span { #use .right span {
...@@ -216,7 +215,7 @@ h3 { ...@@ -216,7 +215,7 @@ h3 {
.under_menu_box.manage a { .under_menu_box.manage a {
color: #e9573e; color: #e9573e;
background-color: transparent; background-color: transparent;
font-size: 120%; font-size: 160%;
} }
.under_menu_box.manage a::after { .under_menu_box.manage a::after {
...@@ -246,7 +245,7 @@ h3 { ...@@ -246,7 +245,7 @@ h3 {
.lead_btm { .lead_btm {
position: absolute; position: absolute;
bottom: -38px; top: 101%;
justify-content: center; justify-content: center;
left: 20%; left: 20%;
display: flex; display: flex;
...@@ -265,6 +264,14 @@ h3 { ...@@ -265,6 +264,14 @@ h3 {
border: none !important border: none !important
} }
.point .side img:nth-child(1) {
margin-bottom: 10px;
}
.point .side img:nth-child(2) {
margin-top: 10px;
}
.pict_inner { .pict_inner {
width: 33%; width: 33%;
float: left; float: left;
...@@ -272,14 +279,14 @@ h3 { ...@@ -272,14 +279,14 @@ h3 {
} }
.pict_inner_2 { .pict_inner_2 {
width: 45%; width: 46%;
float: left; float: left;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
} }
.pict_inner_3 { .pict_inner_3 {
width: 45%; width: 46%;
float: left; float: left;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
...@@ -289,8 +296,18 @@ h3 { ...@@ -289,8 +296,18 @@ h3 {
font-size: 120%; font-size: 120%;
} }
.second .point p.txt_left { .second .point p.txt_left1 {
text-align: left;
padding-right: 20px;
}
.second .point p.txt_left2 {
text-align: left; text-align: left;
padding-right: 0px;
}
.second .point > div {
margin: 0px auto 0 auto;
} }
@media screen and (max-width:640px) { @media screen and (max-width:640px) {
...@@ -302,6 +319,10 @@ h3 { ...@@ -302,6 +319,10 @@ h3 {
position: relative; position: relative;
} }
.second .point p.txt_left {
padding-right: 0px;
}
.second .point { .second .point {
margin-bottom: 400px; margin-bottom: 400px;
} }
...@@ -320,7 +341,7 @@ h3 { ...@@ -320,7 +341,7 @@ h3 {
.lead_btm { .lead_btm {
position: absolute; position: absolute;
bottom: -330px; top: 118%;
justify-content: center; justify-content: center;
left: 0; left: 0;
display: flex; display: flex;
...@@ -328,7 +349,7 @@ h3 { ...@@ -328,7 +349,7 @@ h3 {
.lead_btm2 { .lead_btm2 {
left: auto; left: auto;
bottom: 160px; bottom: 140px;
} }
.point .side { .point .side {
...@@ -336,11 +357,32 @@ h3 { ...@@ -336,11 +357,32 @@ h3 {
} }
.ft120 { .ft120 {
font-size: 100%!important; font-size: 100% !important;
} }
.second .point > div.pict{
.second .point > div.pict {
padding: 30px 5px 0px 8px; padding: 30px 5px 0px 8px;
} }
.point .side img:nth-child(1) {
margin-bottom: 0px;
margin-right: 5px;
}
.point .side img:nth-child(2) {
margin-top: 0px;
margin-left: 5px;
}
.second .point p.txt_left1 {
text-align: center;
padding-right: 0px;
}
.second .point p.txt_left2 {
text-align: center;
padding-right: 0px;
}
} }
/* 0-640px ----*/ /* 0-640px ----*/
......
utsukushitoilet/howtouse/images/_point1.jpg
utsukushitoilet/howtouse/images/_point1.jpg

36.4 KB | W: | H:

utsukushitoilet/howtouse/images/_point1.jpg

66.3 KB | W: | H:

utsukushitoilet/howtouse/images/_point1.jpg
utsukushitoilet/howtouse/images/_point1.jpg
utsukushitoilet/howtouse/images/_point1.jpg
utsukushitoilet/howtouse/images/_point1.jpg
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/howtouse/images/_point2.jpg
utsukushitoilet/howtouse/images/_point2.jpg

32.1 KB | W: | H:

utsukushitoilet/howtouse/images/_point2.jpg

59.1 KB | W: | H:

utsukushitoilet/howtouse/images/_point2.jpg
utsukushitoilet/howtouse/images/_point2.jpg
utsukushitoilet/howtouse/images/_point2.jpg
utsukushitoilet/howtouse/images/_point2.jpg
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/howtouse/images/point1.jpg
utsukushitoilet/howtouse/images/point1.jpg

66.3 KB | W: | H:

utsukushitoilet/howtouse/images/point1.jpg

42.4 KB | W: | H:

utsukushitoilet/howtouse/images/point1.jpg
utsukushitoilet/howtouse/images/point1.jpg
utsukushitoilet/howtouse/images/point1.jpg
utsukushitoilet/howtouse/images/point1.jpg
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/howtouse/images/point2.jpg
utsukushitoilet/howtouse/images/point2.jpg

59.1 KB | W: | H:

utsukushitoilet/howtouse/images/point2.jpg

34.5 KB | W: | H:

utsukushitoilet/howtouse/images/point2.jpg
utsukushitoilet/howtouse/images/point2.jpg
utsukushitoilet/howtouse/images/point2.jpg
utsukushitoilet/howtouse/images/point2.jpg
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/howtouse/index.html
...@@ -134,13 +134,6 @@ ...@@ -134,13 +134,6 @@
<li><img src="images/use02_img02.jpg" alt=""></li> <li><img src="images/use02_img02.jpg" alt=""></li>
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
<h3>操作部イラストの意味</h3>
<ul id="operation">
<li><img src="images/use02_img03.gif" alt=""></li>
<li><img src="images/use02_img04.gif" alt=""></li>
<li><img src="images/use02_img05.gif" alt=""></li>
</ul>
<div class="clear"></div>
<div class="point"> <div class="point">
<div class="use"> <div class="use">
......
utsukushitoilet/howtouse/use.html
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
※操作は、必ず便座に座った状態で行ってください。<br> ※操作は、必ず便座に座った状態で行ってください。<br>
※洗浄は、10～20秒間程度とし、洗いすぎに注意しましょう。 ※洗浄は、10～20秒間程度とし、洗いすぎに注意しましょう。
</div> </div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p> <p class="right sq"><img src="images/onsui.jpg" alt="" width="150" height="150"></p>
</div> </div>
<div class="point flx_box"> <div class="point flx_box">
...@@ -86,17 +86,17 @@ ...@@ -86,17 +86,17 @@
<div class="pict_inner"> <div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/stop.png" width="100" height="auto"><br> <img src="/utsukushitoilet/howtouse/images/stop.png" width="100" height="auto"><br>
<p class="ft120"><b>洗浄ストップ</b></p> <p class="ft120"><b>洗浄ストップ</b></p>
<p class="txt_left">このボタンを押すと、おしり洗浄、ビデ洗浄が止まります</p> <p class="txt_left1">このボタンを押すと、おしり洗浄、ビデ洗浄が止まります</p>
</div> </div>
<div class="pict_inner"> <div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/wash.png" width="100" height="auto"><br> <img src="/utsukushitoilet/howtouse/images/wash.png" width="100" height="auto"><br>
<p class="ft120"><b>おしり洗浄</b></p> <p class="ft120"><b>おしり洗浄</b></p>
<p class="txt_left">このボタンを押すと、温水でおしりを洗います</p> <p class="txt_left1">このボタンを押すと、温水でおしりを洗います</p>
</div> </div>
<div class="pict_inner"> <div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/bidet.png" width="100" height="auto"><br> <img src="/utsukushitoilet/howtouse/images/bidet.png" width="100" height="auto"><br>
<p class="ft120"><b>ビデ洗浄</b></p> <p class="ft120"><b>ビデ洗浄</b></p>
<p class="txt_left">このボタンを押すと、温水で女性のデリケートゾーンを洗います</p> <p class="txt_left2">このボタンを押すと、温水で女性のデリケートゾーンを洗います</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
...@@ -107,13 +107,13 @@ ...@@ -107,13 +107,13 @@
<div class="block"> <div class="block">
<p>温水は強さや位置が調整できるものがあります。</p>
<h2 class="line"><span>02</span>温水洗浄便座の使い方（その2）</h2> <h2 class="line"><span>02</span>温水洗浄便座の使い方（その2）</h2>
<div class="box"> <div class="box">
<div class="left02"> <div class="left02">
<p>温水は強さや位置が調整できるものがあります。</p>
温水洗浄便座を利用している最中に、便座の横の操作パネルか、<br>壁のリモコンで操作します。 温水洗浄便座を利用している最中に、便座の横の操作パネルか、<br>壁のリモコンで操作します。
</div> </div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p> <p class="right sq"><img src="images/onsui.jpg" alt="" width="150" height="150"></p>
</div> </div>
<div class="point flx_box"> <div class="point flx_box">
<div class="side"> <div class="side">
...@@ -123,12 +123,12 @@ ...@@ -123,12 +123,12 @@
<div class="pict"> <div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2> <h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner_2"> <div class="pict_inner_2">
<img src="/utsukushitoilet/howtouse/images/suisei.png" width="180" height="auto"><br><br> <img src="/utsukushitoilet/howtouse/images/suisei.jpg" width="220" height="auto"><br><br>
<p class="txt_left">温水の強さが調整できます。お好みの強さでご利用ください。</p> <p class="txt_left1">温水の強さが調整できます。お好みの強さでご利用ください。</p>
</div> </div>
<div class="pict_inner_3"> <div class="pict_inner_3">
<img src="/utsukushitoilet/howtouse/images/position.png" width="180" height="auto"><br><br> <img src="/utsukushitoilet/howtouse/images/position.jpg" width="220" height="auto"><br><br>
<p class="txt_left">温水の出る位置を前後に調整できるものがあります。<br> <p class="txt_left2">温水の出る位置を前後に調整できるものがあります。<br>
お好みの位置でご利用ください。</p> お好みの位置でご利用ください。</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment