注目新聞

CSSで縦書き&新聞風に段組を行う。さらにJavaScriptで半角数字に対して角度変更を行う。

 福岡県筑紫野市の老舗旅館「二日市温泉 大丸別荘」が大浴場の湯を年2回しか入れ替えず、県に虚偽の報告書を提出したとされる事件を巡り、県警は12日、公衆浴場法違反(虚偽報告)容疑で捜査していた運営会社の前社長の男性(70)が死亡したと発表した。同日朝、市内の山道で遺体が見つかった。現場の状況などから、県警は自殺とみている。  県警によると、12日午前6時55分ごろ、筑紫野市内の山道で前社長の遺体を通行人が見つけ、110番した。駆け付けた救急隊員が、その場で死亡を確認。検視の結果、同日午前6時ごろに亡くなったとみられる。近くには前社長が使っていた車が止まっており、車内から遺書とみられる紙が見つかった。  同旅館では、県保健所が2022年8月に実施した立ち入り検査で、大浴場の湯から基準値の2倍のレジオネラ属菌が検出。旅館側は翌9月、法令に従い週1回以上は湯を入れ替えていたなどとする報告書を県に提出したが、11月の再検査で今度は基準値の最大3700倍の菌が検出された。  旅館側はその後、8月の調査で示した管理簿の内容は虚偽で、湯の入れ替えは年2回だけで、消毒も不十分だったと認めた。前社長は23年2月に開いた記者会見で謝罪した上で「利用者が少なく、19年12月ごろから従業員に湯の入れ替えはしなくてよいと自ら指示した」と説明。県に虚偽の報告をしたことも認め、3月2日付で社長を辞任した。  県は8日に刑事告発し、県警は10日に旅館と前社長宅を同容疑で捜索。ノートパソコン2台と段ボール10箱分の資料を押収し、捜査を進めていた。  県警によると、前社長への任意の取り調べはこれまで1回、10日に実施。休憩と弁護士の接見を除き計6時間17分間かかったが、前社長は淡々と応じたという。翌11日午後4時過ぎにも前社長に出頭を求め、押収したパソコンについて約10分間、確認した。12日は取り調べの予定はなかったという。  県警生活経済課の児玉英治次席は「亡くなられたことは大変残念であり、心を痛めております。ご冥福をお祈りいたします。警察の対応に問題はなかったとみています。引き続き捜査を進めていきます」などとコメントを出した イラン各地で女子生徒らを狙った毒物事件とみられる報告が相次いでいる問題に関連し、当局が100人あまりを逮捕したことが分かった。

阪神淡路大震災の犠牲者のうち、死因の約8割を占めたのが、建物の倒壊による窒息死または圧死です。このことから、大地震で命を失わないためには、「住宅の倒壊を防ぐこと」が最低かつ必須条件といえます。本稿では、住宅の倒壊を防ぐための三つの工法、「耐震」「制震」「免震」について見ていきましょう。建築物等の構造物設計・解析を専門とする谷山惠一氏が「免震工法」を推奨する理由とは? 東京都「地震で危ない街」最新ランキング…上位100 家の倒壊を防ぐための工法、「耐震」「制震」「免震」 多くの人にとって家は、1日のなかで最も長く過ごす場所だと思います。そのため、大震災発生時にあなたや家族の命を守るための第一条件は、住宅の倒壊を防ぐことです。 現在、一般的に考えられる住宅の倒壊を防ぐ方法は、建物を「耐震」「制震」「免震」のいずれかの工法で建てることです。 とはいえ、どの工法を選択しても結果が同じというわけではありません。いったい何が違うのか、考えていきます。

view source

JavaScript

$(function(){

  const elem = $('.paper');
  elem.each(function(){
  	const elemTxt = $(this).html();//
    console.log(elemTxt);
    const re = new RegExp(/([0-9]+)/, 'img');
  	const replaceTxt = elemTxt.replace(re,'<span class="han-num">$1</span>');
  	$(this).html(replaceTxt);//
  });
});

CSS

html,body{
  overflow-x:hidden;
}

#demo .news-title{
  position:absolute;
  top:0;
  right:20px;
  font-size:90px;
  line-height: 90px;
  padding:4px;
  border:1px solid #000;
  writing-mode: vertical-rl;
}
#demo .news-title p{
  padding:4px;
  border:1px solid #000;
  background-image:url(/demo/-svg/svg-pattern/sample-dot-rect2.svg);
}

.paper{
  writing-mode: vertical-rl;
  column-count:5;
  column-width:5em;
  column-rule-gap:2em;
  column-rule-style:dotted;
  padding:4px;
}

.pos0{
  position:absolute;
  top:400px;
  right:20px;
  width:40px;
  column-count:3;
}
.pos1{
  position:absolute;
  top:0;
  right:130px;
  width:400px;
}

.pos2{
  position:absolute;
  top:280px;
  right:500px;
  width:400px;
  column-count:3;
}
.news-thumb{
  position:absolute;
  top:0;
  right:500px;
  width:400px;
  filter:grayscale(100%);
}

.han-num{
  text-combine-upright: all;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-news-paper/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。