JSFiddle - React, Tailwind, and code Playground

by elichoong

HTML

<html>
<body>

<a href="https://www.storm.mg/category/104">風生活</a>
<a href="https://www.storm.mg/life-category/s24255">旅遊</a>
<a href="https://www.storm.mg/life-category/s34513">日本</a>
 
<h1>看到日本超商廁所貼「無法外借」就快離開吧！日網友揭超商內「3個細節」秒判斷附近治安</h1>

<a class="pattern" href="https://www.storm.mg/authors/49552/%E4%B8%AD%E5%A4%AE%E7%A4%BE">中央社</a> 
2019-04-08 11:54 <span class="pPattern">95025 人氣</span>

<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2019/04/08/20190408-113514_U3792_M511224_5020.jpg?itok=F4L-qzGD" width="540" height="370">
<p class="pPattern">你去日本玩有注意過超商內的擺設嗎？其實暗藏了3項治安參考指標！（圖/flickr）</p>
<br/>
<body>
<p class="first">
日本便利商店龍頭7-11最近為了24小時營業引發總公司與加盟店間爭議，24小時營業為民眾帶來很多方便，但便利商店在提供便利生活背後，其實還暗藏了3項治安參考指標。
</p>
<br/>
<h3>1. 女性雜誌數量</h3>
<br/>
<p>
日本便利商店書刊架上通常有5大類雜誌，分別是女性雜誌、漫畫雜誌、八卦雜誌、商業雜誌及成人雜誌；為了滿足大多數顧客需求，比率上大致各為約20%。日本TBS電視台節目2017年曾報導，便利商店書刊架上的女性雜誌所占比率，可以當成一個判斷治安良好與否的指標。如果陳列的女性雜誌數量超過全體雜誌2成以上，代表這家便利商店附近的治安可能相當不錯。
<br/><br/>
日本節目進行探訪，發現東京大學所在地的東京都文京區，87家便利商店中有高達63家的女性雜誌數量逾2成。
<br/><br/>
對照東京都警視廳公布的2015年犯罪發生率調查，文京區以不到1%犯罪發生率名列犯罪最少的第2名，跟首善的大田區相去不遠；而台東區、新宿區及澀谷區，犯罪率都逾2%。
由於便利商店會依據客群需求而進貨，<strong>如果女性雜誌擺放得多，代表這個區域女性較多，顯示是一個即使夜晚到便利商店都很安全的區域。</strong>
<br/><br/>
有日本網友在部落格分享自己的經驗談，<strong>如果便利商店擺放很多電視雜誌的話，代表這個區域可能住不少高齡者；如果擺放很多經濟類雜誌的話，代表這家店可能有不少上班族客人。</strong>
</p>
<br/><br/>
<h3>2. 雜誌可否在超商內閱覽</h3>
<br/>
<p>
除了女性雜誌占全體雜誌比率，另一個跟雜誌有關的指標是「可不可以在店內閱覽」。
<br/><br/>
一般來說，日本便利商店書刊架都設置在落地窗邊，如果這家店讓顧客在店內自由閱覽，不僅能讓店裡看起來熱鬧一點，也可以給其他顧客一種安心的感覺，對防止犯罪有所助益。
<br/><br/>
但日本也有一些便利商店會把雜誌等書刊加上透明封套，並掛著「禁止閱覽」告示，不讓顧客自由取閱。之所以這麼做的原因，很有可能是店家為了防止竊盜行為。
<br/><br/>
因為如果有顧客站在書刊架前閱讀，可以讓有心順手牽羊的人，利用這群站立閱讀的顧客作為掩護。
<br/><br/>
店家禁止顧客在店內閱讀的作法，很可能讓想看雜誌的顧客跑到其他店家去，造成顧客流失；但即使如此還是禁止顧客在店內閱讀的話，就可以想像可能是被順手牽羊的損失，已大於客人流失的損失。
<br/><br/>
當然也有部分便利商店店家禁止顧客閱讀的原因，單純怕雜誌等商品有所污損。
</p>
<br/><br/>
<h3>3....

CSS

body{
  background-color:rgb(90%,90%,90%);
  margin:10px;
  padding:10px;
}

a{
  font-family:Microsoft Jhenghei;
  color:black;
  font-size:1.15em;
  font-weight:bold;
  text-decoration:none;
}

h1{
  font-family:Microsoft Jhenghei;
  color:rgb(20%,20%,20%);
}

.pattern{
   font-family:微軟正黑體;
   color:red;
   font-size:1em;
}

p{
  font-family:Microsoft Jhenghei;
}

.first::first-letter {
  font-weight: bold;
  color: red;
  font-size: 35px;
  line-height: 50px;
  border-bottom: 3px solid red;
}

span.pattern{
  color:grey;
}

.pPattern{
  font-family:Microsoft Jhenghei;
  color:grey;
  font-size:0.9em;
}

h3{
  font-family:Microsoft Jhenghei;
  color:red;
}