小城製薬株式会社

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

2024/5/10サイト内検索機能

トップページにサイト内検索を設置

PHP（原型）：
ここから------------
<?php
// 検索キーワードを取得
$searchTerm = isset($_GET['q']) ? $_GET['q'] : '';

// 検索キーワードが入力されているかチェック
if (!empty($searchTerm)) {
　$files = glob('../*.html'); // フォルダ内の全HTMLファイルを取得
　$searchResults = [];

　foreach ($files as $file) {
　　$content = file_get_contents($file); // ファイルの内容を取得
　　$lines = explode("\n", $content); // ファイルの内容を行に分割

　　foreach ($lines as $lineNumber => $lineContent) {
　　　if (stripos($lineContent, $searchTerm) !== false) { // 大文字小文字を無視して検索
　　　　// HTMLタグを除外してマッチした行を取得
　　　　$lineContentWithoutTags = strip_tags($lineContent);
　　　　// ファイルとマッチした行を結果に追加
　　　　$searchResults[] = ['file' => $file, 'line' => $lineContentWithoutTags, 'lineNumber' => $lineNumber + 1];
　　　　break; // 最初に見つかった行のみを取得するためにループを抜ける
　　　}
　　}
　}

　// 検索結果を出力
　if (!empty($searchResults)) {
　　echo '<p>検索キーワード: ' . $searchTerm . '</p>';
　　foreach ($searchResults as $result) {
　　　echo '<p><a href="' . $result['file'] . '">' . $result['file'] . '</a> - 行番号: ' . $result['lineNumber'] . ' - ' . htmlspecialchars($result['line']) . '</p>';
　　}
　} else {
　　echo '<p>検索キーワードにマッチするページはありません。</p>';
　}
} else {
echo '<p>検索キーワードを入力してください。</p>';
}
?>
ここまで------------

上記PHP（原型）に対して次の修正を加えた。
↓
↓
・HTML中のコメントを除去する
・スクリプトタグ内のコメントを除去する
・スタイルシート内のコメントを除去する
・特定のページやメニューバーのテキストを除外する条件を追加
・大文字小文字を無視して検索
・検索キーワードを含むの前後のコンテキスト（マッチした前後２行）を出力
・一部のHTMLタグが検索結果に出力されるためHTMLタグ記号を除外する
・メージタイトルを取得して出力
・メージの更新日時、ヒット件数も表示
・クリックイベントのソースコードが出力するので特定的に除外する

修正後のPHP：
ここから------------

<form action="search.php" method="GET" target="_blank">
　<input type="text" name="q" placeholder="検索キーワードを入力してください" value="<?php echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : ''; ?>">
　<button type="submit">検索</button>
</form>

<?php
// 検索キーワードを取得
$searchTerm = isset($_GET['q']) ? $_GET['q'] : '';

// 検索キーワードが入力されているかチェック
if (!empty($searchTerm)) {
　$files = glob('../*.html'); // フォルダ内の全HTMLファイルを取得
　$searchResults = [];

　　foreach ($files as $file) {
　　　$content = file_get_contents($file); // ファイルの内容を取得

　　　// HTML中のコメントを除去する
　　　$content = preg_replace('/!--(.|\s)*?-->/', '', $content);

　　　// スクリプトタグ内のコメントを除去する
　　　$content = preg_replace('/]*>(.*?)<\/script>/s', '', $content);

　　　// スタイルシート内のコメントを除去する
　　　$content = preg_replace('/<style\b[^>]*>(.*?)<\/style>/s', '', $content);

　　　// メニューバーのテキストを取得
　　　preg_match('/<nav id="mainmenu">(.+?)<\/nav>/s', $content, $menuMatches);
　　　$menuText = isset($menuMatches[1]) ? strip_tags($menuMatches[1]) : '';

　　　// 特定のページやメニューバーのテキストを除外する条件を追加
　　　if ($file == '../log1.html' || $file == '../company.html' || $file == '../confirm.html' || stripos($menuText, $searchTerm) !== false) {
　　　　continue; // 検索対象から除外する
　　　}

　　　$lines = explode("\n", $content); // ファイルの内容を行に分割

　　　foreach ($lines as $lineNumber => $lineContent) {
　　　　if (stripos($lineContent, $searchTerm) !== false) { // 大文字小文字を無視して検索
　　　　　// 前後の行を取得
　　　　　$startIndex = max(0, $lineNumber - 2); // マッチした行の前の2行
　　　　　$endIndex = min(count($lines) - 1, $lineNumber + 2); // マッチした行の後の2行
　　　　　$contextLines = array_slice($lines, $startIndex, $endIndex - $startIndex + 1);

　　　　　// HTMLタグを除去し、タグ記号の一部を除外する
　　　　　$contextLines = array_map(function($line) {
　　　　　　$line = strip_tags($line);
　　　　　　$line = str_replace(['>', '<'], '', $line);
　　　　　　return $line;
　　　　　}, $contextLines);

　　　　　$context = implode("\n", $contextLines);

　　　　　// ハイライトされた箇所を含む前後のコンテキストを表示
　　　　　$highlightedContext = preg_replace('/(' . preg_quote($searchTerm, '/') . ')/i', '<span style="background-color: yellow;">$1</span>', $context);

　　　　　// クリックイベントのソースコードが出力するので特定的に除外
　　　　　$highlightedContext = preg_replace('/onclick="[^"]*"/i', '', $highlightedContext);

　　　　　// titleタグの内容を取得
　　　　　$pageTitle = '';
　　　　　preg_match('/<title[^>]*>(.*?)<\/title>/i', $content, $matches);
　　　　　if (!empty($matches[1])) {
　　　　　　$pageTitle = $matches[1];
　　　　　}

　　　　　// ファイルの更新日時を取得
　　　　　$fileUpdatedTime = date('Y-m-d H:i:s', filemtime($file));

　　　　　// ソースコードを除外して検索結果を追加
　　　　　$searchResults[] = [
　　　　　　'file' => $file,
　　　　　　'line' => $lineContent,
　　　　　　'lineNumber' => $lineNumber + 1,
　　　　　　'pageTitle' => strip_tags($pageTitle),
　　　　　　'context' => $highlightedContext, // ハイライトされた箇所を含む前後のコンテキスト
　　　　　　'updatedTime' => $fileUpdatedTime // ファイルの更新日時
　　　　　];
　　　　}
　　　}
　}

　// 検索結果を出力
　$totalResults = count($searchResults); // ヒットしたページの総数
　if (!empty($searchResults)) {
　　echo '<p><b>検索キーワード : ' . htmlspecialchars($searchTerm) . '</b> │ 件数: ' . $totalResults . '</p>';
　　echo '<hr size="5" width="100%" color="#00245d">';

　　foreach ($searchResults as $result) {
　　　if (!empty(trim($result['context']))) {
　　　　echo '<p>ページタイトル: ' . htmlspecialchars($result['pageTitle']) . '</p>';
　　　　echo '<p>' . htmlspecialchars($result['updatedTime']) . ' - <a href="' . $result['file'] . '" target="_blank">' . $result['file'] . '</a></p>';
　　　　echo '<p>マッチした箇所と前後のコンテキスト:<br>' . $result['context'] . '</p>';
　　　　echo '<hr>';
　　　}
　　}
　} else {
　　　echo '<p>検索キーワードにマッチするページはありません。</p>';
　}

} else {
　　// 検索キーワードが未入力の場合は何もしない
}
?>
ここまで------------

index.html ファイル内に、サイト内検索に関する<form>と CSS、JS を追記（ここでは省略）

他、PHPを作動させるため、現在保管中の Synology NAS の Web Station で設定を変更
Apacheサイトを「ネイティブなスクリプト言語ウエブサイト」として
PHP8.2対応に設定した。
※スクリプト言語を設定は： PHPキャッシュ有効、Xdebug無効、display_errors有効
拡張のオプションはなにもチェックなしでも作動可

2024/4/8沿革ダイジェスト

沿革ダイジェストページに表示する画像
それぞれの画像にスライド表示を実装
各年代ごとで複数の写真を切り替え表示できる仕様に変更した。
ただし、複数のスライドショーは落ち着きがないため、
画像の切り替えはマウスでドットをクリックまたはドラッグとした。

HTML（1900-1929の場合）：
変更前
<div class="d1900 zoom-out-image zoomImage"></div>

↓

変更後
<div class="digest-slick zoom-out-image zoomImage">
　<div class="d1900-1"></div>
　<div class="d1900-2"></div>
　<div class="d1900-3"></div>
</div>

HTML追記：
</style>
　/*-- slickスライドのオプション(全ての媒体で共通)　--*/
　.slick-slider .slick-arrow {
　　display: none !important;
　}
</style>

CSS：
変更前（1900-1929の場合）
.d1900{
　content: url(../images/enkaku/digest/1900.jpg);
　/*-- 画像のサイズを調整 --*/
　max-width: 100%; /*-- 最大幅を100%に設定 --*/
　height: auto; /*-- 高さを自動調整 --*/
　display: block; /*-- インライン要素としてではなく、ブロック要素として表示 --*/
}

↓

変更後
/*-- 画像の大きさ、表示に関する設定 --*/
.digest-slick > div{
　max-width: 100%; /*-- 最大幅を100%に設定 --*/
　max-height: 100%; /*-- 高さを自動調整 --*/

　background-size: cover;
　background-position: center;
　background-repeat: no-repeat;

　display: block; /*-- インライン要素としてではなく、ブロック要素として表示 --*/
}

.d1900-1{
　content: url(../images/enkaku/digest/1900-1.jpg);
}

.d1900-2{
　content: url(../images/enkaku/digest/1900-2.jpg);
}

.d1900-3{
　content: url(../images/enkaku/digest/1900-3.jpg);
}

JS（slick.js）追記:
$(document).ready(function(){
　$('.digest-slick').slick({
　fade: true, // フェードで画像を切替
　autoplay: false, // 自動再生
　dots: true, // ページネーションドットの表示

　// 全ての媒体で非表示にするために enkaku.html でも　
　// .slick-slider .slick-arrow {display: none !important;}　の指定が必要
　arrows: false // 矢印を非表示にする。
　});
});

JS（main-enkaku.js）追記：
※function adjustLinkBarへの追記
　var mainElement = document.querySelector('main'); //追記
　mainElement.style.width = h2Width + 'px'; //追記

2024/4/3亀岡工場

亀岡工場のページ、背景動画の表示に関する修正
一部のPC、例えば1366×768 のアスペクト比において、動画の左右に余白が発生している事が判明し、 CSSの修正を行った。

#video {
　position: absolute;
　z-index: -1;
　min-height: 105vh; /* 1366×768px などの一部の画面で左右に余白ができないようにする　*/
　min-width: 100%; /* 1366×768px などの一部の画面で左右に余白ができないようにする　*/
}

また、動画のアスペクト比を修正(1500→1920)し、改めて mp4 動画を作成、プレイリストへの変換をやり直した。
この際、コマンドプロンプトで６回のバッチ処理が面倒なのでテキストエディタに下記の内容を張り付け

バッチファイルの内容、ここから------------------------------
@echo off

rem PC向け出力
ffmpeg -i input.mp4 -c:v libx264 -an -b:v 10M -r 30 -s 1920x1080 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "pc-output2%%3d.ts" pc-output.m3u8

rem タブレット向け出力
ffmpeg -i input.mp4 -c:v libx264 -an -b:v 5M -r 30 -s 1280x720 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "tablet-output2%%3d.ts" tablet-output.m3u8

rem モバイル向け出力
ffmpeg -i input.mp4 -c:v libx264 -an -b:v 2M -r 30 -s 854x480 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "mobile-output2%%3d.ts" mobile-output.m3u8

rem PC向け出力
ffmpeg -i another-input.mp4 -c:v libx264 -an -b:v 10M -r 30 -s 1920x1080 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "pc-output2%%3d.ts" pc-output2.m3u8

rem タブレット向け出力
ffmpeg -i another-input.mp4 -c:v libx264 -an -b:v 5M -r 30 -s 1280x720 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "tablet-output2%%3d.ts" tablet-output2.m3u8

rem モバイル向け出力
ffmpeg -i another-input.mp4 -c:v libx264 -an -b:v 2M -r 30 -s 854x480 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "mobile-output2%%3d.ts" mobile-output2.m3u8

pause
バッチファイルの内容、ここまで。------------------------------

「convert.bat」という名前で c:\ffmpeg> フォルダ内に保存。そのままファイルを実行した。
pause　はバッチ処理が完了後にウィンドウを閉じることを示し、削除すれば閉じない。

（なお、コマンドプロンプトを開いて「c:\ffmpeg>」に移動し、「convert.bat」を入力し、まとめてバッチ処理を実行可能。）

2023/4/1沿革ダイジェスト

沿革ダイジェストページの改良
ナビゲーションの停止位置を調整し、適切な位置でスクロールを停止させる。

調整前
var adjust = -100;
↓
調整後
var adjust = -200;

$(function () {
　$('a[href^="#"]').click(function () {
　　　var adjust = -200;　// ← ここを変更
　　　var speed = 500;
　　　var href = $(this).attr("href");
　　　var target = $(href == "#" || href == "" ? 'html' : href);
　　　var position = target.offset().top + adjust;
　　　$("html, body").animate({ scrollTop: position }, speed, "swing");
　　　return false;
　});
});

2024/3/28亀岡工場

亀岡工場の背景動画を複数の動画からランダムに再生させる。
アクセス毎に任意の動画を選んで再生。
同じ動画が繰り返し再生されることもあれば、
異なる動画にも変わるランダム再生。
まずは２種類の動画を設置してみた。

別のプレイリスト(動画)をコマンドライン（ffmpeg）で生成。

ffmpeg -i another-input.mp4 -c:v libx264 -an -b:v 10M -r 30 -s 1550x780 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "pc-output2%3d.ts" pc-output2.m3u8

ffmpeg -i another-input.mp4 -c:v libx264 -an -b:v 5M -r 30 -s 1280x720 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "tablet-output2%3d.ts" tablet-output2.m3u8

ffmpeg -i another-input.mp4 -c:v libx264 -an -b:v 2M -r 30 -s 854x480 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "mobile-output2%3d.ts" mobile-output2.m3u8

生成したプレイリストに伴い、新たなマスターファイル（master2.m3u8）を作成
#EXTM3U
# 通信状態が悪い、クライアントのCPUの性能が良くない、解像度が良くない閲覧媒体向け。これを先に記載する。
#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=854x480
./mobile-output2.m3u8

# 中間的なストリーム
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720
./tablet-output2.m3u8

# 画面比16：9、通信状態が良い環境など向けのストリーム
#EXT-X-STREAM-INF:BANDWIDTH=10000000,RESOLUTION=1550x780
./pc-output2.m3u8
----------

HTML(変更箇所抜粋)：
変更前
<div id="video-area">
　<video id="video" poster="images/kameoka/kameoka-video.jpg" webkit-playsinline playsinline muted autoplay loop disablePictureInPicture></video>
</div>

↓
変更後

<div id="video-area">
　<video id="video webkit-playsinline playsinline muted autoplay loop disablePictureInPicture></video>
</div>

Java（変更箇所抜粋）:
変更前
// プレイリストファイル .m3u8 のリストを準備
var playlist = [
'./video/TS/master.m3u8',
'./video/TS2/master2.m3u8'
];

var video = document.getElementById('video');
var videoSrc = './video/TS/master.m3u8';

↓
変更後
// プレイリスト配列の各要素にオブジェクトを使って、動画のパスとそれに対応するポスター画像のパスを含める。
var playlist = [
{ src: './video/TS/master.m3u8', poster: './images/kameoka/kameoka-video.jpg' },
{ src: './video/TS2/master2.m3u8', poster: './images/kameoka/kameoka-video2.jpg' }
];

var video = document.getElementById('video');

// 追記：ランダムなプレイリストを選択
var randomIndex = Math.floor(Math.random() * playlist.length);
// それに伴い、ランダムに選択されたプレイリストのポスター画像を設定する部分も追加。
var videoSrc = playlist[randomIndex].src;
var posterSrc = playlist[randomIndex].poster;

2024/3/21亀岡工場

亀岡工場のページ、背景動画の配信を高速化
・出来るだけスムーズに再生を開始させることを目的とした改善。
・通信状態やクライアントの性能に応じて異なる仕様のストリーミングを割り当てる。
↓
HTTP Live Streaming（HLS）プレイリストファイル（.m3u8）によるストリーミング配信
動画を小さなセグメントに分割して配信する。
セグメント：tsファイル、MPEG-2 Transport Stream

元となる .mp4 ファイルを ffmpeg(コマンドプロンプトで作動）により
プレイリストファイル（.m3u8）と複数の tsファイル(セグメント) に分割する。
※ffmpegのインストール方法は末尾に記載。

ffmpegの操作（コマンドライン）
予め YMM4 で作成編集した動画(input.mp4)を
ffmpegをインストールしたフォルダ C:￥ffmpeg にコピーしておく。
「?ここに入力して検索」に"cmd"と入力しコマンドプロンプトを開く。
cd C:￥ffmpeg に移動して変換作業を行う。

ffmpegの変換パラメーターは
[入力オプション］-i 入力ファイル -c:v ビデオエンコード値 -c:a オーディオエンコ
ード値 [-an オーディオ無し] [-cn video無し] -b:v ビットレート指定 -r フレーム
/sec -s スケーリング SD:640x360 HD:1280x720 FullHD:1980x1280 -f hls HLS形式 -hls_time 分割ファイルの秒数（省略時最小値2秒）
である。

次の３つのパラメーターを入力（コピペ）して
プレイリストファイル（.m3u8）とプレイリスト（,ts）の生成を３回する。
ffmpeg -i input.mp4 -c:v libx264 -an -b:v 10M -r 30 -s 1550x780 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "pc-output%3d.ts" pc-output.m3u8

ffmpeg -i input.mp4 -c:v libx264 -an -b:v 5M -r 30 -s 1280x720 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "tablet-output%3d.ts" tablet-output.m3u8

ffmpeg -i input.mp4 -c:v libx264 -an -b:v 2M -r 30 -s 854x480 -f hls -hls_playlist_type vod -hls_time 3 -hls_segment_filename "mobile-output%3d.ts" mobile-output.m3u8

生成したファイル（C:￥ffmpegのフォルダに作られる。）を全てサーバーにアップロードする。
生成したファイルには３つのプレイリストがある。
pc-output.m3u8、tablet-output.m3u8、mobile-output.m3u8

これらのプレイリストを選択して再生を制御するマスタープレイリストmaster.m3u8 を
サーバーにアップする。
参考URL：https://developer.apple.com/documentation/http-live-streaming/creating-a-multivariant-playlist

master.m3u8の内容：
-----------ここから。
#EXTM3U
# 通信状態が悪い、クライアントのCPUの性能が良くない、解像度が良くない閲覧媒体向け。これを先に記載する。
#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=854x480
./mobile-output.m3u8

# 中間的なストリーム
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720
./tablet-output.m3u8

# 画面比16：9、通信状態が良い環境など向けのストリーム
#EXT-X-STREAM-INF:BANDWIDTH=10000000,RESOLUTION=1550x780
./pc-output.m3u8
-----------ここまで。

※容量の軽いプレイリストから順に記述すること。
master.m3u8はクライアントの画面の大きさだけでなく、通信状態やCPUの性能に応じて
３つのストリーミングりすとから適切なものを選択する。
master.m3u8 は iOS（safari）ではサポートされているが
サポートされていないブラウザでは JavaScriptライブラリ hls.js を組み込み再生可能。

HTML＆JS：
<!-- 背景動画の再生 --">
<script src="js/hls.js"></script>

<script>
var video = document.getElementById('video');
var videoSrc = './video/TS/master.m3u8';

if (video.canPlayType('application/vnd.apple.mpegurl')) {
　video.src = videoSrc;
} else if (Hls.isSupported()) {
　var hls = new Hls();
　hls.loadSource(videoSrc);
　hls.attachMedia(video);
}

// マウスホイールによる拡大と縮小を無効にする
function disableZoom(event) {
　if (event.ctrlKey === true) {
　　　　event.preventDefault();
　}
}

// マウスホイールによる拡大と縮小を無効にする
function disableZoom(event) {
　if (event.ctrlKey === true) {
　　event.preventDefault();
　}
}

// マウスホイールイベントをリスナーに追加する
document.getElementById('container').addEventListener('wheel', disableZoom);

// master.m3u8ファイルのURL
const masterPlaylistUrl = 'https://example.com/path/to/master.m3u8';
</script">

※ffmpegのインストールのインストール：
ffmpeg.orgトップページのダウンロードからwindowsの窓マークを押すと、
windows用のダウンロードサイトが2つ紹介されます。
以下のサイトからダウンロード
https://github.com/BtbN/FFmpeg-Builds/releases
ffmpeg-master-latest-linuxarm64-lgpl.tar.xz を選択
ダウンロードし解凍後、C:\ffmpeg のホルダーに解凍された内容を移動する。

その後、ffmpegプログラムのPATHをセットする必要がある。
windows「?ここに入力して検索」に"sysdm.cpl"入力
システムのプロパティー、詳細設定、最下段の環境変数（N)を開く。
ユーザー環境変数の「path」を選択して編集をクリック。
「新規」を押して"c:\ffmpeg\bin"を追加。

ffmpegが適切に作動するかの確認方法：
「?ここに入力して検索」に"cmd"と入力しコマンドプロンプトを開く。
echo %Path%　と入力してEnterキーを押す。
表示された結果に"c:\ffmpeg\bin"が含まれている場合、
正しく環境変数が設定されている。
また、ffmpeg -h または ffmpeg --help を入力して、
ffmpegのヘルプや使用可能なオプションが表示されれば
正しくインストールされている。

2024/3/6法令厳守・品質方針

品質方針のページを「法令厳守・品質方針」に変更
薬務課の指導により、もっと判りやすく社内に浸透しやすい表記に。

私たちは、決められた手順に則り作業を行います。
私たちは、ALCOA＋の原則に基づいて記録します。
私たちは、工程が品質に大きな影響をもたらすことを理解します。
私たちは、逸脱があればすぐに報告を行います。
私たちは、疑問が生じた際はすぐに相談します。

2024/3/4沿革ダイジェスト

沿革ページを改訂
沿革ページの初期表示を「沿革 - ダイジェスト」に変更
以前のGMP査察で、
『貴社の沿革は長くて、要点が判り難い。』
『知りたくない内容が多くて見づらい。』
という意見が数件あった。（事前に沿革を見る人が多い。）
⇒　誰にでも、もっと簡単に社歴を把握できるダイジェスト版を設置
具体的な説明内容は抽出事業創業50周年に作成したDVDを参照した。
従来の沿革は「詳しい変革」としてダイジェストから移動できるようにする。

2024/3/4沿革の年代区切り

沿革ページに年代区切りを設置（ページ内移動用）
後に設置予定の沿革ダイジェスト版に向けての対応。
沿革を5つの年代区切りに分割して

>1900-1929>　 >1930-1961>　 >1962-1981> 　>1982-2000>　 >2001->

clip-path（矢印）でページ上部にリンクバー（.link-bar）を設ける。

HTML：
<div class="link-bar nav-global">
　<ul>
　　<li><a href="#year1900" id="1900_link_js">1900-1929</a></li>
　　<li><a href="#year1930" id="1930_link_js">1930-1961</a></li>
　　<li><a href="#year1962" id="1962_link_js">1962-1981</a></li>
　　<li><a href="#year1982" id="1982_link_js">1982-2000</a></li>
　　<li><a href="#year2001" id="2001_link_js">2001-</a></li>
　</ul>
</div>

<div class="digest">
　<div class="each-container position-now" id="year1900">中身省略</div>
　<div class="each-container position-now" id="year1930">中身省略</div>
　<div class="each-container position-now" id="year1962">中身省略</div>
　<div class="each-container position-now" id="year1982">中身省略</div>
　<div class="each-container position-now" id="year2001">中身省略</div>
</div>

CSS：
link-bar { /*-- 幅と左側の位置は main-enkaku.js で設定 --*/
　position: fixed;
　background-color: #ffffff;
　padding: 10px;
　margin-top: 8px;
　font-family: 'Crimson Text', serif;

　z-index: 5; /*-- menubar は 100、menubarよりも下の重なりにする。--*/
　/*border: solid #bc0000 1px;*/
}

.link-bar ul {
　list-style-type: none;
　padding: 0;
　margin: 0;

　display: flex; /*-- 親要素をフレックスコンテナにする --*/
　flex-direction: row; /*-- 要素を横方向に配置する --*/
　width: 100%;
}

.link-bar li {
　line-height: 11px;
　font-size: 25px;
　padding: 0;
　background: linear-gradient(#808080, #666666 49%, #555555 50%);

　/*--
　矢じりのスタイリングをclip-pathで設定する。
　clip-path は CSS のプロパティで、
　要素のどの部分を表示するかを設定するクリッピング領域を作ります。
　具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。
　https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
　--*/

　clip-path: polygon(
　　10% 50%,
　　0 0,
　　90% 0,
　　100% 50%,
　　90% 100%,
　　0 100%
　);

　width: 20%;
　height: 40px;
　margin: auto 0;
}

　　.link-bar a:hover{
　　text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
　　}

　　.link-current{
　　　background: linear-gradient(#404d77, #313f6e 49%, #293765 50%);
　　　width: 100%;
　　　height: 40px;
　　}

JS：
$(function () {
　var set = 200;//ウインドウ上部からどれぐらいの位置で変化させるか
　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) {
　　　　　$('#1900_link_js').addClass('link-current');
　　　　} else if (current == 1) {
　　　　　$('#1930_link_js').addClass('link-current');
　　　　} else if (current == 2) {
　　　　　$('#1962_link_js').addClass('link-current');
　　　　} else if (current == 3) {
　　　　　$('#1982_link_js').addClass('link-current');
　　　　} else if (current == 4) {
　　　　　$('#2001_link_js').addClass('link-current');
　　　　}

　　　}
　　};
　});

　　$(function () {
　　　$('a[href^="#"]').click(function () {
　　　　var adjust = -200;
　　　　var speed = 500;
　　　　var href = $(this).attr("href");
　　　　var target = $(href == "#" || href == "" ? 'html' : href);
　　　　var position = target.offset().top + adjust;
　　　$("html, body").animate({ scrollTop: position }, speed, "swing");
　　　return false;
　　});
　});

リンクバーの幅、配置、位置固定は別のJSで指定（ここでの記載は省略）

2024/1/23品質方針

品質方針のページを追加

品質方針 - Quality Policy

法令厳守に関する指針 - legal compliance

2023/12/6事業概要

事業概要のページを追加
このページでは抽出事業、ワセリン事業、ミツロウ事業、ハッカ事業　の4カテゴリを紹介する。
従来の製品名の羅列は廃止⇒カテゴリで分類

見せ方に工夫：マルチセクションスクロールエフェクトのJavaScriptライブラリ → multiscroll.jsを採用する。
※ページの内容、言葉が少ないので演出を工夫。
↓
ページを垂直セクションに分割し、スクロールによってセクション間を移動させる効果でユーザーエクスペリエンスを向上させる。
具体的には、各セクションを左右に並べ、マウスホイール、キーボード（↑↓）、またはナビゲーションメニューを使用してカテゴリを移動できるようにします。

将来構想 ⇒ 各事業ごとに、横方向に伸びる線を描き、詳細ページへ誘導予定。
例えば、ワセリン事業では規格表とグレードを紹介し、それ以外に取引の歴史、古い写真も交えていろいろ紹介する。
抽出事業では製造フロー、剤形紹介など・・・。

ページの主な構造
/////////////////////////////////
本ページの内容は全て'div id="wrapper"' 内に収まっている。
HTML：
<div id="wrapper">
　<div id="selection">
　<h1>事業概要</h1>
　　<nav>
　　　<ul id="menu">
　　　　<li data-menuanchor="area0" class="active"><a href="#area0"></a></li>
　　　　<li data-menuanchor="area1" class="active"><a href="#area1">生薬エキス</a></li>
　　　　<li data-menuanchor="area2"><a href="#area2">ワセリン</a></li>
　　　　<li data-menuanchor="area3"><a href="#area3">ミツロウ</a></li>
　　　　<li data-menuanchor="area4"><a href="#area4">ハッカ</a></li>
　　　</ul>
　　</nav>
　</div>

　<div class="ms-left">
　　<section class="ms-section" id="left0">
　　</section>

　　<section class="ms-section" id="left1">
　　　<div class="category">
　　　　<h2>抽出事業</h2>
　　　　<p>説明文・・・</p>
　　　　<img class="crude" src="images/business/crude-left.png">
　　　</div>
　　</section>

　　<section class="ms-section" id="left2">
　　　
　　</section>

　　<section class="ms-section" id="left3">
　　　
　　</section>

　　<section class="ms-section" id="left4">
　　　
　　</section>
　</div>

　<div class="ms-right">
　　
　　<div class="ms-section" id="right0"><span class="scrollDown"></span></div>
　　<div class="ms-section" id="right1"></div>
　　<div class="ms-section" id="right2"></div>
　　<div class="ms-section" id="right3"></div>
　　<div class="ms-section" id="right4"></div>
　</div>
</div>

/////////////////////////////////
CSS：
垂直分割の
左側は表紙のみ（#left0）に背景画像を設定 #right1～#right4は小タイトル、説明文、画像配置
右側は全て背景画像　#right0～#right4

/*-- 左エリア画像設定 --*/
/*-- トップ画像設定 --*/
#left0 {
　background: url("../images/business/bg-left.jpg") no-repeat center;
　background-size: cover;
}

/*-- 右エリア画像設定（右は全て背景画像のみ設置） --*/
#right0 {
　background: url("../images/business/bg-right.jpg") no-repeat center;
　background-size: cover; /*-- 画像を要素全体に広げる --*/
　/*background-position: center center; /* 画像を要素の中央に配置 */
　background-position: 60% 120%; /*-- 水平方向（X軸）と垂直方向（Y軸）の位置 --*/
}

/////////////////////////////////
JS：
jquery.multiscroll.js　ライブラリをDL
main-business.js マルチスクロールに関するコードとwrapperの高さ指定に関するコードを含む。
// マルチスクロールに関するコード
$("#wrapper").multiscroll({
　sectionsColor: [
　"#fff",
　"#aa0d14",
　"#1b1f22",
　"#d7af00",
　"#69a247"
　//"#99B0F3",
　//"#B1A1D0",

　], //セクションごとの背景色設定
　//anchors: ["area0", "area1", "area2", "area3", "area4"], //セクションとリンクするページ内アンカーになる名前
　anchors: ["area0", "area1", "area2", "area3", "area4"], //セクションとリンクするページ内アンカーになる名前

　menu: "#menu", //上部ナビゲーションのメニュー設定
　navigation: true, //右のナビゲーション出現、非表示は false
　navigationTooltips: ["", "生薬エキス", "ワセリン", "ミツロウ", "ハッカ"], //右のナビゲーション現在地時に入るテキスト
　loopTop: false, //最初のセクションを上にスクロールして最後のセクションまでスクロールするかどうかを定義します。
　loopBottom: true, //最後のセクションを下にスクロールして最初のセクションまでスクロールするかどうかを定義します。
});

/////////////////////////////////
//'wrapper'　の高さ指定に関する処理が必要
アクセスする媒体に応じて'wrapper'　の高さを適切に変更する必要がある。

ＰＣでは
FHD 1920×1080pxでは ’footermenu’’footer’を表示
WIDEXGA 1360×768px では ’footermenu’を非表示にする。（’footer’は表示）
SXGA 1280×1024pc　でも ’footermenu’を非表示にする。（’footer’は表示）

タブレットの
縦向きは大きな端末では’footermenu’’footer’を表示
小さな端末では’footermenu’を非表示’footer’を表示

横向きは ’footermenu’を非表示にする。（’footer’は表示）

スマホの
縦向きは ’footermenu’を非表示にする。（’footer’は表示）
横向きは横向き禁止又は　禁止のアラート

↓
Java Script で ’footer’の底辺をビューポートの底辺にする。
’footermenu' を表示する場合は’footermenu'の底辺を’footer’の上辺にして
<nav id="mainmenu">の底辺から<div id="footermenu">の上辺までの距離を取得後、
<div id="wrapper">の高さにその距離を設定

又は

Java Script で ’footer’の底辺をビューポートの底辺にする。
’footermenu' を非表示にする場合は
<nav id="mainmenu">の底辺から’footer'の上辺までの距離を取得後、
<div id="wrapper">の高さにその距離を設定

これらの分岐とそれに対応する処理を Java Script で行う。

2023/11/15沿革

沿革ページの表示遅延を改善。
素早く下へスクロールしたとき、画像の表示が一瞬止まる不具合を修正。

Java Script 変更前：

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>

　
　<div class="parallax">

　　
　　<div class="tile-bar-g3">
　　</div>

　　<div class="g3">
　　
　　</div>

　</div>



</div>

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">
　　<div id="loading-main"></div>
</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>
</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>
　　<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>
</div>
</body>
</html>


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

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

2023/2/21TOPページ

TOPページのスライド
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不備改善

TOPページのスライド・軽微な改良
/*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/11新規サイト構築

小城製薬株式会社ホームページ　リニューアルの検討を開始
ここに記した内容は、新サイト構築上の備忘録であり、サイト構築における不具合の修正、改善事項、その他技術的を情報を示した改訂ログである。最終的には管理者だけの閲覧とする予定である。
旧ホームページは ⇒こちら。

>>HOME

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

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