本日の共同作業内容：フロントエンドの改善を担当し、パートナーはテストとバックエンドロジックの最適化に取り組んだ。

本日の作業状況：

本日は主にフロントエンドの改善作業に集中した。チームメンバーとの議論を通じて、UIの改善点やアルゴリズムの最適化について話し合った。

フロントエンド画面のスクリーンショット：

作業進捗は限定的であったが、個人課題への集中により、今後の実装に向けてのアイデアとロジックの整理が深まった。

コード例：

@charset "UTF-8";
body{
    background-image: url(../images/p18.jpg);
    background-size: cover;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

a:hover {
    color: #fff;
    text-decoration: underline;
    font-size: 12px;
}

a:visited {
    color: #fff;
    font-size: 12px;
}
/*タブ全体を中央配置し、幅を600pxに設定*/
#tabDiv {
    width: 600px;
    margin: 1em auto;
    padding-bottom: 10px;
    border-right: #42bedc 1px solid;
    border-top: #42bedc 1px solid;
    border-left: #42bedc 1px solid;
    border-bottom: #42bedc 1px solid;
    background-color: #ffffff;
    opacity:0.8;
}
/*タブヘッダーのスタイル*/
#tabsHead {
    padding-left: 0px;
    height: 26px;
    background-color: #42bedc;
    font-size: 1em;
    margin: 1px 0px 0px;
    color: #5086a5;
    line-height: 26px;
}
/*選択中のタブヘッダー（リンク）のスタイル*/
.curtab {
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-right: #b2c9d3 1px solid;
    font-weight: bold;
    float: left;
    cursor: pointer;
    background: #42bedc;
}
/*非選択中のタブヘッダー（リンク）のスタイル*/
.tabs {
    border-right: #c1d8e0 1px solid;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-weight: normal;
    float: left;
    cursor: pointer;
    background: #42bedc;
}
p {
    font-size: 12pt;
    font-family: 华文楷体;
}
li {
    border-bottom-style: solid;
    border-bottom-color: #EEE;
    border-bottom-width: thin;
    height: 25px;
    font-family: "宋体";
    font-size: 12pt;
}

<html xmlns="http://www.w3.org/1999/html">
<head>
  <title>石巻交通大学 北京地下鉄検索システム</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <script type="jscript">
        //画像の自動切り替え
        var currentIndex=0;
        var intervalTime=2000;
        var imageArray=new Array();
        imageArray[0]="./images/p14.jpg";
        imageArray[1]="./images/p15.jpg";
        imageArray[2]="./images/p16.jpg";
        setInterval("switchImage()",intervalTime);
        function switchImage(){
            var targetElement=document.getElementById("targetImage");
            if(currentIndex==imageArray.length-1){
                currentIndex=0;
            }else{
                currentIndex+=1;
            }
            targetElement.src=imageArray[currentIndex];
        }

        //現在時刻表示
        function displayTime(dateObject) {
            var output, headColor, tailColor;
            var year = dateObject.getFullYear();
            if (year < 1900)
                year = year + 1900;
            var month = dateObject.getMonth() + 1;
            if (month < 10)
                month = '0' + month;
            var day = dateObject.getDate();
            if (day < 10)
                day = '0' + day;
            var hour = dateObject.getHours();
            if (hour < 10)
                hour = '0' + hour;
            var minute = dateObject.getMinutes();
            if (minute < 10)
                minute = '0' + minute;
            var second = dateObject.getSeconds();
            if (second < 10)
                second = '0' + second;
            var weekday = dateObject.getDay();
            headColor = "<font color=\"#000000\">";
            if (weekday == 0)
                weekday = "日曜日";
            if (weekday == 1)
                weekday = "月曜日";
            if (weekday == 2)
                weekday = "火曜日";
            if (weekday == 3)
                weekday = "水曜日";
            if (weekday == 4)
                weekday = "木曜日";
            if (weekday == 5)
                weekday = "金曜日";
            if (weekday == 6)
                weekday = "土曜日";
            tailColor = "</font>"
            output = headColor + year + "-" + month + "-" + day + " " + hour + ":" + minute
                    + ":" + second + "  " + weekday + tailColor;
            return (output);
        }

        function updateTime() {
            var currentDate;
            currentDate = new Date();
            document.getElementById("currentTime").innerHTML = displayTime(currentDate);
            window.setTimeout("updateTime()", 1000);
        }
        window.onload = function() {
            updateTime();
        }
        //タブ表示（tabHeadId：現在選択中のリンク；tabContentId：表示するコンテンツのID）
        function showTab(tabHeadId,tabContentId)
        {
            //タブコンテナ
            var container = document.getElementById("tabDiv");
            //すべてのコンテンツを非表示にする
            document.getElementById('tabContent1').style.display='none';
            document.getElementById('tabContent2').style.display='none';
            document.getElementById('tabContent3').style.display='none';
            document.getElementById('tabContent4').style.display='none'
            //表示対象を有効化
            document.getElementById(tabContentId).style.display = 'block';
            //タブヘッダー内のすべてのリンクを更新
            var headers = document.getElementById('tabsHead').getElementsByTagName('a');
            for(i=0; i<headers.length; i++)
            {
                //非選択スタイルを適用
                headers[i].className='tabs';
            }
            //現在のリンクを選択スタイルに変更
            document.getElementById(tabHeadId).className='curtab';
            document.getElementById(tabHeadId).blur();
        }

</script>
</head>

<body>

<div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt; ">石巻交通大学 北京地下鉄検索システム</div><br/>
<div id="currentTime" style="text-align: center;"></div>
<div id="tabDiv" style="width: 1000px">

  <div id="tabsHead">
    <a id="tab1" class="curtab" href="javascript:showTab('tab1','tabContent1')">路線検索</a>
    <a id="tab2" class="tabs" href="javascript:showTab('tab2','tabContent2')">駅検索</a>
    <a id="tab3" class="tabs" href="javascript:showTab('tab3','tabContent3')">出発地-目的地検索</a>
    <a id="tab4" class="tabs" href="javascript:showTab('tab4','tabContent4')">地下鉄路線図</a>
  </div>

  <div id="tabContent1" style="display: block">
    <form action="lineresult.html">
      | 石巻交通大学 北京地下鉄路線検索 |
|:-:|
| 路線名： | <select name="route"> <option value="地下鉄1号線">地下鉄1号線</option> <option value="地下鉄2号線">地下鉄2号線</option> <option value="地下鉄4号線">地下鉄4号線</option> <option value="地下鉄5号線">地下鉄5号線</option> <option value="地下鉄6号線">地下鉄6号線</option> <option value="地下鉄7号線">地下鉄7号線</option> <option value="地下鉄8号線">地下鉄8号線</option> <option value="地下鉄9号線">地下鉄9号線</option> <option value="地下鉄10号線">地下鉄10号線</option> <option value="地下鉄13号線">地下鉄13号線</option> <option value="地下鉄14号線">地下鉄14号線</option> <option value="地下鉄15号線">地下鉄15号線</option> <option value="地下鉄房山線">地下鉄房山線</option> <option value="地下鉄昌平線">地下鉄昌平線</option> <option value="地下鉄亦庄線">地下鉄亦庄線</option> <option value="空港線">空港線</option> </select> |
| <input type="submit" value="検索"></input> |

|
||
          </td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
      </table>
    </form>
  </div>
 
  <div id="tabContent2" style="display: none">
    <form action="nameresult.html">
      | 石巻交通大学 北京地下鉄駅検索 |
|:-:|
| 駅名： | <input name="stationName" placeholder="駅名を入力してください" type="text"></input> |
| <input type="submit" value="検索"></input> |
    </form>
  </div>


  
  <div id="tabContent3" style="display: none;text-align:center">
    <a href="#bottomLink" id="topLink" style="text-decoration: none;color: blue;">下部へ移動</a>
    <form action="bestresult.html">
    | 石巻交通大学 北京地下鉄出発地-目的地検索 |
|:-:|
| 出発地： | <input name="startStation" placeholder="出発駅名を入力してください" type="text"></input> |
| 目的地： | <input name="endStation" placeholder="到着駅名を入力してください" type="text"></input> |
| <input type="submit" value="検索"></input> |
    </form>
    <a href="#topLink" id='bottomLink' style="text-decoration: none;color: blue;">上部へ移動</a>
  </div>

 
  <div id="tabContent4" style="display: none;text-align:center;">
    ![](./images/p1.jpg)
  </div>
</div>
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">&copy;著作権所有：石巻交通大学 情報科学技術学院</div>
</body>
</html>