更新ログ(HTML・CSS・JS）‐　主な内容のみ記録、後の変更・修正・改善のための参考ログ

2023/11/15沿革

沿革のJS、表示遅延があるため変更
素早く下へスクロールしたとき、表示が止まる。

変更前：

window.addEventListener('scroll', handleScroll);
handleScroll(); // 初期状態で要素が画面上に出現しているかをチェック


function handleScroll() {
　var elements = document.querySelectorAll('.timeline-content');
　var screenPosition = window.innerHeight / 1.1;

　elements.forEach(function(element) {
　　var elementPosition = element.getBoundingClientRect().top;

　　if (elementPosition < screenPosition) {
　　　element.classList.add('appear');
　　} else {
　　　element.classList.remove('appear'); // 要素が画面から外れた場合はクラスを削除する
　　}
　});
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll); // ウィンドウサイズが変わったときも処理を実行
handleScroll(); // 初期状態で要素が画面上に出現しているかをチェック



↓↓↓
変更後：

// Intersection Observer の設定
var observer = new IntersectionObserver(function (entries) {
　entries.forEach(function (entry) {
　　if (entry.isIntersecting) {
　　　entry.target.classList.add('appear');
　　　// 一度表示された要素は監視を停止する場合
　　　observer.unobserve(entry.target);
　　} else {
　　　entry.target.classList.remove('appear');
　　}
　});
}, { threshold: 0.9 }); // オプションとして threshold を設定して、交差しているかどうかを細かく調整

// 要素を取得して監視対象に追加
var elements = document.querySelectorAll('.timeline-content');
elements.forEach(function (element) {
　observer.observe(element);
});

// ウィンドウサイズが変わったときの処理
window.addEventListener('resize', function () {
　// 監視対象の要素がリサイズされる場合、再度監視対象に追加
　elements.forEach(function (element) {
　　observer.observe(element);
　});
});

// スクロールイベントのハンドリング
window.addEventListener('scroll', handleScroll);

// 初期状態で要素が画面上に出現しているかをチェック
handleScroll();

// handleScroll 関数
function handleScroll() {
　var elements = document.querySelectorAll('.timeline-content');
　var screenPosition = window.innerHeight / 1.1;

　elements.forEach(function (element) {
　　var elementPosition = element.getBoundingClientRect().top;

　　if (elementPosition < screenPosition) {
　　　element.classList.add('appear');
　　　// 一度表示された要素は監視を停止する場合
　　　observer.unobserve(element);
　　} else {
　　　element.classList.remove('appear');
　　　// 要素が画面から外れた場合、再度監視対象に追加
　　　observer.observe(element);
　　}
　});
}

2023/11/15亀岡工場

亀岡工場のJSを部分的に修正
修正前：
document.addEventListener("DOMContentLoaded", function () {
　// h2要素とarticle要素をすべて取得
　const headings = document.querySelectorAll("h2, article");

　// 要素が画面内に表示されているかを確認する関数
　function checkVisibility() {
　　// 取得した要素に対して処理を実行
　　headings.forEach(function (heading) {
　　　// 要素の矩形（bounding box）を取得
　　　const boundingBox = heading.getBoundingClientRect();
　　　// 要素が画面内に完全に表示されているかをチェック
　　　const isInViewport = (boundingBox.top >= 0 && boundingBox.bottom <= window.innerHeight);
　　　// 要素が画面内に表示されている場合、showクラスを追加してふわっと表示
　　　if (isInViewport) {
　　　　heading.classList.add("show");
　　　}
　　});
　}

　　// スクロールイベント時にcheckVisibility関数を実行
　　window.addEventListener("scroll", function() {
　　// スクロールのアニメーションに同期した更新を行う
　　window.requestAnimationFrame(checkVisibility);
　});

　// ページ読み込み時に初回のcheckVisibility関数を実行
　checkVisibility();
});

↓↓↓
修正後：
// 要素（h2, article）が画面内に出現したかどうかを判断して表示させる。
// スクロールイベントではなく Intersection Observer を使用する
// 例えば、他のページから、このページ内の特定の場所（id="extraction"）へリンク移動したとき
// スクロールイベントでは　h2（見出し）, article（文章）効果的に表示されない。
document.addEventListener("DOMContentLoaded", function () {
　// h2要素とarticle要素をすべて取得
　const headings = document.querySelectorAll("h2, article");

　// Intersection Observer の設定
　const observer = new IntersectionObserver(function (entries) {
　entries.forEach(function (entry) {
　　　// 要素が画面内に表示されている場合、showクラスを追加してふわっと表示
　　　if (entry.isIntersecting) {
　　　　entry.target.classList.add("show");
　　　　// 一度表示された要素は監視を停止する場合
　　　　observer.unobserve(entry.target);
　　　}
　　});
　});

　// 各要素を監視対象に追加
　headings.forEach(function (heading) {
　　observer.observe(heading);
　});
});

2023/11/1～13沿革

沿革のページを設置

左側に西暦を、中心にタイムライン（縦線とドット）、右側に和暦を示す。
和暦の下にその時の内容（出来事）と画像を配置する。
※線の太さや色、ドットの大きなど、デザイン的には変更が可能

将来的には、落ち着いたころにでも
↓
https://www.glico.com/jp/company/about/history/
の様にできればと・・・
ダイジェスト・会社の歴史・事業の変遷のようにしたい。


その理由：
予てより、変革ページはいろんな内容をだらだら記載しがちで
大まかな沿革（歴史概要）を知りたい人にとって非常に判り辛いという意見がある。
知りたい情報を探すのが面倒だという意見が多数あり。
知らなくても良い出来事が押しつけられて見づらい。という意見。


「会社の歴史」と「事業の変遷」
大きな内容や時系列でページを区切るなど、
もっと深く知りたい人だけが今の沿革のページを見て頂く。

例として「事業の変遷」
-----------
since1930
工業薬市場の開拓（ワセリン）

ミツロウ

ハッカ

抽出事業
---------------



以下、HTML・CSS・JS
==================
HTML：
<!--基本単位-->
<ul class="timeline">
　<li>
　　<p class="timeline-date">西暦４桁</p>
　　<div class="timeline-content">
　　　<h3>和暦年月日</h3>
　　　<p>内容</p>
　　　<img src="images/enkaku/画像ファイル名.jpg">
　　</div>
　</li>
</ul>



CSS:
.timeline {
　list-style: none;
}

.timeline > li {
　margin-bottom: 60px;
}

.timeline h3{
　margin-top: 20px;
}


/* for Desktop スマートフォンは別途指定*/
@media ( min-width : 640px ){

　.timeline > li {
　　overflow: hidden;
　　margin: 0;
　　position: relative;
　　/*border: solid 1px #00245d;*/
　}

　.timeline-date {
　　width: 80px;
　　float: left;
　　margin-top: 5px;
　　font-family: 'Crimson Text', serif;
　　font-size: xx-large;
　}

　.timeline-content {
　　width: 75%;
　　float: left;
　　border-left: 3px #e5e5d1 solid;/*--左のボーダーを色指定して年表の軸にする--*/
　　padding-left: 30px;
　}

　/*--疑似要素でドット〇を表現--*/ 　.timeline-content:before {
　　content: '';
　　z-index: 1;　/*--無指定では標示されない--*/
　　width: 12px;
　　height: 12px;
　　background: #00245d;
　　position: absolute;　/*--位置を決める--*/
　　left: -7.3px;　/*--位置を決める--*/
　　top: 28px;　/*--位置を決める--*/
　　border-radius: 100%;
　}

　.timeline-content img{
　　margin-left: 20px;
　　margin-bottom: 20px;
　}

　.timeline-content p{
　　margin-bottom: 5px;
　}
}


/* for Mobile */
/* for Mobile スマートフォン向けのスタイル*/
@media (max-width: 639px) {
　/*--省略--*/
　/*--省略--*/
}


/*--標示アニメーションの設定--*/
.timeline-content:before {
　opacity: 0;
　transition: opacity 0.5s ease;
}

.timeline-content {
　opacity: 0;
　transform: translateY(10px); /* 初期状態では少し上に移動 */
　transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-content.appear:before {
　opacity: 1;
}

.timeline-content.appear {
　opacity: 1;
　transform: translateY(0); /* スクロールで表示されたときに元の位置に移動 */
}


JS:
window.addEventListener('scroll', handleScroll);
handleScroll(); // 初期状態で要素が画面上に出現しているかをチェック


function handleScroll() {
　var elements = document.querySelectorAll('.timeline-content');
　var screenPosition = window.innerHeight / 1.1;

　elements.forEach(function(element) {
　　var elementPosition = element.getBoundingClientRect().top;

　　if (elementPosition < screenPosition) {
　　　element.classList.add('appear');
　　} else {
　　　element.classList.remove('appear'); // 要素が画面から外れた場合はクラスを削除する
　　}
　});
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll); // ウィンドウサイズが変わったときも処理を実行
handleScroll(); // 初期状態で要素が画面上に出現しているかをチェック

2023/10亀岡工場

亀岡工場のページを設置
背景に５秒程でシーンが切り替わる動画を挿入。
スクロールで動画のシーンが切り替わるような視覚的効果が目的
手前のコンテンツで動画は見え隠れする。
つまらない内容に対して少しでも演出を加えることで、
訪問深度の延長と、ユーザビリティの向上を図る。

ページの概要：
亀岡市の紹介を少しする。（工場がある地域の特色）
亀岡市（亀岡工場）へのアクセスについて説明
緑豊かな自然環である
原料の保管から各工程毎に簡単に説明する
工場開設から現在に至るまでの変化を簡単に紹介（横方向のスクロール）
今日までの発展を可能とした地域社会に対して
「人にやさしい、環境にやさしい、地域にやさしい」で締める。

横スクロールはGSAPアニメーションを適用

JS:
// GSAPアニメーション（横スクロール） document.addEventListener("DOMContentLoaded", function() {
// 上のスクロールリスト
const upperListWrapperEl = document.querySelector('.contents-kameoka-3 .side-scroll:nth-of-type(1) .side-scroll-list-wrapper');
const upperListEl = document.querySelector('.contents-kameoka-3 .side-scroll:nth-of-type(1) .side-scroll-list');
const upperMaxScroll = upperListEl.scrollWidth - upperListWrapperEl.clientWidth;

// 上のスクロールアニメーション
　　gsap.to(upperListEl, {
　　　　x: -upperMaxScroll,
　　　　ease: 'none',
　　　　scrollTrigger: {
　　　　trigger: '.contents-kameoka-3 .side-scroll:nth-of-type(1)',
　　　　start: 'center center', // 要素が画面内で中央に表示されたときにアニメーションを開始
　　　　end: 'right right',
　　　　scrub: 3, // 横方向のスクロールの速さ
　　　　invalidateOnRefresh: true,
　　　　},
　　});

　　// 下のスクロールリスト
　　const lowerListWrapperEl = document.querySelector('.contents-kameoka-3 .side-scroll:nth-of-type(2) .side-scroll-list-wrapper');
　　const lowerListEl = document.querySelector('.contents-kameoka-3 .side-scroll:nth-of-type(2) .side-scroll-list');
　　const lowerMaxScroll = lowerListEl.scrollWidth - lowerListWrapperEl.clientWidth;

　　// 下のスクロールアニメーション
　　gsap.to(lowerListEl, {
　　　　x: -lowerMaxScroll,
　　　　ease: 'none',
　　　　scrollTrigger: {
　　　　trigger: '.contents-kameoka-3 .side-scroll:nth-of-type(2)',
　　　　start: 'center center', // 要素が画面内で中央に表示されたときにアニメーションを開始
　　　　end: 'right right',
　　　　scrub: 3, // 横方向のスクロールの速さ
　　　　invalidateOnRefresh: true,
　　　　},
　　});
});

2023/7サステナ

※sus.htmlで実行されるJavaScript(jQuery)
どんな目的であるのか、備忘録：

// 文字が左から右へ表示される⇒不採用
// 特定の子要素に対して、その親要素の名称とサイズをアラートで表示
　　⇒編集中に時折使用することがある(サイト運営に関与しない)
// imagesLoadedで画像を読み込みを確認した後、１秒後に透過を開始して、
　　２秒後には非表示にする設定⇒サイト表示時（ファーストアクセス）のローディング
// スマートフォン用のナビゲーション(ハンバーガーメニュー)に関する処理
// 横方向への移動を防止⇒有効に働いているか？
// [事業の発展と持続可能な社会の両立]　を表示（フェードイン・フェードアウト）
// <p>,<h2> 要素が画面内に入った時にclass（up-text）を付与する
//.kameoka span 要素が画面内に入った時にclassを付与する⇒要素の下にアンダーライン
//.plant span 要素が画面内に入った時にclassを付与する⇒要素の下にアンダーライン
//.meta-panel span 要素が画面内に入った時にclassを付与する⇒要素の下にアンダーライン
// 画面の向きが変わったときに、表示をリセットさせる⇒ページトップへ戻り更新
　（SDGsアイコンなど一部の要素にリセットが必要）
// ゴール３以降のマウスホイール制御　.each-g の 各id をホイールでスムーズに移動
⇒ゴール３～ゴール１７間のホイール移動
// 各ゴールの画像と文字（span）のが画面に表示されたときの処理⇒主としてゴール３～ゴール１７に適用
// 表紙画像(サイトの先頭)をスクロールに連動させて拡大と縮小を行う。⇒サイトトップページの画像に適用
// 当社の生産拠点・亀岡市－ ⇒該当箇所の画像表示に関する処理
// pagetop⇒ページの先頭へ ボタンを画面右下に表示
// スムーススクロール⇒pagetopがクリックされたときに作動
// 画面が縦向きか横向きかを判断⇒アクセス媒体に応じた対応と組み合わせて使用
// アクセス媒体に応じた対応⇒ スマートフォン、タブレット、ＰＣ各端末ごとによる分岐処理。
　　例えば、luxyの可否、SDGsアイコンの動作と固定に関する処理、
　　ＰＣでは表紙画像のGSAPの ScrollToPluginによる移動
　　ＰＣではゴール３（<div id="goal3"></div>）が画面上に現れたとき、画面上部へスムーズに移動
　　ＰＣではページ末にあるSDGsロゴが画面に出現すると、自動的に最下部までスクロールなど
// パソコン以外のアクセス端末で2.2画面分の距離をスクロールすると
　　ロゴとSDGsメニューアイコンを非表示にする処理
など

2023/7/14サステナ

ゴール３～１７　タブレット端末（縦）レスポンシブ対応

2023/7/12-14サステナ

ゴール３～１７　スマートフォン（縦）レスポンシブ対応

2023/7/10-11サステナ

ユーザビリティの向上や魅力的なユーザーエクスペリエンスの検討
ページ最下部の演出の向上
ゴール１７の後、航空写真を効果的に表示させ。
ページ最下部のSDGsマークへ誘導させるJSを実装。

※ただし、今回の航空写真の表示演出はレスポンシブ対応の調整が困難であり、スマホなどのサイトでは表示を省いた。

サイトトップにて表紙のスクロールをスムーズにする。
GSAPの ScrollToPlugin を使用してスクロールアニメーションを実装
GSAPのライブラリをDLし、JSフォルダに保管
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js"></script>

2023/7/7サステナ

表紙画像をもう少し一工夫。
スクロールに連動して画像が拡大・縮小される演出を追加。
$(window).on('scroll', function(){
　var scrollY = $(window).scrollTop(); // スクロール位置を取得
　var bgSize = 100 + (scrollY / 35); // 背景画像のサイズを計算（割合を調整）
　if (bgSize < 200) { // 背景画像のサイズが200未満の場合に実行
　　$('#aaa').css({
　　　'background-size': bgSize + '%',
　　　'transition': 'background-size 0.3s ease-out' // アニメーションの設定
　　});
　} else {
　　$('#aaa').css('transition', 'none'); // 200以上になった場合はアニメーションを無効化
　}
});
※３５を大きくすると拡大縮小の割合が小さくなり、小さくすると変化量が大きくなる。

2023/7/6サステナ

表紙画像に亀岡市のSDGsパートナーロゴと近畿地方の地図（地点を示す）を表示。
<div class="overlay-warpper">
<div class="overlay-left">imgタグ</div>
<div class="overlay-right">imgタグ</div>
</div>

.overlay-warpperクラスに２つの画像を格納し、
.overlay-warpper {
　display: flex;
　align-items: center;
　justify-content: space-around;
}
として横並びに配置

亀岡工場と本社を点滅するドットで示し、画像内の点と文字は
.overlay-right{position: relative;}　を親要素として絶対配置にすることで 表示媒体が変化しても極端な文字や点の移動乱れを無くした。 ※なぜかスマホでは微調整が必要。 ※画面を基準にすると文字や点が定まらない。
例；
/*--地図上の点（亀岡工場の場所）--*/
.point-1{position: absolute;
　top: 33%;
　left: 45%;
}
他、省略。

2023/7/5サステナ

スマートフォンなどへのレスポンシブ対応のため
<each-g>要素内にある<section>と<span>要素に対して、
<section>要素はCSSで全て幅(width)指定とし、全ての改行タグ<br>を省いた。
<span>要素内の改行は<div></div>でブロック要素とすることで改行した。
※PCサイトの強制改行<br>がコンテンツ内にあると、スマホなどの媒体でのレスポンシブに不都合がある。

<each-g>以前の要素については
.ambi p br,
.kameoka p br,
.plant p br{
　/*--改行を無視--*/
　display: none;
}
とした。

これにより、PC以外の表示媒体での文章幅を別途指定可能とした。

ページを作りこむに連れて、新たな問題点も発生： 横方向のスクロールバーが出現する明確な原因がわかならい。
↓
応急措置として
body{
　overflow-x: hidden;
}
として強制的にスクロールバーを非表示とした。
ただし、iOSではこの設定が効かなかった。

※横方向のスクロールバーは何らかの要素のはみ出しが原因で、
全てのコンテンツを導入後、個別に調査してなんとか解消できた。。

2023/7/5サステナ

ゴール１７を追加

2023/6/29サステナ

ゴール１３を追加

2023/6/28サステナ

表示遅延の改善
ページ内のコンテンツが増えるにつれて構成要素の表示が好ましくない遅延となったので改善
つまり、トップページの背景画像と文字の表示ずれを回避するための改善
↓
ローディング画面を追加、ローディングアニメーションにSDGsホイールを採用

2023/6/23サステナ

タブレット、スマートフォンにおけるレスポンシブを改善
SDGsのアイコンの表示：
・レイアウトの事情で、はじめは表示、2.2画面スクロール後にフェードアウトとした。

特定のタッチデバイス（タブレットの縦置きのみ）で画像が切れる件：
・タッチデバイス向けの縦置きの表紙画像を再調整し、CSSのポジション設定も変更、
・これによりタブレット端末の縦置きで亀岡工場が切れない様に修正。

・タブレット端末では社名ロゴの大きさと配置も修正

・スマホとタブレットのみ以下の要素の下にマージンを設定し表示バランスを改善
　div.blessing,
　div.ambi,
　div.kameoka{
　　margin-bottom: 10vh;
　}
　

div.blessing,
div.ambi,
div.kameoka,
div.plant,
div.meta-panel,
の要素の高さを（マージン含む）をJSで取得し
<div class="parallax-top-margin"></div>の適正な高さを計算

2023/6/22サステナ

スマートフォン向けのハンバーガーメニューを導入
乱れていた z-indexを修正、ロゴとSDGsアイコンはスクロール後に非表示にする。
コンテンツの特性上、避ける事の出来ないスマホでの横揺れを阻止するためのJSコードを追記→後日廃止

.each-g内の各ゴール(親要素)： 親要素にposition: sticky;を設定し、<section>,<img>,<span>などの子要素を絶対配置。
子要素のposition: absolute;は個別に記さず一括して指定、
それぞれの要素はCSSで.activeクラスを適用し、JSにて画面表示時にクラスが適用され移動やフェードを伴う設定とする。

2023/6/17サステナ

各ゴールの構造を以下に変更
<div class="each-g">
　<div id="goal3"></div><!--高さのないパララックス効果に必要な要 -->

　<!-- ゴール３　img(gif), span(画像のタイトル), section(ゴールの説明文)など -->
　<div class="parallax">

　　<!-- ゴール３タイトルバー -->
　　<div class="tile-bar-g3">
　　</div>

　　<div class="g3">
　　<!--ゴール３の内容-->
　　</div>

　</div><!-- end of parallax -->

<!-- goal3～goal17の数だけ同じ構造の繰り返し -->

</div><!-- end of each-g -->

2023/6/20-21サステナ

サステナビリティ素材作成
ゴール４：次世代を担う子どもたちが健やかに育つまち
質の高い生涯学習のまちつくりのために
を挿入

2023/5～6サステナ

サステナビリティ素材作成
それぞれのゴールに必要な素材を順次作成し、レイアウトを含めて再度、種々検討する。

2023/4/28サステナ

サステナビリティ素材作成
ゴール５：働く女性の社会進出の一助となる商品開発、ディンセントワーク、ジェンダー平等
概要：女性特有の悩み、アンケート調査、それらの諸症状をケアする漢方

2023/4/27サステナ

サステナビリティ素材作成
ゴール７：付加価値の高いエキスでCO２の排出削減
概要：具体例を用いたCO2の削減％を掲載

2023/4/26サステナ

サステナビリティ素材作成
ゴール９：強靭なインフラ構築、包括的かつ持続可能な生産を可能とする取組み
概要：亀岡工場内に区画を設け、工程毎に建屋を独立化、万一の異常発生時の被害を最小限にとどめ、 全ての工程にバックアップ体制を整える。

2023/4/25サステナ

サステナビリティ素材作成
ゴール３：福祉・教育・文化・観光・環境・行事・防災
概要：亀岡市をはじめとする地域社会への貢献事業。企業としての新たな価値創出

2023/4/24サステナ

サステナビリティ素材作成
ゴール８：地元住民を積極的に採用し、働きがいのある職場環境の確保
概要：持続可能な「地域経済の成長」、雇用機会損失による他府県への就業と移住を減らし、「地域間格差を低減」・亀岡市の「人口増加」の一助を担う。

2023/4/19サステナ

サステナビリティ素材作成
ゴール５：次世代をリードする若手社員、女性社員の積極的な登用を促進
概要：社会人としての「輝かしい」スタートに先立ち、不安を解消するための取組みを強化、入社前・入社後のプログラム、亀岡工場の女性社員の割合、働く女性の場を増やし子育て期の女性の就業を促進、などの内容

2023/4/17サステナ

サステナビリティ
表紙画像を決定し、トップページのみ開設
内容は、国際連合広報センター に似た表現（画像）を用いてページを作成する。

2023/4/13地域と共に

ページ読み込み時の処理
背景画像を読み込み後、画面を表示させる処理を追加
（気球を上昇させることにより、発生する読み込み遅延の回避策として追加）

まずは
JS：imagesLoaded.jsの準備
画像を正確に読み込めたか判別できるimagesLoaded.jsを準備をする。
imagesLoaded.jsは背景画像の読み込みも判定可能。
CDNが用意されているので、以下のように<head>の中に記述して読み込む。
<script src="https://cdn.jsdelivr.net/npm/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
または、

imagesLoaded.js

から
imagesloaded.pkgd.min.jsをダウンロードしてJSフォルダに保存する。
今回はDLしてJSフォルダに保存、<head>ではなく
HTMLの末尾に<script src="js/imagesloaded.pkgd.min.js"></script>を記載。

CSS(style-commu.css)：
画像読み込み中のロード画面（通常１～２秒程度：時間はPC処理能力と通信状況により変化）
PC環境のみの対応のため以下にCSSを追記
/*------------------------------------------
ここから下は画面幅940px以上の追加指定
-------------------------------------------*/
/*ローディング部分の回転エフェクト定義*/
/*CSSのみで実行*/ @-webkit-keyframes loading {
　from {
　-webkit-transform: rotate(0deg);
　　transform: rotate(0deg); }
　to {
　　-webkit-transform: rotate(360deg);
　　transform: rotate(360deg); } }
@keyframes loading {
　from {
　　-webkit-transform: rotate(0deg);
　　transform: rotate(0deg); }
　to {
　　-webkit-transform: rotate(360deg);
　　transform: rotate(360deg); }
}

/*ローディング画面の背景部分*/
#loading {
　width: 100vw;
　height: 100vh;
　background-color: #f6f7f8;
　position: fixed;
　top: 0;
　left: 0;
　z-index: 100;
}

/*ローディング回転部分*/
#loading-main:after, #loading-main:before {
　content: "";
　display: block;
　width: 100%;
　height: 100%;
　margin-left: -50%;
　position: absolute;
　top: 40%;
　left: 50%;
　border-radius: 110%;
}

#loading-main {
　display: block;
　width: 30px;
　height: 30px;
　position: absolute;
　top: 45%;
　left: 50%;
　transform: translate(-50%, -50%);
　z-index: 105; }
　#loading-main:after {
　　-webkit-animation: loading 0.75s linear infinite;
　　animation: loading 0.75s linear infinite;
　　border: 1px solid transparent;
　　border-top-color: #666; }
　#loading-main:before {
　　border: 1px solid rgba(51, 51, 51, 0.15);
}
/*--------ローディング部分の回転エフェクト定義　ここまで*/


JS(main-commu.js)：
//imagesLoadedで画像を読み込みを確認した後、１秒後に透過を開始して、２秒後には非表示にする設定
const loading = document.getElementById('loading');

赤文字：ロードの確認をする画像
imagesLoaded( { background: "#mainimg" }, { background: "#mainimg2" }, function() {
　const msM = 1000;
　loading.style.transition = 'opacity ' + msM + 'ms';

　const loadingOpacity = function(){ //透過させる関数を定義
　　loading.style.opacity = 0;
　}
　const loadingDisplay = function(){ //非表示にする関数を定義
　　loading.style.display = "none";
　}

　setTimeout(loadingOpacity, 1000); //画像読み込み後、１秒後に透過を開始
　setTimeout(loadingDisplay, 1000 + msM); //画像読み込み後、２秒後に非表示
});


HTML：
mainの直下に記載
<div id="loading"><!--ローディング画面の背景部分のCSSクラス定義-->
　　<div id="loading-main"></div><!--ローディング回転部分のCSSクラス定義-->
</div>

参考：ローディング画面を実装する - 読み込み完了後にページを表示させる方法
https://yumegori.com/loading-effect20190904


上記のHTMLの記載は全ての媒体に共通であるが、 スマホとタブレットの背景画像は縦置きと横置きにそれぞれ別々の画像を用いているため気球は上昇しない。 タブレット（900px以上）のみロード画面が発火するが、水面下の作業で気球は動かない。全ての媒体で気球を動かすことも可能であるが、動的なものと静的なもの双方を持たせるようにした。

PCは背景画像のロード後にナビメニューを段階的に表示させるため、 900px以上のメディアクエリにてナビメニュー全体の表示を遅らせる調整（下記）を行った。
/*メニュー１個あたりの設定*/
#menubar li {
　animation: opa1 5.5s both;
　/*animation.cssの、opa1を実行する。5.5sは5.5秒の事。*/
}
後続する#menubar li:nth-of-type(1)～#menubar li:nth-of-type(5)のanimation-delayも適宜変更した。

2023/4/12地域と共に

PC表示のみで気球を上昇させる
bg_sub.png：効果画像
bg_main1.jpg：背景（亀岡盆地と管理棟）
bg_main2.png：気球（手前に表示させるもの）

CSS：
/*背景*/
#mainimg2 {
　text-indent: -9999px; /*ここでは意味が無いと思う。*/
　position: fixed;
　top: 0px;
　z-index: -1;
　width: 100%;
　height: 100%;
　background: url(../images/bg_sub.png) fixed no-repeat center / cover,
　url(../images/bg_main1.jpg) fixed no-repeat center center / cover;
}

/*気球(手前)*/
　#mainimg {
　text-indent: -9999px; /*ここでは意味が無いと思う。*/
　position: fixed;
　top: 0px;
　z-index: -1;
　width: 100%;
　height: 100%;
　background: url(../images/bg_main2.png) local no-repeat center / cover;
}

/*気球を上昇させる*/
.up-moving {
width: 100%;
background: url(../images/bg_main2.png);
animation-name: up-moving;
animation-duration: 4s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

@keyframes up-moving {
　0% {
　　background-position: 0 0;
　}

　100% {
　　background-position: 0 -30px;
　}
}

HTML：背景画像を先に記述、続いて手前にくる気球の順に。
<aside id="mainimg2" class="position-now">亀岡盆地と管理棟</aside>
<aside id="mainimg" class="up-moving">気球</aside>

その他、社名の下に class="catchphrase" 人にやさしい 環境にやさしい 地域にやさしい を追記

2023/4/11地域と共に

ロゴマークのリンク設置が特殊
ロゴマークへのリンクが何を試しても設置できなかった。
原因を調べた結果、z-index の指定に問題があることが判明した。
後続する要素がロゴの上に覆いかぶさるようにするため「-1」としていたが
リンクを設置させるには「0」以上の値が必要だった。
（後続する要素に「5」などの上位値を指定してもロゴが手前にでてしまう。）

CSS：.logo{z-index: -1;}　→ 削除
HTML：<a href="index.html"><img class="logo" src="images/logo2.png" alt=""></a>を記載
こうすることでロゴへのリンク設置が可能となったが、後続する要素の上にロゴが絶えずでてしまうため、 JSに以下の追記をして、スクロール量に応じてロゴの表示・非表示を切り替えることにした。

//300pxよりも下がるとロゴを非表示とし、300px未満で再表示。
$(window).scroll(function () {
　　if ($(window).scrollTop() > 300) {
　　　$('.logo').fadeOut(400);
　　} else {
　　　$('.logo').fadeIn(400);
　　}
});

スクロール量に応じて特定の要素の表示状態を切替える処理を
jQueryでも実装しているが、このページではなぜか機能しなかったので
記載はJavaScriptとした。

2023/4/10地域と共に

ナビゲーションのカレント表示を実装
→スクロールしている位置がナビゲーションの変化で分かる機能

１.ページ内リンクが付されている各要素にclass="position-now"クラスを付す。
※場所を取得したい要素
<aside id="mainimg" class="position-now">メインイメージ</aside>
<div class="contents bg1 position-now" id="mission">
<div class="contents bg2 position-now" id="community">
<div class="contents bg3 position-now" id="theme">
<div class="contents bg4 position-now" id="action">
<div class="contents bg5 position-now" id="history">

２．ナビゲーションに固有の名前（id）を振る。
<header id="top_link_js">
<nav class="nav-global">
<ul id="menubar">
<li><a href="#mission" id="mission_link_js">Our Misson</a></li>
<li><a href="#community" id="community_link_js">Community</a></li>
<li><a href="#theme" id="theme_link_js">Our theme</a></li>
<li><a href="#action" id="action_link_js">Action</a></li>
<li><a href="#history" id="history_link_js">history</a></li>
</ul>
</nav>
※jsで操作するものには、_jsというid名にする。

３．カレントナビゲーション用のクラスを追加
.link-current {
border-radius: 50%; /*元々は四角形なので円にする*/
box-shadow: inset 0 -10px 25px 0 rgba(0, 0, 0, .5), /*insetで内側にエンボスの様な効果*/
2px 2px 10px #ffffff, /*外側への光彩*/
0 0 10px 0px rgba( 100, 100, 100, 0.5), /*少し色付け*/
inset 0 0 0 2px #cae0f3; /*少し色付け*/
transition: all 0.05s ease-out; /*効果をつける時間（イーニング含む）*/
}
※いろいろ試した結果、光彩とエンボス、シャドウの組み合わせが良かった。

４．JS：説明省略
// Make all images animate to the one visible thumbnail
var miniGalleryOptions1 = {
　thumbnailId: 'thumb1'
}

$(function () {
　var set = 350;//ウインドウ上部からどれぐらいの位置で変化させるか
　var boxTop = new Array;
　var current = -1;
　//各要素の位置
　//position-nowは場所を取得したい対象の要素に付ける
　$('.position-now').each(function (i) {
　　boxTop[i] = $(this).offset().top;
　});
　//最初の要素にclass="positiion-now"をつける
　changeBox(0);
　//スクロールした時の処理
　$(window).scroll(function () {
　　scrollPosition = $(window).scrollTop();
　　for (var i = boxTop.length - 1; i >= 0; i--) {
　　　if ($(window).scrollTop() > boxTop[i] - set) {
　　　　changeBox(i);
　　　　break;
　　　}
　　};
　});
　//ナビの処理
　function changeBox(secNum) {
　　if (secNum != current) {
　　　current = secNum;
　　　secNum2 = secNum + 1;//以下にクラス付与したい要素名と付与したいクラス名
　　　$('.nav-global li a').removeClass('link-current');

　　　//位置によって個別に処理をしたい場合
　　　if (current == 0) {
　　　　$('#top_link_js').removeClass('link-current');
　　　　// 現在地がトップページの場合の処理
　　　} else if (current == 1) {
　　　　$('#mission_link_js').addClass('link-current');
　　　　// 現在地がsection1の場合の処理
　　　} else if (current == 2) {
　　　　$('#community_link_js').addClass('link-current');
　　　　// 現在地がsection2の場合の処理
　　　} else if (current == 3) {
　　　　// 現在地がsection3の場合の処理 　　　　$('#theme_link_js').addClass('link-current');
　　　} else if (current == 4) {
　　　　// 現在地がsection4の場合の処理
　　　　$('#action_link_js').addClass('link-current');
　　　} else if (current == 5) {
　　　　// 現在地がsection5の場合の処理
　　　　$('#history_link_js').addClass('link-current');
　　　}

　　}
　};
});

その他、レスポンシブ対応として、活動内容の画像を スマホの縦置きでは列３表示とした。

2023/3/31地域と共に

ヘッダーメニューからのリンク「地域と共に」のページ作成を開始
作成に心掛けた事
１：アグレッシブ（活動的）な印象　※英文字
２：力強さを感じる
３：かつ、やさしさも感じる
４：地域感のある特設ページ
当初は〇型メニューでなく、六角形でメニューを作成予定だったが
角が立つ＝どがって、やさしさを感じなかったので〇型とした。
内容的にはＣＳＲ、ＣＳＶに接触する事柄で、「地域社会との共栄」、企業としての価値創出になります。

ページの特徴
ファーストビュー:気球・亀岡盆地・亀岡工場の管理棟を背景＝地域感
後続の背景、青は空、緑は芝生など（亀岡盆地、亀岡工場の緑）、茶は大地、グレーは更に深く、黒は地中のようなイメージで、 地域に奥深く根差すことを意味しています。

構成の概要
CSS：概要
/*メインイメージ*/
#mainimg {
　text-indent: -9999px;
　position: fixed;
　top: 0px;
　z-index: -1;
　width: 100%;
　height: 100%;
　background: url(../images/bg_sub.png) no-repeat left top / 100%, url(../images/bg_main.jpg) no-repeat center center / cover;
}

/*ヘッダーブロック*/
header {
　height: 100%; /*高さ＝画面いっぱいに表示*/
}

/*コンテンツ共通*/
.contents {
　overflow: hidden;
　padding: 0 4% 50px 90px; /*ボックス内の余白。上、右、下、左。*/
　/*border: solid 1px #f00; /*確認用*/
}

HTML：最初の部分、ヘッダ
<aside id="mainimg">メインイメージ</aside>
<header>
<h1 class="mission"><a href="#mission"><img src="images/mission.png" alt=""></a></h1>
<nav>
<ul id="menubar">
<li><a href="#community">Community</a></li>
<li><a href="#theme">Our theme</a></li>
<li><a href="#action">Action</a></li>
<li><a href="#history">history</li>
</ul>
</nav>
<div class="logo"><a href="index.html" alt=""><img src="images/logo2.png" alt=""></a></div>
<div id="slogan">地域の皆さまと共に<br>歴史を重ねる</div>
</header>

#mainimg{}、.logo{}、#slogan{}には
z-index: -1; とposition: fixed;により、重なりを最下位で位置は固定
#menubar li{}にはposition: fixed;のみ設定し、z-index:は設定なし（重なりは上記よりも上位）
後続する要素は上になるため、
スクロールすると、左側のメニューは重なりの上位で常に手前に現れ、
後続する要素は固定された画像よりも上位でかつメニューよりも下になる。
後続の要素（内容）は各内容ごとに<section>内容</section>で括り、
セクション毎に.contents {}　内のpaddingで左側にメニューに被らない広い余白をとる。
そのままだと、文字が読みにくいので、各セクション毎に背景色を付ける。
<div class="contents bg1" id="mission"></div> 背景はbg1～bg5のクラスで色分け、左側のメニューは色分けされた各セクションへのページ内リンク。

2023/3/28共通設定

ヘッダーに新たなリンク「地域と共に」「サステナビリティ」を設置
同時に、フッターナビにもリンクを設けた。
これらの追加に伴い、いくつかの変更を実施

全てのHTML：
ヘッダーに関する記述
<header>
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="小城製薬株式会社"></a></h1>
<div id="head-contents">
　<div class="other"><a class="white" href="commu.html" target="_blank" rel="noopener">地域と共に</a></div>
　<div class="other"><a class="white" href="sus.html" target="_blank" rel="noopener">サステナビリティ</a></div>
　<div class="other"><a class="white" href="aerial-photo.html" target="_blank" rel="noopener">亀岡工場の変遷</a></div>
　　<div id="tel">
　　[ nbsp<A HREF=".html">English</A> /
　　<A HREF=".html">Chinese</A> ]  
　　<div>
　<span class="pr">人と自然を創造する － 誰もが健康であるために。</span>
</div><!-- end of id="head-contents"-->
</header>

CSS:style.css
-------------1000px以上
#head-contents{
　line-height: 1.2em;
　margin: 0 2px;
　text-align: right;
}

/*地域と共に、サステナなどのリンクを格納するボタンの様な枠*/
header .other {
　display: inline-block;　/*インラインブロック要素*/
　line-height: 1; 　　　/*枠の高さ*/
　border-radius: 0.5em;　/*角に丸みを*/
　padding: 5px 8px;　　/*上下、左右へのアイコン内の余白*/
　font-size: 0.7em;　　/*文字サイズ*/
　color: #fff;　　　　　/*文字色*/
　border: solid 1px #5c5c5c;　/*枠の色を薄い金色に変更*/
　background: #2a3a6b;　/*背景色*/
}

/*PRテキスト*/
#head-contents .pr {font-family: 'Yuji Syuku', serif; font-size: 0.9em;}

-------------1000px以下
#head-contents .other{
　display: none;　　/*「地域と共に」などのリンク、スマホでは非表示にする（とても嵩張るので）*/
}

#head-contents .pr {
　font-size: 0.7em;　/*人と自然を・・・　文字を少し小さくする*/
}

2023/3/28共通設定

会社概要のページなどにあるサイト左側の『サブメニュー』をスクロール追従型へ変更。
（縦長の画面では左側の空白スペースが無駄になるための対応）
サブメニューがスクロールと共に上下に移動、移動時は浮き上がったようにCSSを付与

JS:main.js
$(function(){
　　var subMenu = $('#contents nav');
　　var timer;

　　$(window).scroll(function() {
　　//スクロール開始するとクラスを付与
　　subMenu.addClass('with-scroll');

　　//スクロール中はイベントの発火をキャンセルする
　　clearTimeout(timer);

　　//スクロールが停止して0.8秒後にイベントを発火する
　　timer = setTimeout(function() {
　　subMenu.removeClass('with-scroll');
　　}, 800);
　});
});

CSS:stye.css　追従時に割り当てるクラス
※少し浮き上がって移動しているような視覚効果
.with-scroll{
　transition-duration: 0.6s;
　transform: scale(1.05);
　box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

同時に、慣性スクロールluxyによる追従のため
luxyが不向きなスマートフォンやタブレットでは
上記の浮き上がるクラスを割り当てぬように以下のJSを追記した。

JS(main.js)：追記
// 会社概要などサブメニューがあるページ、luxyで追従するサブメニューに対してスクロール中はクラス（シャドウ）を付与
// ただし、画面サイズとユーザーエージェントにより、クラス付与の実行の可否を決定。
const device = navigator.userAgent;
var windowWidth = $(window).width();
var windowSm = 1000;

if (device.indexOf('iPhone') > -1 || (device.indexOf('Android') > -1 && device.indexOf('Mobile') > -1)) {
　　// スマートフォン　テストOK
　　//alert('スマートフォンからのアクセスです');
} else if (device.indexOf('iPad') > -1 || device.indexOf('Android') > -1) {
　　// タブレット テストNG ※iPad Pro 2018 Model A1934ではPC判定だった。
　　// alert('タブレットからのアクセスです');
} else if (device.indexOf("ipad") > -1 || (device.indexOf("macintosh") > -1 && "ontouchend" in document)){
　　// iPad用の処理(追記、下記のメモ参照)
　　// 一部のiPadではテストNG 　　// alert('タブレットからのアクセスです');
} else if (windowWidth >= windowSm) {
　　$(function(){
　　var subMenu = $('#contents nav');
　　var timer;

　　$(window).scroll(function() {
　　　//スクロール開始するとクラスを付与
　　　subMenu.addClass('with-scroll');

　　　//スクロール中はイベントの発火をキャンセルする
　　　clearTimeout(timer);

　　　//スクロールが停止して0.8秒後にイベントを発火する
　　　timer = setTimeout(function() {
　　　　subMenu.removeClass('with-scroll');
　　}, 800);
　　});
});
};
//iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。
//しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、
//それがオンになっていると（デフォルト）ユーザーエージェントに"iPad"の文字が含まれなくなるようです。
//そのためユーザーエージェントでの分岐に //if (device.indexOf("ipad") > -1 || (device.indexOf("macintosh") > -1 && "ontouchend" in document))
//追加をする必要があります。
//※ただし、この追記をしても、手持ちのiPad Pro 2018 Model A1934 に搭載したiPadOSバージョン16.3.1ではPC判定となり
//正確な判別は不可能だった。一方、iPad mini A1550 iOSバージョン13.5.1ではタブレット判定が可能だった。
//よって上記の判別は完全ではない。

2023/3/28社標説明

社標説明の丸忠印のある品々、気になっていた原因不明の問題点を解消
＼サイト閲覧側では分からない、構築者が懸念する問題＝レイアウトの脆弱性／
⇒グリッドレイアウト内の配置方法を改善した。
画像とテキストの配置に、本来採用したくなかった（採用すべきでない方法）
である position: relative と absolute を廃止。
↓
各グリッド内に２つの子要素 row1, row2 を設け
row1 には画像、row2 には定義リスト(dl)、定義語(dt)、定義説明(dd)を格納、
display: block として row1, row2 をデフォルトの縦並びとする。
画像と文章が個別枠（row1,2）に収まるため
定義語(dt)の縦方向が自動的に面一になり、
position: relative と absolute の廃止を可能とした。
また、row1 内のリンク画像はインライン要素のため
text-align: center;にて中央配置とした。

position: relative と absoluteの採用時は
定義説明＝文章（dd）がグリッド枠からはみ出ることがあり
レスポンシブ対応にてメディア毎でのグリッド枠高さ調整（下記の y値）が
必要だったが、この調整も不要になった。（文章を長くしても必ず枠内に収まる）
grid-template-rows: repeat(x, ｙ);
x:２又は３、y:全て『1fr』

新旧の社標説明の文章の長さ（自動改行状況）により、
社標の表示位置（上下方向）が特定のPC画面のみでズレることがあった。
これも解消した。

2023/3/27レビュー

社標説明(丸忠印のある品々)に採用したグリッドレイアウトを
レビューページの画像並びにも適用した。
社標説明のグリッドレイアウトと若干ことなり、
auto-fitによる画像のリサイズ（列数も自動的に変わる）を採用、
閲覧媒体により発生する余分な空白スペースを無くすことができた。

<div class="col2">の下の階層に、
新たに<div class="rev-grid-container">の画像括り、
グリッドコンテナの包括要素（親要素）を設け、
その中の各画像を<div class="rev-grid-item">（子要素）で囲んだ。

CSSは以下とし、ＰＣ表示でのサムネイル画像の横幅は200pxが最小サイズとした。
.rev-grid-container {
　　display: grid;　　　/*グリッドレイアウトを採用*/
　　flex-wrap: wrap;　　　/*折り返す*/
　　grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*最小180px*/
　　column-gap: 10px;　　　/*列間*/
　　row-gap: 15px; 　　　　/*行間*/
　　margin: 10px;　　　　　/*下に歩役*/
}

携帯端末ではminmax(80px, 1fr)とした。
その他、左右の余白、画像間隔など含め、
メディアクエリにていくつかの段階的な設定を行った。

補足：
auto-fit の利点を最大限に活用して
（最初の定義を200pxではなく）
適切と思える最小値80pxを指定して自動拡張、
これにてレスポンシブ対応も可能であるが、
携帯端末では１列配置になり、
やはり適度な段階設定（指定）が必要であった。

2023/3/24社標説明

小城忠治の経営理念
画像と文字の量を総合的に判断した結果
新旧の社票は左右に並べた方が良かった。
（そこにたどり着くまでいろいろ試した）
亀甲印の頂点はだいぶまえから代り映えしない内容なので
しいて表に出さず、ポップアップで紹介、社標の描写も載せた。
大したページでないが、予想外のことがいくつかあり時間を要した。

小城忠治の経営の基本理念
HTML:概要
<div class="rinen-container"><!--全てを包括する枠、ボーダーとシャドウを加える-->
　<div class="list3">　　　　　<!--左に画像、右に文字を格納-->
　　<div class="col1"><div>　　<!--画像を格納-->
　　<div class="col2"><div>　　<!--文字を格納-->
　<div>
<div>

CSS(style-syahyou.css):概要
.rinen-container はボーダーとシャドウをつけた包括要素
その中に.list3, col1, col2の要素がある。

PC環境では
.list3 {display: flex;} としてcol1、col2を横並びとし
小さい画面では
.list3 {display: block;} としてcol1、col2を縦並びにすることで
レスポンシブ対応を行う
その他、文字と画像の横方向の見栄えで padding、marginを適宜変更

新旧の社標紹介の修飾は style.cssに記した。
丸忠印の物品紹介では
グリッドレイアウトを採用
HTML:
<div class="grid-container"><!--グリッドの外枠-->
　<div class="grid-item"><!--グリッド　ここから-->
　　<div>画像</div><!-- divまたはfigureでかこまないとリンク範囲がおかしくなった。-->
　　<dl>
　　　<dt>タイトル</dt>
　　　<dd>説明文</dd>
　　</dl>
　</div><!--グリッド　ここまで-->
</div><!--グリッドの外枠-->
※ <div class="grid-item">は６つ

CSS：概要
.grid-container{…省略…} /*グリッドレイアウトを「包括」する要素*/
.grid-item{…省略…}　　　/*グリッド*/
.grid-item img{…省略…}　/*グリッドの中の画像*/
.grid-item dl{…省略…}　 /*グリッドの中の画像の下にあるタイトルと画像説明文を包括する要素*/
.grid-item dt{…省略…}　 /*グリッドの中の画像の下にあるタイトル*/
.grid-item dd{…省略…} /*グリッドの中のタイトルの下にある画像の説明文*/

これが基本
.grid-container{
　display: grid;　/*グリッドレイアウトを採用*/
　grid-template-columns: repeat(3, 1fr);　/*３列*/
　grid-template-rows: repeat(3, 550px); 　/*最大３行*/
}

↓レスポンシブの例
.grid-container{
　grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*auto-fitにより幅の狭いブラウザで折り返す*/
　grid-template-rows: repeat(3, 460px);
} ※画面幅に応じてグリッドの幅200、高さ460は適宜変更する

dl要素の上に margin-top: 10px; 付して
画像とdl要素の間隔を揃えたいが、何を試してもできなかったので
.grid-item {position: relative;}
.grid-item img {position: absolute;}
.grid-item dl {position: absolute;}　を追記し、

.grid-item dl{
　position: absolute;　　/* ← ← ← */
　margin-top: 90%;　　　/* ← ← ← */
　padding: 10px;　　
}
によりgrid-item要素の左上を基点としてdl要素の上端を揃えた。

画像にリンク(highslide)を付すと、なぜか中央揃えが解除され、
highslide.cssを調べても原因がわからなかった。
よって、grid-item要素にposition: relative;（左上を基点）を設定
したことを利用して、.grid-item の中のimg要素に
相対配置を付し、強制的に中央配置に戻した。
.grid-item img{
　position: absolute;
　top: 0;
　left: 50%;
　transform: translateX(-50%);
　-webkit-transform: translateX(-50%);
　-ms-transform: translateX(-50%);
}

その他、グリッドレイアウトのレスポンシブ対応で
いくつかの処理をする。

2023/3/16社標説明

社標説明のページに着手
旧ホームページでは亀甲印の説明のみであったが、
新サイトでは創業者の會社経営の理念（現在の社標の基原）、丸忠マーク、現在の社標など、社標の変化を紹介する。
※薬種貿易商、株式会社小城忠治商店、小城製薬株式会社の３部構成とする。
その他、商標登録に見る丸忠マーク、暖簾の丸忠なども合わせて掲載。

亀岡工場の変遷ページにおいて、タブレット端末の『縦向き表示』の体制が好ましくないため、これらレスポンシブ対応の強化を行う。
まずは以下のメディアクエリを追記して、それぞれの要素設定を変更
/*---------------------------------------------------------------------------
デバイスが「縦向き」、画面の横幅が 600px 以上 770px 以下の場合の記述　タブレットなどの縦向きを想定
---------------------------------------------------------------------------*/
@media (orientation: portrait) and (min-width: 600px) and (max-width:770px){

/*---------------------------------------------------------------------------
デバイスが「縦向き」、画面の横幅が 770px 以上の場合の記述　タブレットなどの縦向きを想定
---------------------------------------------------------------------------*/
@media (orientation: portrait) and (min-width: 770px){

2023/3/10亀岡・変遷

亀岡工場の変遷ページに着手

「会社概要」ページ、亀岡工場の写真の下にあるボタンから別ウィンドウで開く

慣性スクロールを用いた航空写真のスライドショー

材木団地を表紙に、タイトル「亀岡工場の変遷」、中央下部にスクロール矢印を設置

いろいろ試した結果、背景は黒

１画面で複数（3～4年分）の航空写真を比較できるようにする

レスポンシブ対応＝横幅は広げ過ぎない

年代、竣工建物を記載

建物名以外は記載しない！＝沿革との区別

2023/3/10共通設定

グーグルフォント'Yuji Syuku'を一部に適用
style.cssに以下を追記
/*Google Font 'Yuji Syuku' の読み込み
(「人と自然を創造する-誰もが健康であるために」などに適用）
----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');
HTML：適用箇所フッター（修正と追記）
<footer>
<span class="pr">人と自然を創造する － 誰もが健康であるために。</span>
<small>Copyright <copy>©</copy> <a href="#">KOSHIRO COMPANY LIMITED</a> All Rights Reserved.</small>
</footer>

/*footerは全称セレクタを適用して'Yuji Syuku'に*/
footer * { /*「人と自然を創造する-誰もが健康であるために」をブロック要素として。*/
　　font-family: 'Yuji Syuku', serif;
}

copy{
　　font-family: none; /*Ｃマークだけは元のフォントに戻す*/
}

2023/3/9レビュー

マウスオーバーでサムネイル画像を浮き上がらせる
/*画像上にマウスポインターを置いたとき、画像が浮き上がることでクリックイベント（スライドショーの開始）が可能であることを認知させる。
以下、style-review.css への追記*/
#review-contents a img {
　　transition: all 0.3s ease-in-out;
} #review-contents a img:hover {
　　/*transform: translateY(-5px);　　　/* マイナス値なので、上に移動 ＝用いず*/ 　　transform: scale(1.05, 1.05);　　　　/* transform: scale(x, y); 要素をx軸方向、y軸方向に1.2倍拡大する */ 　　box-shadow: 0 8px 10px -5px #9d9d9d; 　/* 影の指定 */
}

2023/3/8レビュー

クローラー用テキストの修飾を少し変更
/*既存のクラス定義を継承しつつ、以下の一部を変更して少し目立たせた。*/
.explain > div { 　　　　　　　 /*クラス名explainのあるタグ（親要素）に囲まれた全ての子要素（div）に適用する*/
　　border: solid 1px #f0e8ce;　/*枠の色を薄い金色に変更*/
　　background: #f7f7f7;　　　　/*背景色を無色から薄いグレーに変更*/
}
同時に2022年の12ヶ月分のみコンテンツを入力、ページ読み込みに問題がないかを確認。
残り約10年分の記載により読み込みが遅い場合は、年度毎にページアドレスを分ける予定。
※コンテンツの入力はまだまだ先になる。（もっと他に優先する作業がある）

2023/3/3レビュー

PC、スマホ、表示体制を整える。
CSS：
#review-contents .list {…
#review-contents .list img {…
.col1 {…
.col2 {…
など、いくつかの設定を変更

レビューの西暦メニューバーを少し修正
#re-mainmenu a {
　　　padding: 4px 0; /*上下、左右へのメニュー内の余白*/
}

画像の均等配置：
「a」、「img」タグはインライン要素のため、ボックス内（col2）の均等配置は困難。
display:block;を用いてインライン要素をブロック要素としたり、
display: flex;
flex-wrap: wrap;
justify-content: space-between;
及び疑似要素を用いてcol2内で均等配置を試みたが出来なかった。また今度。
↓
2023/3/2、画像の均等配置＝問題解消

2023/3/2レビュー

他のページと同様、基本的な方針と設定のみを行い、
コンテンツの記載はいつでも出来るため現時点では行わない。他にすべき技術的な内容を先行する。
-----------------
スマホへの表示設定は検討が必要。→2023/3/3 完了
1000px以上のみ、
#review-contents .list {
　　display: flex;　/*横並びを指定*/
}
小さい画面（スマホなど）ではこの設定がないため、要素は縦並びになる仕組み。

2023/3/2レビュー

スライドショー機能を追加（highslide-full.js）
スライドショーのグループ設定に注意：onclick="return hs.expand(this, {slideshowGroup: 'YYYY-M'})"
YYYYは西暦、Mは月とする。
highslide-full.jsの設置に関しては旧サイトにも実績があるため情報省略。
詳細は　http://highslide.com/　にある

基本ブロックの表示設定：スクロール（画面内に入った時）に要素を効果的に表示。
HTML：
<div class="up">
　　　　<p>効果的に表示したい要素</p>
</div>

CSS：
.up {
　　　　opacity: 0;
　　　　transform: translateY(30px);
　　　　transition: opacity 1.5s, transform 1s;
}.up.active {
　　　　opacity: 1;
　　　　transform: translateY(0px);
}

JS：
const targets = document.getElementsByClassName('up');
for(let i = targets.length; i--;){
　let observer = new IntersectionObserver((entries, observer) => {
　　for(let j = entries.length; j--;){
　　　if (entries[j].isIntersecting) {
　　　entries[j].target.classList.add('active');
} else{
　　　entries[j].target.classList.remove('active');
　　　}
　　}
　});
　observer.observe(targets[i]);
}
******
その他：
//画面内に入った時にclassを付与するものあり。
//レビューページの毎月の見出しタイトルにアニメーションアンダーラインを引く
$(window).scroll(function (){
　$("#review-contents .list h4").each(function(){ 注意：「h4」だけだと他のページにも影響する。
　　var hit = $(this).offset().top;
　　var scroll = $(window).scrollTop();
　　var wHeight = $(window).height();

　　if (scroll > hit - wHeight + wHeight/100){
　　　$(this).addClass("border");
　　}
　});
});
上記の「h4」はアニメーションを追加したい要素で、「border」は付与したいクラス。
「h4」へ適用するクラスは疑似要素でアンダーラインを伸ばす仕組み。
注意：
ファーストビューで画面に映し出されている「h4」見出しには<h4 class="border">…</h4>とし、初めからクラスを記述しておく。
スクロールで登場する「h4」見出しは<h4>…</h4>としてクラスの割り当ては行わない。ファーストビューの「h4」見出しは画面サイズにもよるが、３要素程だと思われる。

2023/3/2レビュー

ページリンクの調整、どうしてもリンクターゲットへの移動がズレる。
ただし、現状でもイマイチなのでまだ改善が必要。ＰＣ画面次第ではズレたまま？
JS:
$(function(){
　　// #で始まるアンカーをクリックした場合に処理
　　　$('a[href^="#"]').click(function(){
　　　// 移動先を50px上にずらす
　　　var adjust = 250;
　　　// スクロールの速度
　　　var speed = 400; // ミリ秒
　　　// アンカーの値取得
　　　var href= $(this).attr("href"); 　　　// 移動先を取得
　　　var target = $(href == "#" || href == "" ? 'html' : href);
　　　// 移動先を調整
　　　var position = target.offset().top - adjust;
　　　// スムーススクロール
　　　$('body,html').animate({scrollTop:position}, speed, 'swing');
　　　return false;
　});
});

2023/3/2レビュー

ページ内リンク専用の西暦メニューバーを改善
リンクに移動するとメニューバーが消失するため、CSS（style.css）の下記を廃止（無効に）。
//$(function() {
//　　　$('#menubar a[href^="#"]').click(function() {
//　　　　　　　$('#menubar').removeClass('db');
//　　　　　　　$('#menubar_hdr').removeClass('ham');
//　　　});
//});

2023/3/1レビュー

レビューページの作成に着手
旧レビューページでは各月に１枚のサムネイルのみのため、パット見では内容が分からない。
これを回避するようにページの構成を変更。
基本ブロック：
HTML：
<div class="list up" id="YYYY-M"> /*ページ内リンク*/
<div class="col1">
　　　　<div class="explain">
　　　　<h3 class="border">YYYY.M タイトル</h3> /*西暦・月 レビュータイトル*/
　　　　<p>
　　　　<div class="icon waku">説明①</div>/*個別の画像説明（概要）*/
　　　　<div class="icon waku">説明②</div>/*個別の画像説明（概要）*/
　　　　</p>
　　　　</div>
</div>
<div class="col2">
<div class="highslide-gallery" style="margin: auto">
<a class='highslide' href='表示する画像①.jpg' onclick="return hs.expand(this, {slideshowGroup: 'YYYY-M'})">　/*拡大させる画像*/
　　　　<img src="サムネイル画像①.jpg" alt="">　/*サムネイル画像*/
</a>
<a class='highslide' href='表示する画像②.jpg' onclick="return hs.expand(this, {slideshowGroup: 'YYYY-M'})">　/*拡大させる画像*/
　　　　<img src="サムネイル画像②.jpg" alt="">　/*サムネイル画像*
</a>
</div>
</div>
</div>

単調さを無くすため：画像と説明を交互に配置（CSS）
/*偶数目(=even)のブロックの設定、画像とテキストブロックが左右交互に入れ替わる設定*/
https://libre-co.com/markup/nth-of-type/*/
#review-contents .list:nth-of-type(even) .col1 {
order: 1;
}

【レビューページのみメニューバー（西暦）を追加】
新たに style-revew.css を設置、主な内容はメニューバー以外に、基本ブロックなどの形式を記述、ここでの詳細は省略。

2023/2/27共通設定

h2、h4 の見出しスタイルを少し変更：メリハリのある見出し？
/*mainブロック内の小見出し：h4タグの１文字目に疑似要素で縦線を入れる*/
main h4::first-letter {
　　　border-left: 3px solid #fff; /*左の線の幅、線種、色*/
　　　padding-left: 20px; /*線と文字との余白*/
}

/*mainブロック内の大見出し：h2タグ内にアンダーライン（グラデーション）追加*/
main h2 {
　　　background: linear-gradient(#404d77, #313f6e 49%, #293765 50%); /*グラデーション*/
　　　border-bottom: 4px solid #000; /*下線*/
　　　border-image: linear-gradient(to right, #000 0%, #cfd5e2 100%);
　　　border-image-slice: 1; /*mainブロック内の大見出し：h2タグ 先頭に矢印の透過画像を入れる。（スマホなどは適用外）*/

@media screen and (min-width:1000px) {
main h2 {
　　　/*左側に透過画像を付ける。*/
　　　background: url(../images/arrow.png) no-repeat left center, linear-gradient(#404d77, #313f6e 49%, #293765 50%);
　　　/*h2タグ内の余白:20→50pxへ画像の左側の余白を広げた。→ arrow.png に文字が重ならないようにするため。*/
　　　padding: 5px 0px 5px 50px;/*h2タグ内の余白*/
}

その他、疑似要素の追加
/*よくお寄せいただくご相談にチェックマークを付ける。*/
.list-container-narrow-height .list ::before {
font-family: "Font Awesome 5 Free"; /*Font Awesomeを使う指定*/
　　　content: '\f00c'; /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。*/
　　　font-weight:900; /*この手の設定がないとアイコンが出ない場合があります*/
　　　margin-left: 0.5em; /*アイコンとテキストとの間に空けるスペース*/
　　　margin-right: 0.5em; /*アイコンとテキストとの間に空けるスペース*/
　　　color: #999; 　　　/*font-weightを正しく入れないと「表示されない」*/
　　　/*SOLIDは「900」、REGULARとBRANDSは「400」、LIGHTは「300」*/
}

2023/2/25共通設定

メニューバー、フットメニュー：マウスオーバー時のスタイルを追加
1000px以上の画面にてアンダーラインアニメーションを設定（スマホなどは適用されない）
@media screen and (min-width:1000px) {
/*リンクをホバーすると下線が伸びるアニメーション*/
メインメニュー：中心から左右へ
.animate-link-main {
　　　text-decoration: none;
　　　background-image: linear-gradient(40deg, #293765, #fff, #293765); /* 線の色 */
　　　background-repeat: no-repeat;
　　　background-position: center center; /* 線の起点を中央・中央に設定 */
　　　background-size: 0 2px; /*線の横幅を0、縦幅を1pxに */ 　　　transition: background-size 0.2s; /* 線を伸ばすアニメーション実行時間を指定 */ }

.animate-link-main:hover {
　　　background-size: 80% 1px; /* 線の横幅を80%にする */
}

フッターメニュー：左から右へ
#footermenu a {
　　　text-decoration: none;
　　　background-image: linear-gradient(40deg, #ccc, #ccc, #333); /* 線の色 */
　　　background-repeat: no-repeat;
　　　background-position: left bottom; /* 線の起点を左・下に設定 */
　　　background-size: 0 1px; /* 線の横幅を0、縦幅を1pxに */
　　　transition: background-size 0.6s; /* 線を伸ばすアニメーション実行時間を指定 */
}

#footermenu a:hover {
background-size: 100% 1px; /* 線の横幅を100%にする */
}

2023/2/24共通設定

スクロールアップ後に再表示されるメニューバー
一揆にパット出てきて目障りに感じたため、フェードインで再表示させるように変更
JS:赤文字箇所追記
if($(window).innerWidth() >= 1000){
$(function() {
　var nav = $('#menubar');
******** 途中省略 *********
　if (winTop >= navTop + 0) {
　　　　******** 途中省略 *********
　} else if (winTop <= navTop) {
　　　　if (showFlag) {
　　　　showFlag = false;
　　　　nav.removeClass('fadeIn');
//※ 　　　　nav.stop().animate({'top' : -navHeight+'px'}, 650, function(){
　　　　nav.removeClass('fixed');
　　　　//↓このnav.addClassだけにしたいが、
　　　　nav.addClass('fadeIn');
　　　　//そうすると１回だけのフェードインなので、上記※のnav.removeClassも追記
　　});
　}
******** 以下、省略 *********

--------------
CSS:以下のアニメーションクラスを追記
.fadeIn{
　　animation-name: fadein;
　　animation-duration: 0.8s;
}
@keyframes fadein{
　　from{
　　opacity: 0;
　　transform: translatey(-10px);
　　}
　　to{
　　opacity: 1;
　　transform: translatey(0);
　　}
}

2023/2/23その他

ファビアイコンの登録
いつのまにか？iOS用のお気に入りアイコンが欠落していた。Andriod用も登録。
<link rel="apple-touch-icon" sizes="192x192" href="images/android-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">

2023/2/23共通設定

1000px以下の画面サイズでは慣性スクロールを実行させない様にする。
スマホとタブレットは本来のスクロールを。ただし、大きいタブレットは省く。
JS：
var windowWidth = $(window).width();
var windowSm = 1000;　　　　　　/*←1000pxを代入*/
if (windowWidth <= windowSm) {　/*←1000px以下のとき*/
/*なにもしない*/
} else {　　　　　　　　　　　　/*←それ以外（1000pc以上）*/
luxy.init();　　　　　　　　　　/*←慣性スクロール実行*/
}
↓
2023/3/28：会社概要のページなどにあるサイト左側の『サブメニュー』をスクロール追従型へ変更。
こちらの下部に記載のJSでもluxyの実行判定を含むためこのJSと統合した。

2023/2/23共通設定

フッターメニューの表示改善、スマホで文字が改行されてしまうことを解消
#footermenu {
/*並びかたの種類の指定　space-between;→space-evenly;へ変更*/
justify-content: space-evenly;
}
#footermenu ul {
/*flex: 1;*/ /*上記space-evenly;へ変更の際に廃止*/
}
メディアクエリ―の設定段階を増やす。
デフォルトの400px以下を、414px以下と415以上430px以下とする。
@media screen and (max-width:414px) と @media screen and (min-width:415px) and (max-width:430px)に分け、 414以下には #footermenu {font-size: 60%;}を追記。
※大きな画面のスマホではサイズ変更しなくて改行されないが、一般的な画面サイズでは改行されていた。
1000px以上でリンクの横に Font Awesome アイコン(f105)を表示

2023/2/23共通設定

メインメニューに「トップページ/HOME」を追加
英語圏でホームページとはウェブサイトの表紙を示す。なので、英語圏で表紙のページはHOMEと略され、TOPという表現は存在しない。 一方、日本ではホームページ＝ウェブサイト全体という概念があり、表紙のことをトップページという習慣がある。 フッターメニューにはトップページを追加。

2023/2/22受託加工

スライドショーの表示サイズ・レスポンシブ対応
受託加工ページ末尾にあるスライドショーは工程名のクリックジャンプ機能（PC、タブレットのみ表示）を備えており、 トップ画面のスライドとは仕様がことなる。このため、スマホの縦画面で左右に大きくはみ出していたが、この現象をなくす。 画像は小さくなる。
メディアクエリ―（@media screen and (max-width:1000px) {…}　内に以下を追記
.slickGoTo img{
max-height: 150px;
/*画像（img）の高さを指定することで改善*/ }
ただ、事情あってPC、タブレットではスライドショーの下に広めの空白ができてしまう。

2023/2/21全ページ

CSS：慣性スクロール実装にともなう抜本的な構造変更
メインメニューを<luxy>で包括すると見出しや様々な要素が横にズレて異常な挙動を示した。
メニューバーとヘッダーを body の外（上）に記載

<!--*************** 基本構造 ***************-->
<!DOCTYPE html>
<html lang="ja">
<head>…</head>
※bodyの外
ここへ移動 ←──────┐
　　　　　　　　　　　　 │
<body>　　　　　　    　│
<div id="luxy">　　　　 │
<div container>　　　　 │
　　　　　　　　　　　　 │
<header></header>──┤
#メインメニュー  ────┘
スライドショー(slick)
<main>…</main>
<footer>…</footer>

</div><!--**** /#container ****-->
</div><!--**** /#luxy ****-->
</body>
</html>
<!--*************** 基本構造 ***************-->

header：外に出したためサイズと位置の設定が別途必要になった。
max-width: 1500px;/*幅指定*/
margin: 0 auto;/*中央揃え*/
padding: 1rem;/*余白を設け、メニューバーとのバランスを*/
※margin: 20px 3%;/*廃止*/

#menubar： 外に出したためサイズと位置の調整が別途必要
max-width: 1500px;
margin: 0 auto;

2023/2/21TOPページ

2023/2/14の再改善 /*CSS：「slick」ロード時に一瞬縦並びになる現象を改善する
フェードインで見た目の処理をごまかす。
.mainimg{
opacity: 0;
transition: opacity .3s linear;
}
.mainimg.slick-initialized{
opacity: 1;
}

2023/2/17不具合修正

2023/2/16のスクロールイベントの実装にて不具合を確認。
スマホのハンバーガーメニューが見えなくなった（スクールすると出現）
//画面サイズで実行の可否を決定。（1000px以上でイベント事項）
JS：
//***************************************
if($(window).innerWidth() >= 1000){
・・・ここに$(function()を記載
};
//***************************************
※//if (!navigator.userAgent.match(/(iPhone|Android)/)){…｝//←なぜか×

2023/2/16共通設定

スクロールイベントの改善（スクロール後にでてくるメニューバーの表示改善）
z-indexでは改善できないヘッダー付近の重なりをなくす。（重なってないように見せるためのアニメーションイベント）
JS：
//***************************************
$(function() {
　　var nav = $('#menubar');
　　var navTop = nav.offset().top+10;
　　var navHeight = nav.height()+0;
　　var showFlag = false;
　　nav.css('top', -navHeight+'px');
　　//ナビゲーションの位置まできたら表示
　　$(window).scroll(function () {
　　　　var winTop = $(this).scrollTop();
　　　　if (winTop >= navTop) {
　　　　　　if (showFlag == false) {
　　　　　　　showFlag = true;
　　　　　　　　nav
　　　　　　　　　　.addClass('fixed')
　　　　　　　　　　//メニューバーが下へ出る速さ、数値を大きくすると遅くなる（小さくすると早くなる）
　　　　　　　　　　.stop().animate({'top' : '0px'}, 300);
　　　　　　 }
　　　　} else if (winTop >= navTop) {
　　　　　　　if (showFlag) {
　　　　　　　　showFlag = false;
　　　　　　　　　　//メニューバーが上がる速さ、数値を大きくすると遅くなる。（小さくすると早くなる）
　　　　　　　　　　//ゆっくりと上がることで重なりを見えにくくしている。
　　　　　　　　　　nav.stop().animate({'top' : -navHeight+'px'}, 950, function(){
　　　　　　　　　　nav.removeClass('fixed');
　　　　　　　});
　　　　　　}
　　　　}
　　});
});

//***************************************
CSS：
.fixed {
　　　　position: fixed;
　　　　width: 100%;
　　　　top: 0;
　　　　z-index: 100;
　　　　margin: auto;
　　　　box-shadow: 0px 10px 10px -10px;
}
//***************************************

2023/2/15共通設定

トップページのスライド（slick）の調整
現時点での設定
slick.js：
$('.mainimg').slick({
　　　　autoplay: true,
　　　　dots: true,　　　//丸いページナビボタンを表示
　　　　arrows: false,　　//左右の矢印
　　　　autoplaySpeed: 4000,//切り替えのスピード。デフォルトは3000。
　　　　pauseOnHover: false,//マウスオン時にスライドショーをストップするか。
　　　　centerMode: true,　//追記　「true」にすれば幅可変の中央寄せ
　　　　variableWidth: false,　//追記　スライド幅の自動計算を有効にします。
　　　　//centerPadding: '18%'
　　　　adaptiveHeight: true,
　　　　responsive:[{
　　　　　　　　//****　ブレークポイント！ ***
　　　　　　　　breakpoint: 1000,　//1000以下のとき（条件）
　　　　　　　　settings: {
　　　　　　　　slidesToShow: 1,　//複数指定時のみ変更
　　　　　　　　//slideToScroll: 1
　　　　　　　　centerPadding: '5%',　//別途指定
　　　　　　　　adaptiveHeight: true,　//（共通）
　　　　　　　　centerMode: false,　　//*****相違箇所*****
　　　　　　　　variableWidth: false,　//（共通）
　　　　}
// 　　　　}, {　　//無効
//　　　　　　　breakpoint: 480,//メディアに応じて複数のブレークポイントを設定するときまで無効
//　　　　　　　settings: {　　//無効
//　　　　　　　slideToShow: 2,//無効
//　　　　　　　}//無効
　　　　}]
});

2023/2/14不備改善

/*CSS：「slick」ロード時に一瞬縦並びになることがある。これをCSSで解決する ---------------------------------------------------------------------------*/
/*最初はスライダーをdisplay: none;で消しておき*/
.mainimg{display: none;}
/*「slick-initializedクラスが付与されたら」表示*/
.mainimg.slick-initialized{display: block;}
※上記ののCSSを追加しても 一瞬縦並びになる場合
jQueryで解消も可能。JSにて、初期のスライドの高さを「0」にして、slick-initializedクラスが付与後に高さを戻すこでも可
.mainimg {height: 0;}
　/*CSSでスライダー要素の高さを「0」に*/

/*jQueryのready関数を使い、読み込みが終わったらスライダー要素の高さをautoに戻す*/
$(document).ready(function(){
　　　$('.slider').css('height','auto');
});

2023/2/13共通設定

トップメニューのドロップリスト、マウスオーバーで少し色を変える。
CSS：
.ddmenu_parent ul a:hover {
color: #293765 !important;
background: #f5f5f5 !important;←これを追記
}

2023/2/13共通設定

トップメニュー　品質管理 → 品質管理・製品開発(修正)
このため CSSの画面幅1000px以上に.sml {font-size: 95%;}/*追記*/
※そのままだと、品質管理・製品開発が改行されてしまう。
↓ 2023/2/15
.sml 廃止、代わりに menubarブロック初期設定
#menubar {font-size: 95%;}　を採用

2023/2/10共通設定

【jquery非依存】慣性スクロールを実装
JS：window.onload = function() {luxy.init();}
HTML：
<div id="luxy">
　<p class="luxy-el">適用部分</p>
</div>
オプションは個別に変更
data-speed-y="-3.5"　縦方向
data-offset="0"
data-horizontal='100'
data-speed-x="0"　横方向
各ページ末尾に　<script src="js/luxy.js"></script>

2023/2/9受託加工

/*受託加工の生産設備リスト*/　Slickスライドにジャンプ機能を実装
Slick JS：const option = {…}、const slickGoTo = $('.slickGoTo');　……　}); 追記
CSS：.faci ul{…}、.faci li{…}、.faci li::before {…}、.faci li:hover {…}　追記
小さい画面幅ではリストが縦並びになるため、リストに<div class="frame1">を追記
HTML：<div class="frame1"><div class="faci"><ul><li class="navList">設備名</ul>‥‥</li></div></div>
"frame1"は1000px以下で非表示に設定↓
CSS：@media screen and (max-width:1000px) に　.frame1{display:none;} を設定
※リストのドットは Font Awesome の content: '\f04b';、font-weight: 900;を使用

2023/2/8共通設定

画面幅の制限を解除。CSS：#container {max-width: auto;}　/*最大幅。これ以上広がらない。もともとは1500px。autoでフルサイズ幅*/

2023/2/2受託加工

CSS：*/inquiry 受託加工ページの問い合わせポップアップボタンの設定*/
HTML:<div class="inquiry"><a href="/fmail/postmail2.html" target="_blank">受託加工に関する<br> » ご相談・お問合せ « </a></div>

 TOP

お知らせブロックに最大表示幅を設定、スクロールバー対応
CSS：#new {max-height: 15em;　overflow: auto;｝

 会社概要

「道修町のあゆみ と創業者 小城忠治」を開閉ボタンで表示
見出しアイコンに Font Awesome を使用　CSS：.faq dt::before {} に font-weight: 900;を追記、content: "\f036"; へ変更
HTML：<dl class="faq"><dt class="openclose">道修町と小城忠治</dt><dd>・・・</dd></dl>
CSS：.openclose {cursor: pointer;}

2023/2/1受託加工

お問合せの「ポップアップ表示」を追加
CSS：/*inquiry 受託加工ページの問い合わせポップアップボタンの設定
.inquiry-show {display: block;}
.inquiry a {…記載省略…｝
.inquiry a:hover {background: rgba(144,27,27,1.0);}　追記

2023/1/30受託加工

Slick　スライドジャンプ機能　検討中　→2023/2/9参照

2023/1/31受託加工

ページ追加

2023/1/27品質管理

ページ追加

2023/1/19会社概要

ページ追加

2023/1/11TOP特徴

スライドショーはセンターモード表示、前後のスライドが見えるように設定されています。 前後の画像が見える利点として、「巻き戻し画像」と「先送り画像」の簡易把握が可能になることと、 全ての画像幅を統一させなくても空白の途切れがない連続したスライドショーが可能になります。
centerMode: true, //追記　「true」にすれば幅可変の中央寄せ
variableWidth: true, //追記　スライド幅の自動計算を有効にします。
slidesToShow: 1 //追記　１画面に表示する画像の枚数。センターモードは奇数を割り当てます。

2023/1/11HTML5

HTML5への対応のため、旧ホームページからの移行を予定しています。http://119.245.213.138/
PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示（レスポンシブWEBサイト）に対応することを目指します。
旧ホームページは ⇒こちら。

>>HOME