<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>ブラウザとバージョン確認</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="links/rule.css">
        <!-- linksフォルダーのrule.cssを利用する -->
    </head>
    <body>
        <br>
            現在利用しているブラウザのバージョンは以下の通りです
            <h1><br>
            <script src="links/action.js"></script>
            <!-- linksフォルダーのaction.jsを利用する -->
            </h1>
        </body>
</html>
<!-- index.html -->
JavaScriptは、ほとんどコピー&ペーストですね。
/* action.js */
var browser = "";
var version = 0;
/* browserは無し、versionは0でスタート。ブラウザ判定には[navigator]オブジェクトの[userAgent]プロパティを使用。このプロパティの中にブラウザの「種類」や「バージョン」などの情報が格納されているので、プロパティに指定した文字列(chromeやsafari等)の文字列を[test]メソッドで正規表現チェックし、それが含まれているか否かでブラウザの種類を判断。[¥d]は半角文字。*/
if (/Opera/.test(navigator.userAgent)) {
browser = "Opera";
version = navigator.userAgent.match (/Opera\/(\d+\.\d+)/)[1];
} 
else if (/Edg/.test(navigator.userAgent)) {
browser = "Microsoft Edge";
version = navigator.userAgent.match(/Edg\/(\d+\.\d+)/)[1];
} 
else if (/Chrome/.test(navigator.userAgent)) {
browser = "Google Chrome";
version = navigator.userAgent.match(/Chrome\/(\d+\.\d+)/)[1];
} 
else if (/Safari/.test(navigator.userAgent)) {
browser = "Apple Safari";
version = navigator.userAgent.match(/Safari\/(\d+\.\d+)/)[1];
} 
else if (/Firefox/.test(navigator.userAgent)) {
browser = "Mozilla Firefox";
version = navigator.userAgent.match(/Firefox\/(\d+\.\d+)/)[1];
} 
document.write(browser);
document.write(" " + version);
document.write("バージョン: " + version);
なお、Internet ExplolerのレンダリングエンジンはTrident(開発終了)、
Chrome(28以降はWebKitから分岐されたBlinkを使用)、 Safari, EdgeのレンダリングエンジンはWebKit、
Firefox や Thunderbird のレンダリングエンジンはGecko、
OperaのレンダリングエンジンはPresto(開発終了)で
(15以降はWebKitから分岐されたBlinkを使用)  */
/* action.js */
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y:scroll;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body { 
    color: #000000;
    background-color: #dcdcdc;
    text-align: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    line-height: 1.0;
    }
    h1 {
        font-size: 30px;
        color: #ff0000;
    }
/* rule.css */


 
 
 

 
